컬러 보간 / 그라데이션 스텝
색상
두 끝점 사이 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`은 양 끝에 더 디테일.
관련 도구
색맹 시뮬레이터
8가지 색각 이상(CVD)에 따라 이미지가 어떻게 보이는지 시뮬레이션.
색상00
CSS Box Shadow 생성기
여러 레이어로 CSS box-shadow를 디자인 — 실시간 미리보기 + CSS·Tailwind 출력.
색상00
컬러 포맷 변환기
어떤 색이든 HEX·RGB·HSL·HSV·OKLCH·CSS 변수로 한 번에 변환.
색상00
CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.
색상00
컬러 팔레트 생성기
기준 색에서 여섯 가지 배색으로 조화로운 팔레트를 만드세요.
색상00
색상 대비 검사기
글자/배경 대비를 WCAG AA·AAA 기준으로 검사하세요.
색상00