A designer hands over a brand blue as a HEX code. The frontend developer needs it in RGB for a canvas element. The design system wants it in HSL so a whole shade scale can be generated from one hue. Same color, three formats, and every one of them describes it differently — which is exactly why a converter earns a permanent spot in the bookmarks bar.
Web Color Format Overview
Browsers support several color formats, and each fits a different job: HEX (#FF5733) is the default in CSS and most design tools. RGB (rgb(255,87,51)) is intuitive for mixing and supports transparency through RGBA. HSL (hsl(11, 100%, 60%)) is usually the most intuitive for designers, organized around hue, saturation, and lightness. Named colors (red, blue, coral) cover 140+ simple CSS keywords. All four describe the same color space — just through different lenses.
HEX Color Codes Explained
HEX codes use six hexadecimal digits (0–9, A–F) in three pairs for Red, Green, Blue: #RRGGBB. #FF5733 breaks down to Red:255, Green:87, Blue:51. Each pair ranges from 00 (0) to FF (255). Shorthand exists when each pair is doubled — #FF6600 collapses to #F60. An 8-digit HEX (#RRGGBBAA) adds a final pair for alpha (transparency). HEX remains the most common format in CSS, design files, and brand guidelines.
| HEX | Color | RGB Equivalent |
|---|---|---|
| #000000 | Black | rgb(0, 0, 0) |
| #FFFFFF | White | rgb(255, 255, 255) |
| #FF0000 | Pure Red | rgb(255, 0, 0) |
| #2563EB | Brand Blue | rgb(37, 99, 235) |
RGB and RGBA Colors
RGB expresses color as three values (0–255) for Red, Green, and Blue: rgb(37, 99, 235). RGBA adds a fourth value for Alpha (opacity): rgba(37, 99, 235, 0.5) is 50% transparent blue. RGB is intuitive for mixing — equal values across all three channels always produce a gray (0,0,0 is black, 255,255,255 is white). It's the natural choice for dynamic color manipulation in JavaScript and anywhere transparency is needed.
HSL and the Newer OKLCH Format
HSL defines color through Hue (0–360°, position on the color wheel), Saturation (0–100%, gray to vivid), and Lightness (0–100%, black to white). hsl(0, 100%, 50%) is pure red, hsl(120, 100%, 50%) is pure green, hsl(240, 100%, 50%) is pure blue. Designers like HSL because building tints and shades is intuitive — keep the hue fixed and adjust saturation or lightness.
💡 What most people building color palettes still don't know: HSL has a real mathematical flaw — hsl(60, 100%, 50%) (yellow) looks noticeably brighter than hsl(240, 100%, 50%) (blue) even though both share the same "lightness" value. CSS Color Module 4 introduced OKLCH specifically to fix this — it defines lightness perceptually, so oklch(0.7 0.15 250) actually looks as bright as oklch(0.7 0.15 90) regardless of hue. OKLCH is supported in every major evergreen browser as of 2026 and pairs naturally with CSS's color-mix() function for generating hover states and shade scales without the muddy midpoints HSL sometimes produces.
Color Accessibility: Contrast Ratios
WCAG (Web Content Accessibility Guidelines) sets minimum contrast between text and background for legibility: AA standard requires a 4.5:1 ratio for normal text, 3:1 for large text. AAA standard pushes that to 7:1 for normal text. Black on white sits at 21:1, the maximum possible. Light gray on white frequently fails outright. Run color combinations through the WebAIM Contrast Checker before finalizing a design — an estimated 8% of men and 0.5% of women have some form of color blindness, and red-green combinations are the most common failure point.
Quick Checklist
- Use HEX for static CSS colors and design tool exports
- Use RGBA when you need transparency in CSS
- Test color contrast with WebAIM Contrast Checker before finalizing designs
- Define brand colors in HSL or OKLCH for easy palette generation
- Never convey information through color alone — use icons or text patterns too for accessibility
- Keep a color palette reference document with HEX, RGB, and HSL values for each brand color
For informational purposes only. Not financial, tax, or legal advice. Consult a qualified professional before making major decisions.