Hex, RGB and HSL for any color.
HEX = #RRGGBB | RGB→HSL: L=(Cmax+Cmin)/2, S=Δ/(1−|2L−1|), H=60°×f(R',G',B') | RGB→HSV: V=Cmax, S=Δ/Cmax
The core conversions link three major color models. All formulas below assume:
HEX is simply the two-digit hexadecimal representation of each 8-bit channel (0–255):
HEX = #RRGGBB where RR = hex(R), GG = hex(G), BB = hex(B)
R' = R/255, G' = G/255, B' = B/255
Cmax = max(R', G', B'), Cmin = min(R', G', B'), Δ = Cmax − Cmin
L = (Cmax + Cmin) / 2
S = 0 if Δ = 0
S = Δ / (1 − |2L − 1|) if Δ ≠ 0
H = 60° × [(G'−B')/Δ mod 6] if Cmax = R'
H = 60° × [(B'−R')/Δ + 2] if Cmax = G'
H = 60° × [(R'−G')/Δ + 4] if Cmax = B'
H = 0 if Δ = 0
V = Cmax
S = 0 if Cmax = 0
S = Δ / Cmax if Cmax ≠ 0
(H same formula as RGB → HSL)
Step 1 – HEX to RGB: R = 0x3A = 58, G = 0x86 = 134, B = 0xFF = 255 Step 2 – Normalize: R' = 58/255 ≈ 0.2275 G' = 134/255 ≈ 0.5255 B' = 255/255 = 1.0000 Step 3 – Find Cmax, Cmin, Δ: Cmax = 1.0000 (B'), Cmin = 0.2275 (R'), Δ = 0.7725 Step 4 – Lightness (L): L = (1.0000 + 0.2275) / 2 = 0.6138 → 61.4% Step 5 – Saturation (S): |2L − 1| = |2×0.6138 − 1| = 0.2275 S = 0.7725 / (1 − 0.2275) = 0.7725 / 0.7725 = 1.0000 → 100% Step 6 – Hue (H), Cmax = B': H = 60° × [(R'−G')/Δ + 4] H = 60° × [(0.2275 − 0.5255)/0.7725 + 4] H = 60° × [−0.3857 + 4] H = 60° × 3.6143 ≈ 216.9° → 217° Step 7 – HSV: V = Cmax = 1.0000 → 100% S_HSV = Δ / Cmax = 0.7725 / 1.0000 = 0.7725 → 77%
Result: HEX: #3A86FF RGB: rgb(58, 134, 255) HSL: hsl(217°, 100%, 61%) HSV: hsv(217°, 77%, 100%)
The color #3A86FF is a bright, saturated cornflower blue. Its HSL representation — hsl(217, 100%, 61%) — tells you it sits at hue 217° (solidly in the blue range), has maximum saturation (100%), and is slightly brighter than mid-tone at 61% lightness. Its HSV representation — hsv(217°, 77%, 100%) — shows the color reaches maximum brightness (V=100%) but the saturation is 77% rather than 100% because HSV measures how much white is mixed in relative to the peak brightness, which differs from HSL's definition.
Different industries and applications describe color in ways that are most intuitive or technically convenient for their use case:
A HEX color is a 6-character string prefixed with #. Each pair of characters is a base-16 (hexadecimal) number from 00 (0 decimal) to FF (255 decimal), representing the intensity of Red, Green, and Blue respectively. For example:
#FF0000 = pure red (R=255, G=0, B=0)#000000 = black#FFFFFF = white#RGB (3 characters) is valid in CSS when each pair is a repeated digit: #3AF expands to #33AAFF.Both models use hue and saturation, but they differ in the third channel:
This means the same pure red (#FF0000) is HSL(0°, 100%, 50%) but HSV(0°, 100%, 100%).
Not all HEX colors display identically on every screen due to color gamut differences (sRGB vs. Display P3 vs. Adobe RGB). For most web use cases, sRGB (the default) covers all standard HEX codes. Web-safe colors — a legacy 216-color subset using only 00, 33, 66, 99, CC, FF per channel — are no longer a practical concern on modern displays but still appear in some style guides.
Convert each channel (R, G, B) from decimal to hexadecimal separately, then concatenate them. For example: R=58 → 3A, G=134 → 86, B=255 → FF, giving #3A86FF. You can divide by 16 for the first digit and take the remainder for the second, using A–F for values 10–15.
Hue in degrees maps as follows: 0°/360° = Red, 30° = Orange, 60° = Yellow, 120° = Green, 180° = Cyan, 240° = Blue, 270° = Violet, 300° = Magenta. This applies to both HSL and HSV models.
With 3 channels each having 256 possible values (00–FF), there are 256³ = 16,777,216 possible HEX colors. This is commonly referred to as '16 million colors' and represents the full 24-bit color depth of standard RGB monitors.
HSV and HSB are identical — 'Value' and 'Brightness' are two names for the same channel. Adobe Photoshop uses HSB; most programming libraries and color theory texts use HSV. The formulas and numeric results are the same.
Convert the color to HSL, then add 180° to the hue (wrapping around at 360° if needed). Keep the same saturation and lightness. For example, the complement of hsl(217°, 100%, 61%) is hsl(37°, 100%, 61%) — a warm amber/orange.
HEX and RGB represent the same color data in different notations. RGB uses three decimal integers — e.g., rgb(58, 134, 255) — while HEX encodes each channel as a two-digit base-16 number — e.g., #3A86FF. They are mathematically equivalent and convert directly to each other.
Yes. Modern CSS fully supports HSL syntax: `color: hsl(217, 100%, 61%);`. You can also use HSLA for transparency: `color: hsla(217, 100%, 61%, 0.8);`. HSL is often preferred in CSS for theming because it's easy to adjust lightness or saturation programmatically.
The alpha channel controls opacity. It ranges from 0 (fully transparent, invisible) to 1 (fully opaque). For example, `rgba(58, 134, 255, 0.5)` is the same blue at 50% transparency, which lets background content show through.
Screens use additive RGB color (light is emitted), while printers use subtractive CMYK (ink absorbs light). Vivid RGB colors — especially electric blues and greens — often cannot be reproduced exactly in CMYK print, resulting in a color shift. For print work, always verify your CMYK values.
No. HEX color codes are case-insensitive. `#3a86ff`, `#3A86FF`, and `#3A86ff` all refer to the same color. Most style guides recommend uppercase for consistency in codebases.
A color picker lets designers and developers identify exact color codes for use in CSS, HTML, SVG, and design tools. It ensures brand color consistency, helps match colors from images or mockups, and allows exploration of color palettes before committing to a design.
Only sources that have been reviewed are shown. Unverified citations are never published.