배색 규칙의 원리
색을 HSL(색상·채도·명도)로 바꾼 뒤 색상환(Hue, 0~360°) 위에서 각도를 더해 동료 색을 만듭니다. 보색은 정반대(180°)라 대비가 가장 강하고, 분할 보색은 보색 양옆(150°·210°)을 써서 강한 대비를 조금 누그러뜨립니다. 유사색은 ±30° 안의 이웃이라 차분하게 어울리고, 삼각(120° 간격)과 사각(90° 간격)은 활기찬 조합입니다. 단색은 색상과 채도를 고정하고 명도만 바꾸어 같은 색의 밝고 어두운 변형을 만듭니다. 채도·명도는 기준 색 그대로 유지하므로 결과가 이론값이며, 실제 디자인에서는 강조색만 채도를 올리고 나머지는 낮추는 식으로 조정하는 것이 보통입니다.
대비비 읽는 법
각 견본 아래의 숫자는 그 색을 배경으로 흰 글자·검은 글자를 놓았을 때의 WCAG 2 대비비입니다. 본문 글자는 4.5:1 이상(AA), 7:1 이상이면 AAA이고, 18pt(굵게는 14pt) 이상의 큰 글자는 3:1이면 됩니다. 견본 위의 HEX 글자색은 둘 중 대비가 높은 쪽을 자동으로 골랐습니다. 밝은 파스텔은 흰 글자가, 진한 색은 검은 글자가 부족해지는 경우가 많습니다.
명암 9단계의 용도
Tailwind 같은 디자인 시스템은 한 색을 100(가장 밝음)~900(가장 어두움) 단계로 나누어 배경·테두리·글자에 나누어 씁니다. 여기서는 명도를 95%에서 12%까지 고정 간격으로 배치했습니다. 같은 색상의 밝은 단계를 배경, 500 부근을 버튼, 700~900을 글자에 쓰면 색상 수를 늘리지 않고도 위계를 표현할 수 있습니다.
CSS 변수 코드
생성된 모든 색은 :root의 커스텀 프로퍼티로 묶어 제공합니다. 복사해 스타일시트 맨 위에 붙이고 color: var(--analog-3)처럼 참조하면 됩니다. 다크 모드에서는 명도 단계를 뒤집어 쓰는 경우가 많으니 같은 변수 이름으로 값만 바꾸는 방식이 편합니다.
자주 묻는 질문
회색을 넣으면 팔레트가 전부 회색이에요.
채도가 0에 가까우면 색상 각도를 돌려도 같은 회색입니다. 배색 규칙은 채도가 있는 색에서 의미가 있으며, 회색 계열은 명암 9단계를 쓰세요.
다른 사이트의 보색과 조금 달라요.
HSL 색상환 기준인지, RYB(물감) 색상환 기준인지에 따라 보색이 다릅니다. 이 도구는 웹에서 표준인 HSL을 씁니다.
투명도(alpha)가 있는 색은요?
#rrggbb 6자리만 받습니다. 8자리를 넣으면 뒤 2자리를 무시하니 불투명 색으로 팔레트를 만든 뒤 CSS에서 알파를 따로 주세요.