색상 코드 변환기
Color Code Converter & Palette
3자리(#4cf)·6자리 모두 가능하며 # 는 생략해도 됩니다.3-digit (#4cf) or 6-digit; the # is optional.
변환 결과
Result
#4C5FD5
명도 팔레트 (Shades & Tints)
Shades & Tints
유사색 (Analogous)
Analogous
색을 고르거나 HEX 코드를 입력해 주세요.
색상 코드 변환기란?
색상 코드 변환기는 색상 피커로 색을 고르거나 HEX 코드를 직접 입력하면, 같은 색을 HEX·RGB·HSL 세 가지 표기로 즉시 변환해 주는 도구입니다. 여기에 입력한 색을 기준으로 명도(Shades·Tints)와 유사색(Analogous) 팔레트까지 자동으로 만들어 줍니다. 웹·앱 디자인, CSS 작업, 배색 결정에 유용합니다.
표기법 차이
HEX — #RRGGBB 16진수 표기. 빨강·초록·파랑을 각각 00~FF(0~255)로 나타냅니다.
RGB — rgb(r, g, b), 각 채널 0~255.
HSL — hsl(h, s%, l%), 색상(Hue) 0~360°·채도(Saturation)·명도(Lightness). 색을 감각적으로 조정할 때 편리합니다. 세 표기 모두 같은 색을 다른 방식으로 나타냅니다.
팔레트 활용
- 명도(Shades·Tints) — 같은 색상·채도에서 명도(L)를 10%~90%로 바꾼 9단계. 어두운 그림자색부터 밝은 배경색까지 한 눈에 고릅니다.
- 유사색(Analogous) — 색상환에서 ±30°·±60° 인접한 색. 조화로운 배색을 만들 때 씁니다.
What is this converter?
The color code converter takes a color from the picker or a typed HEX code and instantly converts it to HEX, RGB and HSL. It also builds Shades & Tints and Analogous palettes from that color — handy for web/app design, CSS work and choosing color schemes.
Notation differences
HEX — #RRGGBB hexadecimal; red/green/blue each 00–FF (0–255).
RGB — rgb(r, g, b), each channel 0–255.
HSL — hsl(h, s%, l%), Hue 0–360°, Saturation, Lightness. All three describe the same color in different ways.
Using the palette
- Shades & Tints — 9 steps varying lightness (L) from 10% to 90% at the same hue and saturation.
- Analogous — neighboring hues at ±30° and ±60° on the color wheel for harmonious schemes.