이게 뭔가요?

같은 색이라도 CSS에서는 #5b8a72(HEX), rgb(91, 138, 114)(RGB), hsl(149, 21%, 45%)(HSL) 등 여러 표기로 쓸 수 있습니다. 이 도구는 어느 형식으로 입력하든 나머지 형식으로 즉시 변환해 주고, 색상 견본과 색상 선택기(color picker)도 함께 제공합니다. 각 결과는 클릭 한 번으로 복사할 수 있습니다.

언제 쓰나요?

디자인 시안은 HEX로 오는데 코드에서는 투명도를 주려고 RGB(A)가 필요할 때, 또는 색을 조금 더 밝거나 진하게 조정하고 싶어 HSL의 명도·채도를 만지고 싶을 때 씁니다. 디자이너와 개발자가 서로 다른 표기를 쓸 때 다리 역할도 합니다.

실무에서 자주 틀리는 점

HSL을 RGB처럼 다루기. HSL의 두 번째·세 번째 값은 **퍼센트(%)**입니다. hsl(149, 21, 45)처럼 % 를 빼면 브라우저가 무시하거나 다르게 해석합니다.
3자리 HEX 오해. #abc 는 #aabbcc 의 축약형입니다. 각 자리를 두 번 반복한다는 걸 모르면 색이 어긋나 보입니다.
투명도. HEX로 알파를 주려면 #RRGGBBAA 8자리를 써야 하는데 지원이 제각각이라, 투명도가 필요하면 rgba()/hsla()가 안전합니다.
명도와 밝기 혼동. HSL의 L(명도)은 0%가 검정, 100%가 흰색입니다. 채도만 올린다고 색이 밝아지지 않습니다.

실무에서 — 디자이너가 준 시안은 전부 HEX인데, 오버레이에 40% 투명도를 줘야 해서 rgba()로 바꿔야 했던 적이 있다. 매번 손으로 계산하기 번거로워 변환기를 옆에 띄워놓고 작업했다. 한번은 hsl(210, 50, 50)처럼 %를 빼먹고 넣었다가 색이 안 먹어서, HSL의 2·3번째 값은 반드시 %라는 걸 몸으로 배웠다.