- 색상 피커를 눌러 원하는 색을 직접 고르거나, HEX·RGB·HSL 칸 중 하나에 값을 입력합니다.
- 한 곳을 바꾸면 나머지 두 형식과 미리보기, 색상 피커가 모두 그 색으로 동기화됩니다.
- 예:
rgb(223, 67, 36)이나hsl(11, 74%, 51%)형식으로 입력해도 인식합니다. - 필요한 형식 옆 "복사" 버튼으로 코드를 클립보드에 담아 CSS나 디자인 툴에 붙여넣습니다.
웹에서 색을 지정하는 방법은 여러 가지지만 결국 같은 색을 다르게 적은 것입니다. 상황에 맞는 표기를 고르면 작업이 편해집니다.
- HEX: #df4324처럼 짧아 디자인 시안·CSS에 가장 널리 쓰입니다.
- RGB: 0~255 값이라 투명도를 더한 rgba()나 그래픽 코드에서 다루기 좋습니다.
- HSL: 색조·채도·명도가 분리돼, 같은 색 계열에서 밝기만 조절하기에 가장 직관적입니다.
이 도구는 한 곳만 바꿔도 세 형식이 동시에 갱신되므로, 시안은 HEX로 받고 코드엔 RGB·HSL로 바꿔 쓰는 식으로 활용할 수 있습니다. 코드의 의미는 색상 코드 읽는 법 가이드에 있습니다.
- HSL로 색을 직관적으로 조정: HEX·RGB는 미세 조정이 어렵지만 HSL은 색조(H)·채도(S)·명도(L)가 분리돼 있어, 같은 색조에서 더 밝거나 연한 변형을 만들기 쉽습니다. 명도(L)만 낮추면 같은 계열의 어두운 색을 바로 얻을 수 있습니다.
- 디자인 토큰·변수 만들기: 추출한 HSL 값을 기준으로 명도를 10%씩 조절하면 버튼의 기본·호버·비활성 상태 색 세트를 체계적으로 구성할 수 있습니다. CSS 변수로 정리해 두면 유지보수가 편합니다.
- 형식 변환이 필요할 때: 디자인 시안은 HEX, 일부 라이브러리나 그래픽 코드는 RGB를 요구하는 경우가 많습니다. 한 번 입력으로 세 형식을 모두 얻어 어디에든 맞춰 붙여넣을 수 있습니다.
Hue(색조 0~360°), Saturation(채도 0~100%), Lightness(명도 0~100%)로 색을 표현하는 방식입니다. 사람이 색을 인지하는 방식에 가까워, 색조는 유지하면서 밝기나 선명도만 바꾸기에 RGB보다 직관적입니다.
이 도구는 색상 피커 UI와 HSL 형식까지 포함한 종합 변환기입니다. HEX·RGB 양방향만 필요하면 더 단순한 'HEX ↔ RGB 변환' 도구를, 색을 시각적으로 고르고 HSL로 미세 조정까지 하려면 이 도구를 사용하세요.
인식할 수 없는 형식이면 미리보기와 다른 칸이 갱신되지 않습니다. HEX는 3자리(#abc)·6자리(#aabbcc)를 모두 받고, RGB·HSL은 숫자만 정확히 넣으면 나머지 형식으로 자동 변환됩니다.
HSL의 색조(H)를 180° 돌리면 보색, 30~60°씩 옮기면 비슷한 계열의 조화로운 색을 얻을 수 있습니다. 여러 색을 한 번에 뽑아 배색을 구성하려면 컬러 팔레트 생성기를, 한 색의 명암 단계가 필요하면 색상 명암 생성기를 함께 쓰면 편합니다.
화면은 빛을 더하는 RGB 방식이고 인쇄는 잉크를 섞는 CMYK 방식이라 표현할 수 있는 색 범위가 다릅니다. 특히 선명한 형광색 계열은 인쇄에서 탁해질 수 있습니다. 인쇄물이라면 최종본을 실제 인쇄로 한 번 확인하는 것이 안전합니다.