사용 방법
- 기본 색상을 입력하거나 선택하세요. “임의 기본 색상 생성”을 누르면 색상이 자동으로 선택됩니다.
- 색상 조화를 선택하세요. “명암 단계”는 매우 밝은색부터 매우 어두운색까지 11단계를 만듭니다.
- 유지하려는 색상을 잠근 다음 다른 기본 색상을 계속 탐색하세요.
- HEX, CSS 사용자 지정 속성 또는 JSON을 선택하고 이름을 설정한 다음 코드를 복사하세요.
작동 방식
색상 조화는 색상환에서 색조를 회전해 찾습니다. 보색은 반대 색조(180°)를 더하고, 유사색은 양쪽으로 30°와 60° 떨어진 색조를 더합니다. 삼색 조화는 120° 간격의 세 색조를, 사색 조화는 90° 간격의 네 색조를 사용합니다. 분할 보색은 보색 양옆의 두 색조(150°와 210°)를 사용합니다.
색조 회전은 HSL 대신 OKLCH에서 이루어집니다. OKLCH는 지각되는 명도를 일정하게 유지하므로, 같은 팔레트의 노란색과 파란색이 비슷한 밝기로 보이고 노란색만 유난히 밝게 보이지 않습니다. 회전한 색상이 sRGB 화면에서 표현할 수 있는 범위를 벗어나면, 명도와 색조를 유지하면서 채도를 낮춰 범위 안에 맞춥니다.
명암 단계는 Tailwind CSS의 명명 방식과 비슷하게 50부터 950까지 고정된 OKLCH 명도 단계로 구성됩니다. 가장 밝은 색조가 네온처럼 보이지 않도록 흰색과 검은색에 가까운 단계에서는 채도를 낮춥니다. 색상 조화는 시작점일 뿐입니다. 콘텐츠에 사용하기 전에 대비 검사기로 텍스트와 배경의 조합을 확인하세요.
예시
브랜드 색상에 포인트 색상 더하기
기본 색상 #3366cc에 “보색”을 적용하면 OKLCH 명도가 같은 따뜻한 황토색 #8c6500이 더해집니다. 파란색 브랜드에 포인트 색상을 더할 때 파란색과 주황빛 노란색을 함께 사용하는 경우가 많습니다.
컴포넌트 라이브러리용 디자인 토큰
“명암 단계”를 선택하고 이름을 “primary”로 설정한 다음 CSS 변수를 내보내세요. --primary-50부터 --primary-950까지 생성되어 배경(50–100), 테두리(200–300), 텍스트(700–900)에 바로 사용할 수 있습니다.
한 가지 색상을 유지하며 탐색하기
삼색 조화 팔레트의 두 번째 색상을 잠근 다음 기본 색상을 바꿔 보세요. 잠근 색상은 HEX 값이 유지되고 나머지 색상은 바뀝니다.
자주 묻는 질문
HSL 색상환 도구와 색상이 다른 이유는 무엇인가요?
이 도구는 지각 기반 색 공간인 OKLCH에서 색조를 회전합니다. OKLCH의 색조 각도는 HSL과 정확히 일치하지 않으므로, 색상의 “반대”가 HSL 도구에서 표시되는 색상과 조금 다를 수 있습니다.
JSON을 Tailwind CSS에서 사용할 수 있나요?
JSON은 이름과 HEX 값을 연결합니다. Tailwind 테마 설정에서 색상을 지정할 때 사용하는 형식과 같습니다. Tailwind 4에서는 이름을 --color-… 형식으로 바꾼 뒤 CSS 변수를 @theme 블록에 붙여 넣을 수도 있습니다.
생성된 팔레트는 접근성을 고려하나요?
자동으로 보장되지는 않습니다. 색상 조화만으로는 텍스트와 배경 사이의 대비를 알 수 없습니다. 사용할 각 조합을 대비 검사기로 확인하세요.
개인정보 보호
팔레트는 브라우저에서 생성됩니다. 색상은 어디에도 전송되거나 저장되지 않습니다.