Color Code Converter

RGB to Hex Conversion

An RGB color consists of three channels — Red, Green, Blue — each ranging from 0 to 255. To convert to hexadecimal notation, each channel is written as a two-digit base-16 number and concatenated: #RRGGBB. For example, pure blue is rgb(0, 0, 255), which becomes #0000FF. A channel value of 255 converts to FF, 128 to 80, and 0 to 00. The math is straightforward: 255 in decimal equals 15×16 + 15 = FF in hex.

The HSL Color Model

HSL (Hue, Saturation, Lightness) describes color in terms closer to human perception than raw RGB values. Hue is an angle on the color wheel: 0° and 360° are red, 120° is green, 240° is blue. Saturation ranges from 0% (grayscale) to 100% (fully saturated). Lightness ranges from 0% (black) to 100% (white), with 50% being the pure color. Designers often prefer HSL because adjusting brightness or creating color variants only requires changing one value.

Perceptual Luminance and Accessibility

Human eyes are not equally sensitive to all colors. Green contributes most to perceived brightness, red less, and blue least. The relative luminance formula used by the WCAG (Web Content Accessibility Guidelines) is:

The WCAG contrast ratio between two colors is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance. A ratio of 4.5:1 or higher is required for normal text to meet AA accessibility standards, and 7:1 for AAA. Tools like this converter help designers verify that foreground and background color combinations are readable by people with low vision or color blindness.

Colors in CSS and Design Systems

CSS accepts colors in hex (#3385F4), RGB (rgb(51, 133, 244)), HSL (hsl(214, 90%, 58%)), and named values like cornflowerblue. Modern design systems typically store a primary palette in HSL because shifting the lightness value programmatically creates consistent hover states, disabled states, and dark-mode variants. CSS custom properties (variables) make it easy to swap an entire palette by redefining a handful of HSL values at the root level.

Worked Examples

Example 1 — Brand color conversion. Google Blue rgb(66, 133, 244). Hex: 66 = 0x42, 133 = 0x85, 244 = 0xF4 → #4285F4. HSL: max channel = 244 (blue), min = 66, so l = (244+66)/2/255 = 0.608 = 60.8%. h = 217°, s = 89%. HSL: hsl(217, 89%, 61%).

Example 2 — Dimming a color for a hover state. Starting with hsl(214, 90%, 58%), drop lightness to 48%: hsl(214, 90%, 48%). Hover state looks perceptibly darker without shifting hue. Achieving the same in RGB would require non-obvious math on all three channels.

Example 3 — WCAG contrast check. Body text #555555 (y = 0.205) on background #FFFFFF (y = 1.000). Contrast = (1.000 + 0.05) / (0.205 + 0.05) = 4.12:1. Fails WCAG AA for body text (needs 4.5:1). Darken text to #4A4A4A to reach 4.78:1 and pass.

Example 4 — 3-digit hex shorthand. #F00 = #FF0000 (pure red). #ACE = #AACCEE (light sky blue). Shorthand works when both hex digits in each pair are identical; #AB1 would expand to #AABB11, not #AB1111.

Common Pitfalls

• Mistaking HSL for HSV. HSV (also called HSB) has Hue/Saturation/Value, where V=100% always gives the pure color. HSL's L=100% always gives white. The models look similar but give different saturation values for the same color.
• Forgetting gamma correction in contrast math. WCAG luminance requires linearising each sRGB channel (gamma ≈ 2.2) before weighting. Raw channel math gives wrong contrast ratios.
• Treating opacity and alpha channel as interchangeable. rgba(0,0,0,0.5) affects only that color; opacity: 0.5 affects the whole element including children. Use rgba when you need a semi-transparent background without fading the foreground.
• Using bright pure colors (#FF0000, #0000FF) on screens. Fully saturated primaries strain the eye. Design systems use ~90% saturation and ~50% lightness for "red" / "blue" in practice.
• Assuming colors look the same everywhere. sRGB, P3, and Rec.2020 are different color spaces. A #FF0000 in P3 looks noticeably more vivid than sRGB on wide-gamut displays — relevant for mobile apps and high-end monitors.

Frequently Asked Questions

Why is there both HSL and HSV? HSV predates CSS and works well for painters (Value = how much paint pigment). HSL is native to CSS and more intuitive for designers (Lightness 50% = pure color, above = lighter, below = darker). Modern web work almost always uses HSL.

What is the difference between hex and hexadecimal? Same thing. Hex is short for hexadecimal — base 16. Each digit represents 0–F (0 through 15 decimal). Two hex digits represent one byte (0–255).

Can I use 8-digit hex for transparency? Yes. #FF000080 is red at 50% alpha. The last two hex digits are alpha (00–FF = 0–255 = transparent to opaque). Supported in all modern browsers since 2016.

How do I match a color from a photo? Use a color picker (browser DevTools, any image editor). Alternatively, upload the image, eyedropper the region, and copy the hex. RGB values from photos are always sRGB unless the photo carries a color profile.

Does dark mode change hex values? No — hex values are absolute. Dark mode swaps different colors into CSS variables. Typically a palette stores "neutral-100" and "neutral-900", and the theme flips which variable points to which absolute hex.

Related Calculators

For related number-base work, try the Number System Converter (hex/decimal/binary). For encoding-related tools, see the Base64 Encoder/Decoder and URL Encoder/Decoder. For contrast and luminance math, the Decibels Calculator uses similar logarithmic ratios. Browse the full Developer Tools category for more.

Disclaimer

This calculator is provided for educational and informational purposes only. While we strive for accuracy, users should verify all calculations independently. We are not responsible for any errors, omissions, or damages arising from the use of this calculator.