Convert colors between HEX, RGB, HSL, and HSV. Click any value to copy.
1. Select a mode — HEX → RGB/HSL/HSV or HSL → RGB/HEX. 2. Type or paste a hex color, or drag the HSL sliders. 3. All conversions update live. 4. Click any converted value to copy it to your clipboard.
This tool supports conversion between HEX, RGB, HSL, and HSV formats. The HEX mode converts to all three other formats simultaneously. The HSL mode gives you sliders to fine-tune hue, saturation, and lightness.
Use HEX when you are copying colors into CSS, design tokens, or brand guidelines. Use RGB when you need channel values for code, image tools, or accessibility calculations. HSL is easier for adjusting a color by eye because hue, saturation, and lightness are separated. HSV is useful when you are working with picker-style interfaces where brightness and saturation need to change independently.
The contrast ratio is calculated using the WCAG 2.1 relative luminance formula. It shows the contrast between your color against white and black backgrounds. A ratio of 4.5:1 or higher meets AA accessibility standards for normal text.
Paste a brand color or sample color into the HEX field, then copy the RGB or HSL value that best matches your next step. Developers usually copy HEX or RGB into CSS variables, while designers often use HSL to create lighter or darker variants. The live preview helps confirm that the converted value still matches the color you intended.
No. All color conversion happens entirely in your browser. Your data never leaves your device.