본문으로 건너뛰기
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 색공간은 사람 눈 인식과 더 정합하지만 회전 각도 정의가 다름. 후속 도입 검토.

관련 도구

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