운영하는 사이트 컨텐츠중 지정 염색 앰플 도서관에 들어갈 색상을 정렬해야 하는 문제가 생겼다.
db set은 대강 이렇게 생겼다.
| 빕분홍 | 255 | 170 | 170 | #ffaaaa |
| 실버분홍 | 164 | 129 | 140 | #A4818C |
| 그레이체리 | 142 | 128 | 138 | #8E808A |
| 탁분홍 | 197 | 141 | 141 | #c58d8d |
| 진달래 | 172 | 72 | 126 | #ac487e |
| 진한딸기우유(진딸우) | 255 | 111 | 189 | #ff6fbd |
| 딸기우유(딸우) | 255 | 129 | 211 | #ff81d3 |
| 딥핑크 | 160 | 19 | 64 | #a01340 |
| 핫핑크 | 199 | 25 | 103 | #c71967 |
처음에는 대수롭지 않게 hex (web color code)대로 정렬해봤다.
간단히 webcode를 desc대로 정렬해봤다.
정렬은 되는데 뭔가 이상한..?
정렬이 안된다는 느낌이라고 해야하나..
다른 결과를 좀 내려다보니 아니나 다를까, 정렬이 되고 있지 않았다.
아니 정확히 말하자면 이렇게 정렬이 되어선 안됐다
딱봐도 이상하잖아..
그래서 이것도 그냥 정렬해서 안되겠구나 하고 찾아보니 색은 HSV나 HSL 이라는 하이라이트(밝기) 기준으로 정렬해야된단다.
관련 문서 같은건 위키나 이곳의 샘플코드를 보면 되겠다.
이렇게 한창 만들고 있다가, 잘 생각해보니 정렬을 위해선 모든 dataset에 배열안에 다들어가 있어야되는데,
read해서 바로 뿌려주는 내 페이지에는 비적합하다는 생각이 들었다. dbset이 몇개가 될줄알고 그걸 정렬을 위해 다 들고 있어야되나 이 생각이 들었다. (물론 이건 케이스마다 다른얘기)
그래서, 애초에 쿼리로 HSL을 적용해서 불러오면 어떨까 생각이 들었다.
결론부터 말하자면 웹컬러코드는 필요 없다. RGB색상이 필요하다.
select * from TABLE order by SQRT(colorR * colorR * 0.241 + colorG * colorG * 0.691 + colorB * colorB * 0.068) desc
HSV나 HSL은 결국 채도, 밝기에 의해 정렬되는것이기때문에 색상별로 가중치를 줘서 더한값을 정렬해야한다.
그 값은 쿼리에 나와 있듯이 R*R*0.241 + G*G*0.691 + B*B*0.068 값으로 구성된다.
즉, 그라데이션 같은 값으로 나오진 않는다. 하지만 색상정렬이 밝기별로 되고 있다는 느낌은 확실히 받을 수 있다.
다음은 위 쿼리를 설정해서 검색해본 결과.
1) Sort color using delta E(CIE 2000) - Similar Color gradient 에서 이어집니다
2) 색상 정렬 (Color sort) 맺으며.. 에서 이어집니다