색조 정렬 시 회색이 앞에 오는 이유?

순수 회색(채도 0)은 색조 정의 불가, 거의 회색도 불안정. 저채도 색을 앞에 모아 명도로 정렬 → 임의 색조에 떨어지는 것보다 예측 가능한 결과.

색조 vs 휘도 정렬 — 뭐 써?

색조는 색 패밀리로 그룹핑(빨강 → 주황 → 노랑 …). 휘도는 Rec. 709 가중치로 눈이 느끼는 밝기 기준 정렬 → 어두운/밝은 배경에서 대비별로 쌓을 때 좋음.

컬러 정렬

색상

공백·줄바꿈으로 구분된 임의 hex 리스트(앞 # 유무·3자리·6자리 모두) 읽기, 중복 제거, 선택 기준으로 정렬. 거의 무채색(채도 5% 미만)은 색조 정렬에서 빼서 맨 앞에 명도 순으로 그룹핑 → 무지개에 무작위로 흩어지지 않음. 각 행은 스와치·hex 값·기반 HSL 표시.

—

hex 색상

정렬 기준

방향

색상 수: 11

#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 색상 붙여넣기 — 한 줄에 하나, 쉼표 구분, 혼합 모두 가능.
정렬 축 선택, 오름·내림 선택.
정렬된 리스트 복사.

자주 묻는 질문

색조 정렬 시 회색이 앞에 오는 이유?: 순수 회색(채도 0)은 색조 정의 불가, 거의 회색도 불안정. 저채도 색을 앞에 모아 명도로 정렬 → 임의 색조에 떨어지는 것보다 예측 가능한 결과.
색조 vs 휘도 정렬 — 뭐 써?: 색조는 색 패밀리로 그룹핑(빨강 → 주황 → 노랑 …). 휘도는 Rec. 709 가중치로 눈이 느끼는 밝기 기준 정렬 → 어두운/밝은 배경에서 대비별로 쌓을 때 좋음.

컬러 정렬

사용법

자주 묻는 질문

관련 도구

색맹 시뮬레이터

CSS Box Shadow 생성기

컬러 포맷 변환기

CSS 그라디언트 생성기

컬러 팔레트 생성기

색상 대비 검사기