Formaty Kolorów Wyjaśnione: HEX, RGB i HSL
Quick Answer
HEX (#RRGGBB) i RGB (0–255 na kanał) bezpośrednio kodują intensywności czerwonego, zielonego i niebieskiego. HSL (odcień 0–360°, nasycenie/jasność 0–100%) koduje kolor w sposób zgodny z ludzką percepcją. Konwertuj między wszystkimi trzema używając naszego Color Converter.
Introduction
Kolory web są określane w trzech dominujących formatach: HEX (base-16 czerwony, zielony, niebieski), RGB (dziesiętnie 0–255 na kanał) i HSL (odcień, nasycenie, jasność). Wszystkie trzy opisują tę samą przestrzeń kolorów sRGB ale ujawniają różne osie: HEX i RGB są zorientowane na sprzęt, podczas gdy HSL jest zorientowany na człowieka. Nowoczesny CSS obsługuje też alpha przez HEX8, rgba() i 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.