How to Use Color Converter
Follow these three steps to process, validate, and export your data locally inside your browser with zero server latency:
Enter a color in HEX (`#RRGGBB` or `#RGB`), RGB (`rgb(r, g, b)`), or HSL (`hsl(h, s%, l%)`) format, or pick a swatch.
View the synchronized HEX, RGB, and HSL representations and live color preview.
Check WCAG contrast ratios against white and dark text and copy any CSS format.
How HEX, RGB, and HSL Color Spaces Map to WCAG 2.1 Relative Luminance
Web developers and UI designers work across three primary sRGB color notations: hexadecimal (#RRGGBB) for compact tokens, additive RGB (Red, Green, Blue channels 0–255) for display hardware and canvas operations, and cylindrical HSL (Hue 0–360°, Saturation 0–100%, Lightness 0–100%) for building cohesive design system palettes.
Beyond syntax conversion, accessible interface design requires verifying contrast ratios under W3C WCAG 2.1 guidelines. Our Color Converter linearizes sRGB gamma channels to compute relative luminance (L) and evaluates the contrast formula (L₁ + 0.05) / (L₂ + 0.05) against both pure white (#FFFFFF) and dark slate (#0F172A) text in real time.
Why HSL Lightness (50%) Does Not Equal Perceptual Luminance
In HSL, pure yellow (#FFFF00) and pure blue (#0000FF) both have a Lightness of 50%. However, human photoreceptors are far more sensitive to green/yellow wavelengths than blue: yellow has a relative luminance of 0.9278 (19.56:1 contrast against black), whereas pure blue has a luminance of only 0.0722 (8.59:1 contrast against white). Always check the WCAG contrast readout!
CSS Color Notation & Design System Usage Matrix
Compare when to use HEX, RGB, and HSL in modern CSS and Tailwind workflows:
| Color Format | CSS Syntax Example | Channel Ranges | Best Design System Use Case |
|---|---|---|---|
| HEX (6-digit) | #10B981 | 00 – FF per channel (Base-16) | Figma handoff, brand guides, static CSS variables |
| HEX Shorthand (3-digit) | #096 -> #009966 | 0 – F per channel (Doubled) | Compact monochrome & web-safe shorthand |
| RGB Functional | rgb(16, 185, 129) | R, G, B: 0 – 255 | Canvas pixel manipulation & alpha rgba() overlays |
| HSL Cylindrical | hsl(160, 84%, 39%) | H: 0–360°, S: 0–100%, L: 0–100% | Generating hover/active shade scales by adjusting L% |
Accessible Color Palette & UI Contrast Best Practices
Build inclusive interfaces that pass automated Lighthouse and axe-core audits:
1. Verify Button Text Contrast (White vs Dark Text)
WCAG 2.1 AALook at the "White Text (#FFF) Contrast" and "Dark Text (#0F172A) Contrast" cards to immediately see which text color passes the 4.5:1 AA threshold on your brand accent.
2. Use HSL to Create Hover & Focus Shades
Design TokensKeep Hue and Saturation constant and decrease Lightness by 6%–8% to create a natural, harmonious hover state for primary buttons.
3. Support Both 3-Digit (#F0A) and 6-Digit (#FF00AA) HEX
Input FlexibilityType or paste any 3-character or 6-character hex code (with or without the leading #) or use the native color picker swatch.
4. Avoid Pure Black (#000000) on Dark Mode Surfaces
Dark UI ErgonomicsUse deep slate tones (#0B1326 or #0F172A) instead of #000000 to reduce halation eye strain on OLED displays.
Practical Examples & Input/Output Reference
Converting ToolsCabinet Primary Blue across CSS formats
Inspecting HEX, RGB, and HSL values for `#2563EB`.
Sample Input
#2563EBExpected Output
HEX: #2563EB | RGB: rgb(37, 99, 235) | HSL: hsl(221, 83%, 53%)Frequently Asked Questions
Does the converter support 3-digit shorthand HEX codes like `#09F`?
Yes. A 3-digit shorthand HEX code like `#09F` is automatically expanded to its 6-digit equivalent `#0099FF` before converting to RGB and HSL.