AZ Tools

컬러 보간 / 그라데이션 스텝

색상

두 끝점 사이 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 그라데이션 모두 거기서 보간.

사용법

  1. 시작·종료 헥스 설정(또는 프리셋). ⇄로 역순.
  2. 스텝 수·색공간 선택 — 디자인 토큰 최선 기본은 OKLab.
  3. 전체 리스트 hex 또는 HSL로 복사, 또는 스와치 하나씩 잡기.

자주 묻는 질문

왜 OKLab이 sRGB보다 훨씬 나아 보임?
일반 sRGB 보간은 채널이 지각 명도와 추적 안 해서 탁한 중간톤 생성 — 빨강+초록 중간은 깔끔한 노랑 아닌 어두운 올리브. OKLab은 같은 스텝 크기가 눈에 같게 다르게 보이도록 만들어져 트랜지션 밝게 유지.
이징 커브는 뭐 함?
그라데이션 따라 스텝 간격 제어. `Ease-out`은 시작 가까이 스텝 더 몰림(낮은 끝 더 중요한 히트맵 유용); `Ease-in-out`은 양 끝에 더 디테일.

관련 도구