컬러 정렬
hex 색상 리스트 붙여넣기 → 색조·채도·명도·체감 밝기 기준 정렬. 디자인 토큰 팔레트 정리에 유용.
- #ef4444h 0° · s 84% · l 60%
- #f97316h 25° · s 95% · l 53%
- #eab308h 45° · s 93% · l 47%
- #22c55eh 142° · s 71% · l 45%
- #14b8a6h 173° · s 80% · l 40%
- #f8fafch 210° · s 40% · l 98%
- #64748bh 215° · s 16% · l 47%
- #3b82f6h 217° · s 91% · l 60%
- #0f172ah 222° · s 47% · l 11%
- #8b5cf6h 258° · s 90% · l 66%
- #ec4899h 330° · s 81% · l 60%
중복 제거됨. 거의 회색(S < 5%)은 색조 정렬 맨 앞에 명도순으로 모음.
사용법
- hex 색상 붙여넣기 — 한 줄에 하나, 쉼표 구분, 혼합 모두 가능.
- 정렬 축 선택, 오름·내림 선택.
- 정렬된 리스트 복사.
자세한 설명
펼치기접기
공백이나 줄바꿈으로 구분된 16진수 색 목록을 읽어(맨 앞 # 유무, 3자리와 6자리 모두 가능) 중복을 없애고 고른 기준으로 정렬합니다. 무채색에 가까운 항목(채도 5% 미만)은 색상 정렬에서 빼내어 맨 앞에 모으고 명도순으로 정렬하므로, 무지개 사이에 제멋대로 흩어지지 않습니다. 각 행에는 색 견본과 16진수 값, 그리고 바탕이 되는 HSL이 함께 나옵니다.
무채색 규칙이 있는 이유는 말할 만한 색이 없을 때 색상이 정의되지 않기 때문입니다. 순수한 회색은 색상환 위에 각도가 없고, 변환기가 보고하는 값은 어느 채널이 우연히 더 높게 반올림되었는지의 부산물입니다. 그래서 회색을 색상으로 정렬하면 채도 있는 색들 사이에 임의로 끼어듭니다. 채도 5% 미만을 앞쪽 별도 묶음으로 빼는 것은 법칙이 아니라 관례이며, 아주 옅게만 물든 색으로 가득한 팔레트에서는 그 선의 양쪽에 걸치는 항목들이 생깁니다.
색상으로 정렬하면 빨강이 양쪽 끝에 놓입니다. 색상은 각도인데 목록은 그렇지 않기 때문입니다. 회전이 끊기는 지점에 걸친 빨강 무리는 두 덩어리로 갈라져 출력의 양 끝에 하나씩 앉는데, 결함처럼 보이지만 원을 평면에 편 결과입니다. 이것을 피하는 정렬은 없습니다. 유일한 해법은 자기 팔레트가 어디서 시작하는지 아는 것입니다.
중복 제거는 파싱된 값에 대해 정확히 이루어지므로 #FFF, #ffffff, #FFFFFF는 하나로 합쳐집니다. 보기에만 같은 색은 합쳐지지 않습니다. 한 단계 차이 나는 두 16진수 값은 어떤 화면에서도 차이를 보여 주지 못하더라도 서로 다른 항목입니다. 팔레트에서 시각적으로 중복인 색을 찾는 것이 목적이라면 지각적 거리 측정이 알맞은 도구입니다.
정렬은 적힌 그대로의 sRGB 값에 대해 이루어지며 색 관리는 하지 않습니다. 더 넓은 색역에서 만든 팔레트는 실제로 어떻게 표시되는지가 아니라 적힌 숫자대로 정렬됩니다.
자주 묻는 질문
색조 정렬 시 회색이 앞에 오는 이유?
순수 회색(채도 0)은 색조 정의 불가, 거의 회색도 불안정. 저채도 색을 앞에 모아 명도로 정렬 → 임의 색조에 떨어지는 것보다 예측 가능한 결과.
색조 vs 휘도 정렬 — 뭐 써?
색조는 색 패밀리로 그룹핑(빨강 → 주황 → 노랑 …). 휘도는 Rec. 709 가중치로 눈이 느끼는 밝기 기준 정렬 → 어두운/밝은 배경에서 대비별로 쌓을 때 좋음.
내 눈에는 밝기가 비슷한 두 색이 정렬에서 멀리 떨어진다. 왜?
HSL의 명도는 색이 얼마나 밝아 보이는지를 재는 값이 아니라 RGB 숫자로 하는 산술이다. 채도 높은 노랑과 채도 높은 파랑이 같은 명도 값을 가질 수 있는데, 실제로는 한쪽이 확연히 밝다. 눈이 파랑보다 초록에 훨씬 민감하기 때문이다. 정렬 순서가 보이는 대로여야 한다면 지각 밝기로 정렬하라.
hex에 rgb()나 색 이름이 섞인 목록도 정렬할 수 있나?
다른 표기는 먼저 hex로 바꿔야 한다. 여기 입력은 hex만 받는다. 어차피 해둘 만한 변환이기도 하다. 표기가 달라서 숨어 있던 중복이 드러나기 때문이다. #ff0000, rgb(255, 0, 0), red는 한 색을 세 가지로 쓴 것이고, hex 형태일 때만 중복으로 인식되어 제거된다.
관련 도구
Tailwind 색상 팔레트
전체 Tailwind CSS v4 기본 팔레트 — 22가지 색상 × 11단계 음영(50~950) — Tailwind 클래스·HEX·rgb()로 클릭 복사.
색상·CSS
컬러 팔레트 생성기
베이스 컬러 선택 → 클래식 색상환 하모니 — 보색·분할보색·삼색·사색·정사각·유사·단색.
색상·CSS
이미지에서 컬러 팔레트 추출
이미지를 드롭하면 Canvas로 주요 색을 분석해 팔레트 추출 — HEX 복사 또는 전체 일괄 복사.
색상·CSS
CSS 색상 이름
147개 CSS / X11 named color — HEX·RGB·실시간 스와치, 검색·색상 계열별 그룹화.
색상·CSS
파장 → 색 변환기 (nm → sRGB)
빛의 파장(380–780 nm 가시광)을 sRGB 근사 색으로 변환 — 클릭 가능한 무지개 그라데이션 바와 실제 태양 분광에서 가져온 프라운호퍼 흡수선 레퍼런스 포함.
색상·CSS
랜덤 색상 생성기
랜덤 색상을 HEX·RGB·HSL로 한꺼번에 생성합니다 — 개수를 고르고, 원클릭 복사, 즉시 다시 생성해 디자인 영감을 얻으세요.
랜덤