같은 색 하나도 묻는 사람에 따라 여러 방식으로 적어야 합니다. CSS에는 헥사 코드, 디자인 도구에는 RGB, 색조를 건드리지 않고 밝기만 조절할 때는 HSL, 인쇄소에는 CMYK 하는 식입니다. 이 변환기는 그중 어떤 표기로 적어도 나머지 전부를 한 번에 보여 줍니다. 그리고 대개 뒤따르는 두 가지 질문에도 답합니다. 그 위에 흰 글씨와 검은 글씨 중 무엇이 읽히는지를 WCAG 대비 기준으로 채점해 주고, 마우스를 올렸을 때의 색이나 디자인 시스템의 색 계단이 필요할 때 밝고 어두운 변형이 어떻게 생겼는지 보여 줍니다.
브랜드 색처럼 고정된 값에는 헥사가 좋습니다. 짧고 어디서나 통합니다. 변형을 만들어 낼 때는 HSL을 쓰세요. 숫자 하나만 바꾸면 같은 색조의 더 밝거나 덜 선명한 색이 나오므로, 세 채널을 짐작할 필요가 없습니다.
근삿값으로 여기세요. 실제 인쇄 색은 종이, 잉크, 인쇄기 프로파일에 따라 달라지므로 인쇄소는 공식이 아니라 색 프로파일로 변환합니다. 원하는 색을 대략 전달하는 용도로 쓰고, 최종 인쇄 사양으로 삼지는 마세요.
이 색과 흰 글씨 또는 검은 글씨 사이의 WCAG 대비율입니다. 본문 글씨는 4.5:1이 AA 기준이고, 크거나 굵은 글씨는 3:1이면 되며, 7:1이 AAA입니다. 3:1보다 낮으면 많은 사람에게 읽기 어려워지므로 쓰지 않는 편이 좋습니다.
둘 다 색조와 채도에서 출발합니다. HSL의 세 번째 값은 검정에서 순색을 지나 흰색까지 가므로 밝기 단계를 만들 때 알맞습니다. HSV의 값은 검정에서 순색까지만 가는데, 대부분의 색 선택기가 정사각형 그러데이션으로 보여 주는 것이 바로 이것입니다.
rgba나 여덟 자리 헥사에 들어 있는 알파 값은 받아들이지만 무시합니다. 변환 결과는 불투명한 색을 설명합니다. 특히 대비는 반투명한 색 뒤에 무엇이 있는지 모르면 계산할 수 없습니다.