이게 뭔가요?

같은 색이라도 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()가 필요합니다. #1E40AF라면 rgba(30, 64, 175, 0.4)처럼 세 자리를 10진수로 바꿔야 하므로 변환기를 옆에 두면 편합니다. HSL의 채도·명도는 hsl(210, 50%, 50%)처럼 %를 붙이는 표기가 안전합니다. 쉼표 구분 구문에서 %를 빼면 무효한 값으로 처리됩니다.