칼큐 도구 이름·키워드 검색

색상 코드 변환기

Color Code Converter & Palette

3자리(#4cf)·6자리 모두 가능하며 # 는 생략해도 됩니다.3-digit (#4cf) or 6-digit; the # is optional.

변환 결과

Result

#4C5FD5

HEX#4c5fd5
RGBrgb(76, 95, 213)
HSLhsl(232, 62%, 57%)

명도 팔레트 (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° 인접한 색. 조화로운 배색을 만들 때 씁니다.
각 스와치나 값을 클릭하면 HEX 코드가 클립보드로 복사됩니다.
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.

자주 묻는 질문

HEX·RGB·HSL은 어떻게 다른가요?
HEX는 #RRGGBB 형식의 16진수 표기, RGB는 빨강·초록·파랑을 0~255로 나타낸 표기, HSL은 색상(Hue 0~360°)·채도(Saturation)·명도(Lightness)로 나타낸 표기입니다. 셋 다 같은 색을 다른 방식으로 표현하며, 본 도구가 상호 변환해 줍니다.
팔레트는 어떻게 활용하나요?
입력한 색을 기준으로 명도(Shades·Tints) 9단계와 유사색(Analogous) 스와치를 생성합니다. 버튼·배경·강조색 등 UI 색 조합을 잡거나 디자인 배색을 정할 때 참고하면 편리합니다. 각 스와치를 클릭하면 HEX 코드가 복사됩니다.
3자리 HEX 코드(#4cf)도 되나요?
네. #4cf 처럼 3자리 축약형을 입력하면 각 자리를 두 번 반복해 #44ccff 로 자동 확장한 뒤 변환합니다. # 기호는 생략해도 됩니다.
디자인·CSS에 바로 쓸 수 있나요?
결과의 HEX·RGB·HSL 값은 CSS color 속성에 그대로 붙여 넣을 수 있는 형식(#4c5fd5, rgb(76, 95, 213), hsl(232, 62%, 57%))으로 표시됩니다. 값이나 스와치를 클릭하면 클립보드로 복사됩니다.
입력한 색상 정보가 저장되나요?
모든 변환은 브라우저 안에서만 이루어지며 입력한 색상 값은 서버로 전송되거나 저장되지 않습니다. 회원가입 없이 무료로 사용할 수 있습니다.

FAQ

How do HEX, RGB and HSL differ?
HEX is #RRGGBB hexadecimal, RGB expresses red/green/blue as 0–255, and HSL uses Hue (0–360°), Saturation and Lightness. All three describe the same color in different ways, and this tool converts between them.
How do I use the palette?
From your color it generates 9 Shades & Tints and Analogous swatches. Use them to build UI color sets — buttons, backgrounds, accents — or design schemes. Click any swatch to copy its HEX code.
Does a 3-digit HEX (#4cf) work?
Yes. A 3-digit shorthand like #4cf is expanded by doubling each digit to #44ccff before converting. The # is optional.
Can I use it directly in CSS?
The HEX, RGB and HSL results are shown in ready-to-paste CSS forms (#4c5fd5, rgb(76, 95, 213), hsl(232, 62%, 57%)). Click a value or swatch to copy it to your clipboard.
Is my color data stored?
All conversions run entirely in your browser; the color values you enter are never sent to a server or stored. It is free with no sign-up.

함께 보면 좋은 계산기

Related calculators

길이 변환 m·cm·inch·mile 등 길이 단위를 변환 이용가능 온도 변환 섭씨·화씨·켈빈을 상호 변환 이용가능 돌림판·주사위·동전 돌림판 룰렛·주사위·동전으로 무작위 결정 이용가능

참고: 화면에 표시되는 색은 모니터·기기·색 프로파일에 따라 실제 인쇄·출력 색과 다르게 보일 수 있습니다. 정밀한 색 관리가 필요한 인쇄물은 CMYK·전용 색상 시스템(Pantone 등)을 별도로 확인하세요.

Note: On-screen colors may differ from printed output depending on your monitor, device and color profile. For print work needing precise color, verify CMYK or a dedicated color system (e.g. Pantone) separately.