- 색상 피커를 눌러 원하는 색을 직접 고르거나, HEX·RGB·HSL 칸 중 하나에 값을 입력합니다.
- 한 곳을 바꾸면 나머지 두 형식과 미리보기, 색상 피커가 모두 그 색으로 동기화됩니다.
- 예:
rgb(223, 67, 36)이나hsl(11, 74%, 51%)형식으로 입력해도 인식합니다. - 필요한 형식 옆 "복사" 버튼으로 코드를 클립보드에 담아 CSS나 디자인 툴에 붙여넣습니다.
웹에서 색을 지정하는 방법은 여러 가지지만 결국 같은 색을 다르게 적은 것입니다. 상황에 맞는 표기를 고르면 작업이 편해집니다.
- HEX: #df4324처럼 짧아 디자인 시안·CSS에 가장 널리 쓰입니다.
- RGB: 0~255 값이라 투명도를 더한 rgba()나 그래픽 코드에서 다루기 좋습니다.
- HSL: 색조·채도·명도가 분리돼, 같은 색 계열에서 밝기만 조절하기에 가장 직관적입니다.
이 도구는 한 곳만 바꿔도 세 형식이 동시에 갱신되므로, 시안은 HEX로 받고 코드엔 RGB·HSL로 바꿔 쓰는 식으로 활용할 수 있습니다. 코드의 의미는 색상 코드 읽는 법 가이드에 있습니다.
아래는 HEX 칸에 값을 넣었을 때 이 도구가 보여 주는 RGB·HSL 값입니다.
| HEX | RGB | HSL |
|---|---|---|
| #DF4324 | rgb(223, 67, 36) | hsl(10, 75%, 51%) |
| #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| #F3EEE3 | rgb(243, 238, 227) | hsl(41, 40%, 92%) |
| #1B1A1E | rgb(27, 26, 30) | hsl(255, 7%, 11%) |
| #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| #ABC (3자리) | rgb(170, 187, 204) | hsl(210, 25%, 73%) |
HSL은 정수로 반올림해 보여 주기 때문에 HEX만큼 촘촘하지 않습니다. 정수 HSL로 적을 수 있는 조합은 360 × 101 × 101 = 3,672,360가지인데 HEX는 16,777,216가지입니다. 그래서 #DF4324의 HSL인 hsl(10, 75%, 51%)를 HSL 칸에 다시 넣으면 #DF4324가 아니라 한 단계 옆의 #E04424가 됩니다. 무작위 색 2만 개로 확인해 보니 89.7%가 이런 식으로 원래 값과 달라졌고, 차이는 채널당 최대 4였습니다. 색을 정확히 전달해야 할 때는 HSL이 아니라 HEX나 RGB 값을 넘기세요.
명도(L)만 바꾸면 — hsl(10, 75%, L)
| L | HEX | RGB |
|---|---|---|
| 20% | #59190D | rgb(89, 25, 13) |
| 40% | #B33319 | rgb(179, 51, 25) |
| 51% | #E04424 | rgb(224, 68, 36) |
| 70% | #EC8C79 | rgb(236, 140, 121) |
| 90% | #F9D9D2 | rgb(249, 217, 210) |
색조(H)·채도(S)만 바꾸면 — 기준 hsl(10, 75%, 51%)
| 바꾼 값 | HSL | HEX |
|---|---|---|
| H + 30° (이웃한 색) | hsl(40, 75%, 51%) | #E0A124 |
| H + 120° | hsl(130, 75%, 51%) | #24E044 |
| H + 180° (보색) | hsl(190, 75%, 51%) | #24C1E0 |
| H + 240° | hsl(250, 75%, 51%) | #4424E0 |
| S를 0%로 | hsl(10, 0%, 51%) | #828282 |
| S를 100%로 | hsl(10, 100%, 51%) | #FF2F05 |
색조를 돌리면 RGB의 세 숫자 224·68·36이 자리만 바꿔 가며 다시 나타납니다. 120°를 돌린 #24E044와 240°를 돌린 #4424E0이 그 예입니다. 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 방식이라 표현할 수 있는 색 범위가 다릅니다. 특히 선명한 형광색 계열은 인쇄에서 탁해질 수 있습니다. 인쇄물이라면 최종본을 실제 인쇄로 한 번 확인하는 것이 안전합니다.