컬러 보간 / 그라데이션 스텝
두 끝점 사이 N개 균등 간격 컬러 생성. CSS 그라데이션이 하나의 부드러운 밴드라면, 이건 차트 시리즈·상태 배지·히트맵 범례로 배포할 수 있는 이산 스와치. 보간 발생 색공간 선택: 일반 sRGB가 가장 빠르지만 불균등; OKLab은 지각적 균일(Tailwind v4·Radix Colors 사용); linear RGB는 3D 엔진과 매칭; HSL은 짧은 호 따라 색조 이동. 이징 커브는 한쪽 끝에 스텝 더 몰리길 원하면 간격 굽힘.
- #3B82F61/7
- #6A7FE72/7
- #8B79D83/7
- #A672C84/7
- #BF68B95/7
- #D65BA96/7
- #EC48997/7
OKLab이 권장 기본 — Tailwind v4·Radix·현대 CSS 그라데이션 모두 거기서 보간.
사용법
- 시작·종료 헥스 설정(또는 프리셋). ⇄로 역순.
- 스텝 수·색공간 선택 — 디자인 토큰 최선 기본은 OKLab.
- 전체 리스트 hex 또는 HSL로 복사, 또는 스와치 하나씩 잡기.
자주 묻는 질문
- 왜 OKLab이 sRGB보다 훨씬 나아 보임?
- 일반 sRGB 보간은 채널이 지각 명도와 추적 안 해서 탁한 중간톤 생성 — 빨강+초록 중간은 깔끔한 노랑 아닌 어두운 올리브. OKLab은 같은 스텝 크기가 눈에 같게 다르게 보이도록 만들어져 트랜지션 밝게 유지.
- 이징 커브는 뭐 함?
- 그라데이션 따라 스텝 간격 제어. `Ease-out`은 시작 가까이 스텝 더 몰림(낮은 끝 더 중요한 히트맵 유용); `Ease-in-out`은 양 끝에 더 디테일.
관련 도구
CSS color-mix() 미리보기 (보간 공간 비교)
모던 CSS `color-mix()` 함수가 두 색을 보간 공간(srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear)에 따라 어떻게 다르게 섞는지 한눈에 비교 — 실시간 스와치, 계산된 hex, 공간별 전체 그라데이션, 그리고 복사 가능한 CSS.
OKLCH 컬러 피커
지각적으로 균등한 OKLCH 공간(명도·채도·색조)에서 색 픽 — 각 픽이 sRGB 디스플레이 gamut 안에 들어가는지 표시.
색상 이름 찾기
임의의 hex/RGB 색상에 가장 가까운 CSS·Tailwind·XKCD 색상 이름을 OKLab 인지 거리 기준으로 정렬해 표시.
CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.
컬러 믹서
두 색상을 RGB·HSL·CIELAB 공간에서 보간. 11단계 중간 그라데이션 스트립 표시.
Conic Gradient 생성기
CSS `conic-gradient()` 비주얼 빌더 — 회전 각도·중심 위치·컬러 스톱·도형 미리보기. 파이 차트·링 차트·체커보드 패턴·컬러 휠에 유용.