Định dạng Màu được Giải thích: HEX, RGB và HSL
Quick Answer
HEX (#RRGGBB) và RGB (0–255 mỗi kênh) mã hóa trực tiếp cường độ đỏ, lục và lam. HSL (sắc độ 0–360°, bão hòa/độ sáng 0–100%) mã hóa màu theo cách phù hợp nhận thức con người. Chuyển đổi giữa cả ba bằng Color Converter của chúng tôi.
Introduction
Màu web được chỉ định trong ba định dạng chủ đạo: HEX (base-16 đỏ, lục, lam), RGB (thập phân 0–255 mỗi kênh) và HSL (sắc độ, bão hòa, độ sáng). Cả ba đều mô tả cùng một không gian màu sRGB nhưng lộ các trục khác nhau: HEX và RGB hướng phần cứng, trong khi HSL hướng con người. CSS hiện đại cũng hỗ trợ alpha qua HEX8, rgba() và hsla().
Step by Step
-
Understand HEX notation
HEX writes each channel as a two-digit base-16 number: #RRGGBB. 00 is off, FF (255) is full intensity. #FF0000 is pure red, #00FF00 pure green, #0000FF pure blue, #FFFFFF white, #000000 black. A 4-digit shorthand #RGB expands to #RRGGBB, and #RRGGBBAA adds alpha (e.g. #FF573380 is 50% alpha).
-
Understand RGB notation
RGB uses decimal 0—55 per channel: rgb(255, 87, 51) is the same as #FF5733. The rgba() function adds a 0— alpha: rgba(255, 87, 51, 0.5) is 50% opaque. RGB is equivalent to HEX —it is just decimal instead of base-16.
-
Understand HSL notation
HSL uses hue (0—60° on the color wheel: 0=red, 120=green, 240=blue), saturation (0% = gray, 100% = full color), and lightness (0% = black, 50% = normal, 100% = white). hsl(11, 100%, 60%) is a vivid orange. HSL makes it trivial to build tints (raise lightness) and shades (lower lightness) of the same hue.
-
Convert between formats
HEX→RGB: parse each pair as base-16. RGB→HEX: convert each channel to 2-digit base-16. RGB→HSL: compute max/min of normalized channels, lightness = (max+min)/2, saturation depends on lightness, hue is the angle of the dominant channel. Use our Color Converter to do all of this instantly.
-
Choose the right format for the task
Use HEX for compactness in design tokens and assets. Use RGB/rgba() when you need to interpolate or animate channels. Use HSL/HSLA when generating palettes, shades, or theme variations —adjusting lightness by 10% is far easier than reasoning about RGB deltas.
Examples
Pure red in all three formats
Input: #FF0000
Output: rgb(255, 0, 0) = hsl(0, 100%, 50%)
A vivid orange
Input: #FF5733
Output: rgb(255, 87, 51) = hsl(11, 100%, 60%)
White and black
Input: #FFFFFF and #000000
Output: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
Building a 5-step shade from one HSL hue
Input: hsl(210, 70%, 50%) —vary lightness 30/40/50/60/70%
Output: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8 —a coherent blue palette
Common Problems
- Mixing 3-digit and 6-digit HEX: #F00 and #FF0000 are the same color, but some parsers only accept one form. Normalize to 6-digit in code to avoid surprises.
- Forgetting that HSL lightness 50% is not 'half brightness': at 100% saturation, 50% lightness is the pure hue; above 50% it tints toward white, below 50% it shades toward black. '50% gray' is hsl(0, 0%, 50%).
- Alpha channel confusion: #RRGGBBAA (HEX8) is supported in modern browsers but not in older ones; rgba()/hsla() has wider support. Always test the target environment.
- Color-space mismatch: HEX, RGB, and HSL all describe sRGB. If you convert to/from P3 or Lab/OKLCH (used by modern displays), a naive channel copy produces wrong colors —use a proper color library.
Tips
- Use HSL when designing a palette: pick one hue, then vary lightness (e.g. 30/50/70%) and saturation (e.g. 60/80/100%) to generate coherent shades and tints.
- For accessibility, check contrast ratio against the background —WCAG AA requires 4.5:1 for normal text, AAA 7:1. Use our Color Converter to compute relative luminance and contrast.
- Prefer modern CSS color-mix() or oklch() for perceptually uniform interpolation —RGB interpolation can pass through muddy grays when mixing complementary colors.
- When generating gradients, convert endpoints to the same format first —mixing HEX and HSL in a single gradient declaration can produce unexpected midpoints.