색 팔레트 생성

Palette Generator

기준 색에서 보색·삼각·유사색 규칙으로 조화로운 팔레트를 만듭니다.

색 하나를 받아 배색 규칙대로 색상만 돌리고, OKLCH 밝기와 채도는 그대로 둡니다. 그래서 삼각 배색을 만들었을 때 한 색만 눈에 띄게 어두워지는 일이 없습니다. 같은 규칙을 HSL로도 아래에 그려 주는데, 왜 그게 중요한지 보는 가장 빠른 방법입니다. 내보내기 전에, 색각 이상에서 두 색이 서로 붙어 버리지는 않는지와 각 색 위에 글자를 올릴 수 있는지도 확인해 줍니다.

🔒 브라우저 안에서만 처리palettecolorharmonygenerator

기준 색

색

CSS 표기법이면 무엇이든 됩니다. 이 색의 OKLCH 밝기와 채도를 유지한 채 색상만 돌립니다.

배색 규칙

규칙

간격: 1.00배규칙이 정한 색상 각도에 곱하는 배율입니다. 1이 교과서 간격입니다.

양옆 30도씩입니다. 한 색 가족처럼 읽히므로, 색상만으로는 위계가 생기지 않아 밝기 차이를 따로 줘야 합니다.

OKLCH

#0094c3

L 62.3 C 0.188 H 230

#3b82f6

L 62.3 C 0.188 H 260

#886cee

L 62.3 C 0.188 H 290

같은 규칙을 HSL로 그린 것 (비교용)

#3be0f6

L 83.3 C 0.132 H 209

#3b82f6

L 62.3 C 0.188 H 260

#523bf6

L 51.4 C 0.260 H 278

두 줄 모두 같은 각도로 색상을 돌렸습니다. OKLCH 줄은 체감 밝기를 일정하게 유지해서 편차가 0.0000인데, HSL 줄의 편차는 0.3191입니다. HSL의 “밝기”가 지각과 무관하기 때문입니다. 순수한 노랑과 순수한 파랑이 둘 다 50%라고 하지만 L*로는 65 넘게 차이가 납니다. 이건 렌더링 문제가 아니라 아무도 요청하지 않은 밝기 변화가 모든 HSL 배색에 박혀 있는 것입니다.

HSL 비교 보기

밝기 편차

0.0000

sRGB 밖

3개 중 1개

1개 색이 기준 채도를 sRGB 안에서 유지하지 못하고 0.064만큼 포기했습니다. 16진수는 안으로 옮긴 값이고, 내보내기의 oklch() 값이 넓은 색역 화면에서 실제로 보이는 색입니다.

실제로 버틸까요?

색각 이상 유형별로 가장 가까워지는 두 색, ΔE OKLab

적색맹0.026— 이 둘은 붙습니다
녹색맹0.021— 이 둘은 붙습니다
청색맹0.012— 이 둘은 붙습니다
전색맹0.013— 이 둘은 붙습니다

흰 바탕·검은 바탕 WCAG 대비

흰 바탕 3.49·검은 바탕 6.02둘 중 한쪽에서는 글자 가능
흰 바탕 3.68·검은 바탕 5.71둘 중 한쪽에서는 글자 가능
흰 바탕 3.87·검은 바탕 5.43둘 중 한쪽에서는 글자 가능

시뮬레이션에서 붙어 버리는 두 색은 두 대상을 구분하는 유일한 단서가 되면 안 됩니다. 모양이나 라벨, 밝기 차이를 함께 주세요. 대비 검사기가 특정 두 색에 대한 APCA 판정 전체를 보여 줍니다.

내보내기

접두사

:root {
  --brand-100: oklch(62.308% 0.1239 229.81); /* #0094c3 */
  --brand-200: oklch(62.308% 0.188 259.81); /* #3b82f6 */
  --brand-300: oklch(62.308% 0.188 289.81); /* #886cee */
}

CSS와 Tailwind 형태는 oklch()를 내보내고 16진수는 주석으로 붙입니다. 내보낼 때 정밀도를 버리면 OKLCH로 계산한 이유가 없어지고, oklch()를 받은 브라우저는 가능한 곳에서 넓은 색역 색을 그대로 그립니다.

