Free Developer Tool
HEX To RGB To HSL Converter
Convert colors instantly between HEX, RGB, and HSL formats with a live preview, automatic shade and tint generation, and complementary color suggestions. All conversions run on pure JavaScript color math directly in your browser.
#5b7fec
Choose which fields to edit directly
Current color is #5b7fec, equal to rgb(91, 127, 236) and hsl(225, 79%, 64%).Converted
#5b7fecHEX Code
91, 127, 236RGB Values
225, 79%, 64%HSL Values
#ecc75bComplementary
5.33:1Contrast Ratio
| Lightness Shift | Resulting Lightness | HEX Value | Copy |
|---|---|---|---|
| -40% | 24% | #0d256e | |
| -30% | 34% | #12349b | |
| -20% | 44% | #1844c9 | |
| -10% | 54% | #2d5be6 | |
| Base Color | 64% | #5b7fec | |
| +10% | 74% | #88a3f1 | |
| +20% | 84% | #b6c6f6 | |
| +30% | 94% | #e4eafc | |
| +40% | 100% | #ffffff |
How to use the HEX to RGB to HSL Converter
Choose an input format of HEX, RGB, or HSL to type values directly into that format
Use the native color picker swatch to visually choose a color with your mouse
Paste a full color string like rgb(91, 127, 236) or hsl(225, 80%, 64%) directly into any field
Click Random Color to generate a new color and see all three formats update instantly
All three formats stay synchronized automatically as you edit any single value
Check the Shades and Tints tab to see nine lightness variations of your current color
Click any shade swatch or table row to copy that HEX value to your clipboard
Visit the Color Harmony tab to see complementary and triadic colors based on hue rotation
Use the Contrast Checker tab to test your color against another color for WCAG accessibility compliance
A contrast ratio of 4.5 to 1 or higher is required for normal text under WCAG AA guidelines
Browse the Named Colors tab for common color names and click Use Color to load any of them instantly
The HEX, RGB, and HSL values in the input footer always reflect the exact current color
All color math runs locally in pure JavaScript with no server calls involved
