색 그라데이션 단계(두 색 사이의 색)

차트 범례, 히트맵, 진행 막대에 쓸 다섯 가지 음영이 한 브랜드 색에서 다른 색으로 부드럽게 이어지길 원하시나요? 이 도구는 시작 색과 끝 색 사이(선택적으로 중간 색을 지나서)를 고르게 나눈 3~30개의 색을 돌려주고, 혼합이 이뤄지는 색 공간을 고를 수 있게 합니다. 이 선택은 대부분의 사람이 생각하는 것보다 훨씬 중요합니다. HEX 목록, 부드럽고 단계형인 CSS 그라데이션, 차트 라이브러리용 JSON, CSS 변수, 색 견본을 얻을 수 있습니다.

사용 방법

1. 시작 색과 끝 색을 입력하고, 혼합이 한 색을 지나야 하면 중간 색도 입력합니다.
2. 양 끝을 포함해 필요한 색의 개수를 정합니다.
3. 혼합 공간을 고릅니다. 고르고 선명한 단계는 OKLCH나 OKLab, 오래된 도구와 맞추려면 sRGB, 무지개는 HSL 긴 색상 경로입니다.
4. HEX 목록, JSON 또는 CSS 변수를 복사합니다.

계산식

colorᵢ = start + (end − start) × tᵢ, with tᵢ = i ÷ (n − 1), computed on the channels of the chosen space

sRGB에서 채널은 0–255 값이고, 선형 RGB에서는 빛의 세기이며, HSL과 OKLCH에서는 CSS Color 4처럼 색상이 색상환을 짧은(또는 긴) 쪽으로 돌아갑니다. 회색에는 색상이 없으므로 다른 색의 색상을 빌립니다. sRGB를 벗어난 OKLCH 결과는 명도와 색상을 유지하고 채도(chroma)를 잃습니다.

예시

검정에서 흰색까지 sRGB 5단계로 나누면 #000000, #404040, #808080, #BFBFBF, #FFFFFF가 됩니다(255 × 0.25 = 63.75 → 64 = #40). 선형 RGB로 섞으면 중간이 #BCBCBC가 됩니다. 빛의 절반은 중간 회색보다 밝게 보이기 때문입니다. 빨강에서 파랑까지 HSL로 가면 짧은 경로는 마젠타 #FF00FF를 지나고, 긴 경로는 라임 #00FF00을 지납니다.