본문으로 건너뛰기
AZ Tools

컬러 정렬

hex 색상 리스트 붙여넣기 → 색조·채도·명도·체감 밝기 기준 정렬. 디자인 토큰 팔레트 정리에 유용.

정렬 기준
방향
색상 수: 11
  • #ef4444
  • #f97316
  • #eab308
  • #22c55e
  • #14b8a6
  • #f8fafc
  • #64748b
  • #3b82f6
  • #0f172a
  • #8b5cf6
  • #ec4899

중복 제거됨. 거의 회색(S < 5%)은 색조 정렬 맨 앞에 명도순으로 모음.

사용법

  1. hex 색상 붙여넣기 — 한 줄에 하나, 쉼표 구분, 혼합 모두 가능.
  2. 정렬 축 선택, 오름·내림 선택.
  3. 정렬된 리스트 복사.

자세한 설명

펼치기

공백이나 줄바꿈으로 구분된 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 형태일 때만 중복으로 인식되어 제거된다.

관련 도구