🎨 색상 변환기

색상 변환기란?

같은 색을 HEX, RGB, HSL 세 가지 표기법으로 바꿔 보여주는 도구입니다. 세 형식은 모두 화면에 뜨는 동일한 색을 가리키지만, 색을 설명하는 방식이 서로 달라 상황에 따라 쓰기 편한 쪽이 갈립니다. 디자인 시안에서 받은 HEX 코드를 CSS의 투명도 조절이 가능한 형태로 바꾸거나, 색을 조금 더 밝게 조정하고 싶을 때 이 도구를 사용합니다.

사용 방법

1. 알고 있는 형식의 입력창에 값을 넣습니다. HEX는 #을 붙여도, 빼도 인식됩니다.
2. 나머지 두 형식이 자동으로 함께 바뀝니다.
3. 위쪽 미리보기 영역에서 실제 색을 확인합니다.
4. 복사 버튼으로 필요한 형식만 클립보드에 담아 갑니다.

세 가지 표기법의 차이

• HEX (#RRGGBB) — 빨강·초록·파랑의 세기를 각각 00~FF(0~255)의 16진수로 적습니다. 짧고 오타가 잘 안 나서 디자인 도구와 CSS에서 가장 널리 쓰입니다. 다만 #3A7BD5만 보고 어떤 색인지 떠올리기는 어렵습니다.
• RGB (0~255) — 같은 정보를 10진수로 적은 것입니다. 계산이나 코드에서 값을 다룰 때 편합니다. rgba() 형태로 쓰면 마지막에 투명도를 넣을 수 있습니다.
• HSL — 색조(0~360°), 채도(0~100%), 명도(0~100%)로 나눠 적습니다. 사람이 색을 인식하는 방식에 가장 가깝습니다.

HSL이 실무에서 유용한 이유

버튼의 기본색과 마우스를 올렸을 때의 색을 만든다고 해봅시다. HEX로는 #3A7BD5를 얼마나 어떻게 바꿔야 '조금 어두운 같은 계열'이 되는지 감이 오지 않습니다. HSL이라면 명도만 10% 낮추면 끝입니다. 색조와 채도는 그대로 두었으니 같은 색 계열이 유지되는 것이 보장됩니다.

같은 원리로 하나의 색조를 기준 삼아 명도만 단계별로 바꾸면 일관된 색상 팔레트가 만들어집니다. 디자인 시스템에서 primary-100부터 primary-900까지 이름 붙이는 방식이 대개 이 방법입니다.

색 대비와 접근성

색을 고를 때 놓치기 쉬운 것이 배경과 글자의 명도 차이입니다. 웹 접근성 지침(WCAG)은 본문 글자에 최소 4.5:1의 대비를 권고합니다. 회색 배경에 연한 회색 글자처럼 보기에 세련된 조합이 실제로는 읽기 어려운 경우가 많습니다. HSL의 명도 값을 비교하면 두 색이 얼마나 떨어져 있는지 대략 가늠할 수 있습니다.

자주 묻는 질문

Q. #FFF처럼 세 자리 HEX는 무엇인가요?
각 자리를 두 번 반복한 축약형입니다. #FFF는 #FFFFFF, #3A7은 #33AA77과 같습니다.

Q. HEX 뒤에 두 자리가 더 붙은 건 뭔가요?
8자리 HEX는 마지막 두 자리가 투명도(알파)입니다. #3A7BD580은 약 50% 투명한 같은 색입니다.

Q. 화면에서 본 색과 인쇄한 색이 다릅니다.
화면은 빛을 더하는 RGB 방식이고 인쇄는 잉크를 겹치는 CMYK 방식이라 표현 가능한 색 범위가 다릅니다. 형광에 가까운 밝은 색은 인쇄에서 재현되지 않습니다.

What is the Color Converter?

This tool expresses one color in three notations — HEX, RGB and HSL. All three describe the identical on-screen color, but they describe it differently, so each suits different tasks. Use it to turn a HEX code from a design file into a form that supports transparency, or to nudge a color lighter or darker.

How to Use

1. Enter a value in whichever format you have. HEX works with or without the #.
2. The other two update automatically.
3. Check the actual color in the preview area above.
4. Use the copy button to grab just the format you need.

How the Three Notations Differ

• HEX (#RRGGBB) — red, green and blue intensities as hex pairs from 00 to FF. Short and typo-resistant, which is why design tools and CSS default to it. The downside: #3A7BD5 tells you nothing about what the color looks like.
• RGB (0–255) — the same information in decimal, easier to manipulate in code. The rgba() form adds an alpha channel.
• HSL — hue (0–360°), saturation (0–100%) and lightness (0–100%). The closest match to how people actually think about color.

Why HSL Is Useful in Practice

Say you need a button color and a slightly darker hover state. In HEX there's no obvious way to know how to adjust #3A7BD5 to stay in the same family. In HSL you just drop lightness by 10%. Hue and saturation are untouched, so the family is preserved by construction.

The same trick, applied in steps, produces a consistent palette — which is exactly how design systems generate scales named primary-100 through primary-900.

Contrast and Accessibility

An easy thing to overlook is the lightness gap between text and background. WCAG recommends a minimum contrast ratio of 4.5:1 for body text. Combinations that look refined — pale grey on grey — are often genuinely hard to read. Comparing HSL lightness values gives you a quick sense of how far apart two colors sit.

FAQ

Q. What is a three-digit HEX like #FFF?
A shorthand where each digit is doubled. #FFF equals #FFFFFF, and #3A7 equals #33AA77.

Q. What are the extra two digits on some HEX codes?
An eight-digit HEX carries alpha in the final pair. #3A7BD580 is the same color at roughly 50% opacity.

Q. Why does print look different from my screen?
Screens add light (RGB) while print layers ink (CMYK), so the reproducible ranges differ. Very bright, near-fluorescent colors simply can't be printed.