본문으로 건너뛰기
yutils
예시

입력 (기준 색)

#5b21b6 (Iris)

출력

Shades: #1a0a39, #2e1273, ... (어두운 방향 5단계)
Tints: #7d40d5, #a677e2, ... (밝은 방향 5단계)
보색: #87b621
유사색: #4521b6, #5b6db6
삼색조: #21b65b, #b6215b
사색조: #21b65b, #87b621, #b65b21

참고

각 스와치 클릭 시 HEX 자동 복사. shades/tints 는 명도(L) 만 조정, hue 회전은 보색/유사색/삼색조/사색조에 사용.

사용법 / 자주 묻는 질문

이런 경우 사용하세요

  • 디자인 시스템의 brand color 에서 명도 변형 자동 추출
  • Tailwind / shadcn 스타일의 50/100/200/.../900 토큰 시드 생성
  • 보색·유사색으로 디자인 보조 색 빠르게 탐색
  • 삼색조·사색조로 데이터 시각화 (차트) 컬러 셋 구성
  • Color Converter / Color Contrast 도구와 함께 디자인 워크플로

자주 묻는 질문

Q.shades 와 tints 의 차이는?
A.Shades 는 기준 색에 검정을 섞은 어두운 색 (L 감소), Tints 는 흰색을 섞은 밝은 색 (L 증가). 본 도구는 HSL 의 L 만 직접 ±10% 씩 5단계.
Q.보색·유사색·삼색조·사색조는 어떻게 계산되나요?
A.HSL 의 hue 만 회전. 보색 +180°, 유사색 ±30°, 삼색조 ±120°, 사색조 ±90° + 180°. 채도·명도 는 기준 색과 동일.
Q.OKLCH 같은 더 정확한 색공간은?
A.현재 HSL 기반 — 단순하고 빠름. OKLCH 같은 perceptual 색공간은 사람 눈 인식과 더 정합하지만 회전 각도 정의가 다름. 후속 도입 검토.
재미있는 사실

  • HSL (Hue·Saturation·Lightness) 색공간은 1978년 Alvy Ray Smith 가 발표한 모델입니다. RGB 의 기계 친화 표기를 사람이 직관적으로 다룰 수 있게 hue 각도(0~360°) + 채도·밝기로 분해한 시도 — 색 픽커 UI 의 사실상 표준이 됐어요.

    Wikipedia — HSL/HSV

  • 보색·삼색조·사색조 같은 'color harmony' 규칙은 1810년 괴테 (Goethe) 의 'Theory of Colours' 가 처음 체계화한 색상환 (color wheel) 에서 유래합니다. 200년이 지난 디지털 UI 디자인에도 그대로 통하는 이유 — 인간 눈의 보색 잔상 (afterimage) 현상이 같기 때문.

    Wikipedia — Color wheel

  • CSS Color 4 (2024) 가 도입한 oklch / oklab 색공간은 HSL 의 'perceptually uniform 한 척 하지만 사실 그렇지 않은' 약점을 보완합니다. 같은 lightness 값이라도 다른 hue 에서 시각적 밝기가 달라 보이는 함정 — oklch 가 사람 눈의 비선형 응답에 맞춰 보정.

    W3C — CSS Color 4

관련 가이드

관련 도구

이 카테고리 모든 도구 보기 →