색상 여러 개가 아니라 한 색의 50~950 램프가 필요하면 색상 단계 생성이 측정된 밝기 곡선에 맞춰 만들어 줍니다.

사용 방법

이미 가진 색을 넣습니다
보통은 브랜드 색이고, CSS 표기법이면 무엇이든 됩니다. 나머지는 전부 이 색의 색상·밝기·채도에서 나오므로, 전체를 좌우하는 결정은 이것 하나입니다.
규칙을 고르고 간격을 조정합니다
보색은 반대편 색상 하나, 유사색은 양옆, 삼각 배색은 120도씩 셋, 분할 보색은 보색 쌍의 긴장을 조금 눅인 것입니다. 간격 슬라이더는 그 각도를 배율로 조절하는데, 1이 교과서 간격이고 그보다 낮추면 한 가족처럼 읽힙니다. 단색 계열과 음영은 색상 대신 밝기를 움직이므로 각도 대신 단계 수를 묻습니다.
두 줄을 비교합니다
OKLCH 줄의 밝기 편차는 계산상 0에 가깝습니다. HSL 줄은 같은 각도로 돌렸는데도 편차가 남는데, HSL의 밝기가 지각과 무관하기 때문입니다. 순수한 노랑과 순수한 파랑이 둘 다 50%라고 주장합니다. 이 기준 색에서 두 줄이 똑같아 보인다면 실제로 같은 것이고, 어느 쪽을 써도 됩니다.
내보내기 전에 검증 패널을 읽습니다
색각 이상 종류별로 가장 가까워지는 두 색을 ΔE OKLab 값으로, 그리고 각 색의 흰 바탕·검은 바탕 WCAG 대비를 보여 줍니다. 붙어 버린다고 표시된 쌍은 두 상태를 구분하는 유일한 단서가 되면 안 됩니다. 모양이나 라벨, 밝기 차이를 함께 주세요.
코드가 쓰는 접두사로 내보냅니다
CSS 변수, Tailwind `@theme` 블록, SCSS, JSON 토큰, SVG 견본 중에서 고르면 됩니다. CSS 형태는 `oklch()`를 내보내고 16진수는 주석으로 옆에 붙입니다.

자주 묻는 질문

내보낸 16진수와 oklch() 값이 다른 색인데 어느 쪽이 맞나요?

표시 장치에 따라 둘 다 맞습니다. 기준 채도를 유지하면 sRGB를 벗어나는 색은 16진수 쪽이 채도를 깎아 안으로 들여보낸 값이고, `oklch()` 쪽이 실제로 계산된 색이라 넓은 색역 화면에서 그대로 보입니다. 잘린 색마다 채도를 얼마나 포기했는지 패널에 적혀 있습니다.

배색 규칙을 쓰면 예뻐지나요?

아닙니다. 색상환 위의 각도일 뿐이고, 기하학은 취향이 아닙니다. 규칙이 주는 것은 각 색에 이유가 붙은 출발점이고, 그것만으로도 색을 하나씩 따로 고르는 것보다 낫습니다. 어느 색을 넓게 쓰고 어느 색을 5%만 쓸지 같은 비율 판단은 여기에 전혀 들어 있지 않습니다.

이미 있는 팔레트를 붙여넣어 검사할 수 있나요?

여기서는 안 됩니다. 이 페이지는 색 하나에서 나머지를 만들어 내는 방향입니다. 특정 두 색이라면 대비 검사기가 두 색을 받아 판정해 주고, 이 중 한 색의 단계별 램프가 필요하면 색상 단계 생성이 만들어 줍니다.

"두 색이 붙는다"는 기준이 뭔가요?

시뮬레이션 후 ΔE OKLab이 0.06 아래인 경우입니다. 두 면을 한눈에 구분하기 어려워지는 지점쯤입니다. 시뮬레이션 자체는 Brettel 계열의 행렬 방식으로, 흔한 유형을 모형화한 것이지 특정 개인을 측정한 것이 아니며, 드문 유형이나 후천적 시력 저하에 대해서는 아무 말도 하지 않습니다.