Color Converter

Q: What is the difference between HEX, RGB, and HSL?

HEX packs each channel into two hex digits (#RRGGBB). RGB lists the same three channels as decimal values from 0 to 255. HSL describes a color with hue (0-360 degrees on the color wheel), saturation, and lightness as percentages. All three describe the same sRGB color, just in different coordinate systems.

Q: What does the 8-digit HEX code include?

An 8-digit HEX such as #RRGGBBAA adds an alpha channel as the final two hex digits, where FF is fully opaque and 00 is fully transparent. It is supported in CSS Color 4 and lets you encode opacity without a separate opacity property.

Convert between HEX, RGB, and HSL color codes with live preview.

Pick a Color

RGB

HSL

Preview

📖 How to Use

Select a Color

Use the color picker or enter a HEX code directly (e.g. #4f46e5).

View Converted Values

RGB and HSL values are automatically calculated and displayed.

Copy or Randomize

Click on any field to copy its value. Click 🎲 Random Color to generate a random color.

💡 Tip: HEX is the most common color format in web design, while RGB and HSL are frequently used in CSS for dynamic color manipulation.

About the Color Converter

A color on the web is ultimately a mix of red, green, and blue light on an emissive screen — an additive RGB model where full intensity of all three channels yields white. CSS exposes three interchangeable notations for this sRGB color space: HEX, RGB, and HSL. This converter lets you type or pick any color and see its representation in all three, so a value from a design tool can be pasted straight into a stylesheet.

How it works

HEX writes each of the three channels as two hexadecimal digits: #RRGGBB, each pair ranging from 00 (0) to FF (255). CSS Color 4 also allows an 8-digit form, #RRGGBBAA, whose last pair encodes alpha — FF opaque, 00 transparent. RGB spells the channels as decimal triplets, rgb(r, g, b), again 0–255. HSL takes a different angle: hsl(h, s%, l%) uses hue as an angle from 0–360° around the color wheel (0 red, 120 green, 240 blue), with saturation and lightness as percentages.

Conversions are pure arithmetic. To go HEX→RGB, split the string into three pairs and read each as a base-16 number. To go RGB→HSL, normalize each channel to 0–1, derive lightness from the max and min, then saturation from the spread, and finally the hue from which channel peaks. Two caveats: monitors vary, so identical numbers render slightly differently across hardware (gamma and color management apply); and if you use the alpha channel, keep the background in mind — alpha blends against whatever sits behind the element.

Common use cases

Translating a designer's HEX token into hsl() to derive hover and disabled states
Reading an rgb() value from devtools and pasting it into a CSS variable
Picking a brand accent and grabbing the 8-digit #RRGGBBAA form for a translucent overlay
Tuning HSL lightness for predictable, accessible contrast ratios

Worked example

Take the indigo #4f46e5. Split into pairs 4f, 46, e5 and convert each from base 16:

4f=79  46=70  e5=229
#4f46e5 = rgb(79,70,229)

Applying the HSL formulas gives:

#4f46e5 = hsl(244,76%,59%)

The same color, three notations — identical pixel, different ergonomics.

Frequently asked questions

What is the difference between HEX, RGB, and HSL?

HEX packs each channel into two hex digits (#RRGGBB). RGB lists the same three channels as decimal values from 0 to 255. HSL describes a color with hue (0–360 degrees on the color wheel), saturation, and lightness as percentages. All three describe the same sRGB color, just in different coordinate systems.

What does the 8-digit HEX code include?

An 8-digit HEX such as #RRGGBBAA adds an alpha channel as the final two hex digits, where FF is fully opaque and 00 is fully transparent. It is supported in CSS Color 4 and lets you encode opacity without a separate opacity property.

How do I convert HEX to RGB?

Split the 6-digit HEX into three pairs and read each pair as a base-16 number. For #4f46e5 the pairs are 4f, 46, and e5, which equal 79, 70, and 229, giving rgb(79, 70, 229).

Is HSL better than RGB for adjusting colors?

Yes, for human adjustments. HSL separates the perceived hue from saturation and lightness, so you can darken or desaturate a color predictably. RGB forces you to balance three correlated channels, which is harder to reason about.

Are the converted colors sent to a server?

No. All conversions run in your browser through plain JavaScript arithmetic on the channel values. Nothing is uploaded, so the tool is safe to use with brand palettes and proprietary design tokens.

색상 변환기란?

웹에서 하나의 색은 결국 빛을 내는 화면에서 빨강·초록·파랑 빛을 섞어 만든 결과입니다 — 세 채널 모두 최대 강도일 때 흰색이 되는 가산 혼합(additive) RGB 모델입니다. 디자이너가 이 날것의 숫자를 매번 다루긴 어렵기 때문에, CSS는 동일한 sRGB 색영역을 세 가지 상호 교환 가능한 표기법으로 노출합니다. 바로 HEX, RGB, HSL입니다. 이 변환기는 색을 고르거나 입력하면 세 표기법 모두로 즉시 보여 주어, Figma 인스펙터에서 읽은 값을 스타일시트에 그대로 붙여넣거나 그 반대 작업을 할 수 있게 해 줍니다.

작동 방식

HEX는 세 채널 각각을 16진수 두 자리로 표기합니다. #RRGGBB에서 각 쌍은 00(0)부터 FF(255)까지입니다. CSS Color 4는 8자리 형태인 #RRGGBBAA도 허용하며, 마지막 쌍이 알파(불투명도)를 같은 방식으로 인코딩합니다 — FF는 완전히 불투명, 00은 완전히 투명입니다. RGB는 채널을 십진수 세 쌍으로 풀어 씁니다. rgb(r, g, b)에서도 각 값은 0–255 범위입니다. HSL은 다른 접근을 씁니다. hsl(h, s%, l%)은 색상(hue)을 색상환을 도는 각도(0–360°, 0은 빨강, 120은 초록, 240은 파랑)로, 채도(saturation)와 명도(lightness)는 백분율로 표현합니다.

변환은 순수 산술입니다. HEX→RGB로 가려면 문자열을 세 쌍으로 나눠 각각을 16진수로 읽습니다. RGB→HSL로 가려면 각 채널을 0–1로 정규화한 뒤 최댓값과 최솟값으로 명도를 구하고, 그 차이로 채도를 도출한 다음 어느 채널이 정점인지로 색상(hue)을 구합니다. 두 가지 실무적 주의점이 있습니다. 모니터마다 달라서 같은 숫자라도 하드웨어에 따라 약간씩 다르게 렌더링됩니다(감마와 색 관리가 적용됨). 그리고 알파 채널을 함께 쓸 때는 요소 뒤에 놓인 것까지 함께 고려해야 합니다 — 알파는 배경과 혼합되기 때문입니다.

자주 쓰는 경우

디자이너의 HEX 토큰을 hsl()로 옮겨 hover·비활성 상태를 도출하기
DevTools에서 rgb() 값을 읽어 Sass나 CSS 변수에 붙여넣기
브랜드 강조색을 고르고 반투명 오버레이용 8자리 #RRGGBBAA 형태 가져오기
HSL 명도를 조정해 예측 가능한 명암비로 접근성 팔레트 만들기

사용 예

인디고색 #4f46e5를 예로 들면, 4f, 46, e5 쌍으로 나눠 각각을 16진수에서 변환합니다:

0x4f = 79
0x46 = 70
0xe5 = 229
#4f46e5  =  rgb(79, 70, 229)

이 채널들을 정규화하고 HSL 공식을 적용하면:

#4f46e5  =  hsl(244, 76%, 59%)

같은 색, 세 가지 표기법 — 화면 픽셀은 동일하지만 코드를 읽는 사람에게는 다른 사용성을 줍니다.

자주 묻는 질문

HEX, RGB, HSL의 차이는?

HEX는 각 채널을 16진수 두 자리로 압축합니다(#RRGGBB). RGB는 같은 세 채널을 0~255의 십진수로 나열합니다. HSL은 색을 색상환 위의 각도인 색상(hue, 0~360도)과 채도, 명도(백분율)로 표현합니다. 셋 모두 동일한 sRGB 색을 단지 다른 좌표계로 서술할 뿐입니다.

8자리 HEX 코드는 무엇을 포함하나요?

#RRGGBBAA 같은 8자리 HEX는 마지막 16진수 두 자리에 알파 채널을 추가합니다. FF는 완전 불투명, 00은 완전 투명입니다. CSS Color 4에서 지원되며, 별도의 opacity 속성 없이 불투명도를 인코딩할 수 있습니다.

HEX를 RGB로 어떻게 변환하나요?

6자리 HEX를 세 쌍으로 나누고 각 쌍을 16진수로 읽습니다. #4f46e5의 쌍은 4f, 46, e5이며, 이는 각각 79, 70, 229가 되어 rgb(79, 70, 229)가 됩니다.

색 조정에 HSL이 RGB보다 나은가요?

사람이 직접 조정할 때는 그렇습니다. HSL은 지각되는 색상(hue)을 채도·명도와 분리하므로 색을 예측 가능하게 어둡게 하거나 채도를 낮출 수 있습니다. RGB는 서로 상관된 세 채널의 균형을 맞춰야 해서 다루기가 더 어렵습니다.

변환된 색이 서버로 전송되나요?

아닙니다. 모든 변환은 브라우저에서 채널 값에 대한 순수 JavaScript 산술로 이루어집니다. 업로드되는 것은 없으므로 브랜드 팔레트나 사내 디자인 토큰과 함께 써도 안전합니다.