색상 팔레트 생성기

색상 팔레트 생성기 사용 가이드

브랜드 색이 하나 정해지면 그와 어울리는 보조 색, 강조 색을 정해야 합니다. 색상환에서 각도를 돌려 조합을 만드는 방법이 널리 쓰이는데, HSL에서 그대로 돌리면 노랑은 지나치게 밝고 파랑은 어둡게 나와 팔레트가 들쭉날쭉해집니다.

이 생성기는 사람 눈의 밝기 감각에 맞춘 OKLCH 색 공간에서 기준 색의 밝기와 채도를 유지한 채 색상각만 돌립니다. 같은 각도가 반복되면 밝거나 어두운 변형을 만들어 겹치는 색이 없게 하고, 화면에 표시할 수 없는 색은 채도를 줄여 맞춥니다.

단색 명도 단계에서는 같은 색상으로 밝은 색부터 어두운 색까지 단계를 만듭니다. 각 색 칸에는 흰 글자와 검정 글자 중 더 잘 읽히는 쪽의 대비가 표시되고, 칸을 누르면 HEX가 복사됩니다.

사용 방법

1. 1'기준 색'을 고릅니다. 이 색이 팔레트의 첫 색(primary)이 됩니다.
2. 2'조합 방식'과 '색 개수'(3~8)를 정합니다.
3. 3색 칸과 글자 대비를 확인하고, 마음에 드는 색 칸을 눌러 HEX를 복사합니다.
4. 4'출력 형식'을 고른 뒤 '코드 복사'로 팔레트 전체를 가져갑니다.

기준 색 #0E8C7E · 유사색 · 5개 · CSS 변수

:root {
  --palette-primary: #0e8c7e;
  --palette-secondary: #468a5c;
  --palette-accent: #01889c;
  --palette-tone-4: #6f823b;
  --palette-tone-5: #3d7faf;
}

이럴 때 쓰면 좋아요

• 브랜드 색 하나로 웹사이트 보조 색과 강조 색을 정할 때
• 차트나 그래프의 계열 색을 서로 구분되게 고를 때
• 발표 자료나 상세페이지의 색 구성을 빠르게 잡을 때
• 같은 색 계열의 밝기 단계가 필요할 때

문제가 생겼을 때

활용 팁

• 팔레트를 UI에 쓸 때는 한 색을 주 색, 하나를 강조 색으로 정하고 나머지는 차트나 일러스트에 쓰면 정리됩니다.
• 단색 명도 단계는 이름이 100~800 같은 숫자로 나와 디자인 토큰 단계로 바로 쓸 수 있습니다.
• 흰 배경 위 글자로 쓸 수 있는 색이 몇 개인지 결과 아래에 따로 표시됩니다.

자주 묻는 질문