🎨 색상 팔레트
메인 컬러 하나에서 배경·포인트·텍스트 색까지 이어지는 5색 팔레트를 만들어 드립니다.
사용 방법
- 팔레트의 중심이 될 메인 색상을 선택합니다.
- 배경·서피스·메인·포인트·텍스트 5가지 역할 색이 자동 생성됩니다.
- 각 색의 HEX 버튼을 눌러 개별 복사하거나, CSS 변수 블록을 통째로 복사합니다.
이럴 때 유용해요
- 랜딩페이지를 만들 때 브랜드 색 하나로 전체 배색을 잡을 때
- PPT·카드뉴스에서 통일감 있는 색 구성이 필요할 때
- 개발 중 임시 디자인에 쓸 그럴듯한 색 세트가 급할 때
알아두면 좋은 팁
- 포인트 색은 메인의 색상환 반대편(150° 회전)에서 뽑아 시선을 끌면서도 충돌하지 않게 설계했습니다.
- 텍스트 색은 순수 검정(#000) 대신 메인 색조가 살짝 섞인 어두운 색이라 화면이 훨씬 부드럽습니다.
- 생성된 CSS 변수를 :root에 붙여넣으면 var(--color-main)처럼 프로젝트 전체에서 재사용할 수 있습니다.
자주 묻는 질문
5가지 색은 각각 어디에 쓰나요?
배경(bg)은 페이지 바탕, 서피스(surface)는 카드·입력창 배경, 메인(main)은 버튼·링크 등 브랜드 색, 포인트(accent)는 강조 배지·알림, 텍스트(text)는 본문 글자색입니다. 이 다섯 역할이면 대부분의 UI를 커버합니다.
60-30-10 법칙이 뭔가요?
화면의 60%를 배경 계열, 30%를 서피스·보조 색, 10%를 포인트 색으로 채우는 고전적인 배색 비율입니다. 이 팔레트의 역할 구성을 그대로 따르면 자연스럽게 지켜집니다.
생성된 조합이 마음에 안 들면 어떻게 하나요?
메인 색의 채도나 밝기를 조금씩 바꿔보세요. 같은 색상(Hue)이라도 채도가 낮으면 차분한 톤, 높으면 생동감 있는 톤의 팔레트가 나옵니다. 보색·삼각 배색이 필요하면 '보색·배색 팔레트' 도구를 함께 쓰세요.
다크모드용 팔레트도 만들 수 있나요?
이 도구는 라이트 UI 기준입니다. 다크모드는 배경을 밝기 10~15%의 어두운 색으로, 텍스트를 밝기 90% 내외로 뒤집고 메인 색의 채도를 10~20% 낮추는 것이 일반적인 변환 공식입니다.
색이 서버로 전송되나요?
아니요. 모든 계산은 브라우저 안에서만 일어나고 어떤 값도 서버로 전송되지 않습니다. 새로고침하면 기본값으로 돌아갑니다.
