지각적으로 균일한 OKLCH 공간에서 색조를 회전하고 명도를 단계적으로 조정합니다 — 동일한 조화 규칙이지만 HSL보다 팔레트가 훨씬 더 좋아 보입니다. 모든 파생 샘플은 실시간 WCAG 대비와 함께 독립적으로 조정할 수 있습니다.
:root {
--harmony-1: #2b9d8f;
--harmony-2: #957abc;
--harmony-3: #b47b44;
}[
{
"hex": "#2b9d8f",
"oklch": "oklch(63.0% 0.101 183.0)",
"role": "base"
},
{
"hex": "#957abc",
"oklch": "oklch(63.0% 0.101 303.0)",
"role": "harmony-2"
},
{
"hex": "#b47b44",
"oklch": "oklch(63.0% 0.101 63.0)",
"role": "harmony-3"
}
]모든 단계에서 실시간 대비와 색역 매핑이 적용된 지각적으로 균일한 조화입니다.
HEX를 입력하거나 무작위로 생성한 후 보색, 분할 보색, 3색 조, 4색 조, 유사색 또는 단색 조 중에서 선택하세요.
모든 파생 색상표본은 OKLCH 공간에서 L/C/H 슬라이더를 가지며, 색역을 벗어난 값은 표시 가능한 가장 가까운 색으로 매핑됩니다.
흰색/검은색과의 대비를 실시간으로 확인하고, CSS 변수나 JSON을 복사하거나 전체 세트를 팔레트 보드로 보내세요.
OKLCH 조화에 대한 세 가지 일반적인 질문입니다.
여기에서 계속해서 색상을 활용하세요.
환을 드래그하여 기준 색상을 선택하고 6가지 조화 조합을 실시간으로 확인하고 보드에서 열거나 PNG로 내보내세요.
지각적으로 균일한 OKLCH 공간에서 L / C / H를 조정하고 실시간 미리보기와 oklch() / HEX / RGB 출력을 제공합니다.
하나의 브랜드 색상을 입력하면 primary / secondary / success / warning / danger를 제공하며 Tailwind 설정과 CSS 변수로 내보낼 수 있습니다.
스페이스바로 무작위화, 잠금, 드래그하여 재정렬, URL로 공유 — 팔레트 보드가 해야 할 모든 기능을 제공합니다.