도구 가이드
같은 색이라도 표기 방식은 여러 가지입니다. HEX는 #3B82F6처럼 16진수로 적어 CSS에서 가장 흔히 쓰이고, RGB는 빨강·초록·파랑의 세기를 0~255로 나타내며, HSL은 색상·채도·명도로 표현해 사람이 직관적으로 조정하기 좋습니다.
디자인 도구는 HEX를 주로 내보내지만 투명도를 다루려면 RGB가 필요하고, 같은 색의 밝기만 조금 바꾸려면 HSL이 훨씬 편합니다. 그래서 실무에서는 세 표기를 오가며 작업하게 됩니다.
이 도구는 세 형식을 상호 변환하고 결과 색을 미리보기로 보여 줍니다. 변환은 브라우저 안에서 즉시 이루어집니다.
사용 방법
- 변환할 색상 코드를 입력합니다. HEX·RGB·HSL 중 어느 형식이든 됩니다.
- 나머지 형식으로 변환된 값을 확인합니다.
- 미리보기로 의도한 색이 맞는지 봅니다.
- 필요한 형식의 코드를 복사합니다.
이럴 때 유용해요
- 디자인 시안의 HEX 코드를 CSS의 rgba로 바꿔 투명도를 줄 때
- HSL로 바꿔 같은 색상의 밝기 단계를 만들 때
- 디자인 도구와 코드 사이에서 색값을 옮길 때
- 브랜드 색상 코드를 여러 형식으로 문서화할 때
사용 팁
- HSL에서 명도만 조절하면 같은 계열의 밝고 어두운 톤을 손쉽게 만들 수 있습니다.
- 3자리 HEX(#F00)는 6자리(#FF0000)의 축약형입니다. 각 자리를 두 번 반복한 것과 같습니다.
- 투명도가 필요하면 rgba나 8자리 HEX를 사용하세요. 6자리 HEX에는 투명도를 담을 수 없습니다.