종별 기본 색조를 측정하여 CSS hue-rotate로 캐릭터 색상을 일관되게 변화시키기

요약

작성자는 학습 게임의 캐릭터 색상 변경을 구현하며, 원래 색상이 달라 hue-rotate() 결과가 제각각이 되는 문제를 다뤘다. 종별 기본 색조로 회전 각도를 계산하고 무채색에는 sepia()를 먼저 적용했으며, 일부 색상 조합이 여전히 비슷한 한계도 기록했다.

핵심 포인트

• 같은 각도로 회전하면 원래 색상에 따라 결과가 달라지는 것을 확인했다.
• 종별 기본 색조와 목표 색조의 차이로 회전 각도를 계산했다.
• 무채색 캐릭터는 sepia()로 색을 입힌 뒤 색조를 회전시켰다.
• 20색을 분산했지만 18도 차이로 비슷하게 보이는 일부 조합은 허용했다.