Color Converter
Convert colors between HEX, RGB, RGBA, HSL, HSLA, and OKLCH formats instantly. Free online tool for designers and developers.
Preview
:root {
--color: #6366F1;
--color-rgba: rgba(99, 102, 241, 1);
}How to Use
- Enter any color value in the input field (HEX, RGB, HSL, etc.)
- See instant conversions to all supported formats
- Adjust the alpha slider to add transparency
- Click any value to copy it to your clipboard
- Use the export panel to get ready-to-use code snippets
Examples
#6366F1 → rgb(99, 102, 241) #10B981 → hsl(160, 84%, 39%) #F59E0B → oklch(0.77 0.17 75.4) Frequently Asked Questions
What color formats can I convert between? ▼
Our color converter supports HEX (3 and 6 digit), RGB, RGBA (with alpha/opacity), HSL, HSLA, and the modern OKLCH color space. Simply enter any format and see instant conversions to all others.
What is OKLCH and why should I use it? ▼
OKLCH is a perceptually uniform color space that makes it easier to create accessible color palettes. Unlike RGB or HSL, adjusting lightness in OKLCH produces visually consistent results, making it ideal for design systems.
How do I convert HEX to RGB? ▼
Enter your HEX color (e.g., #FF5733) in the input field. The RGB equivalent will appear instantly. For this example: rgb(255, 87, 51).
Can I add transparency to my colors? ▼
Yes! Use the alpha slider to adjust opacity from 0% (fully transparent) to 100% (fully opaque). The RGBA and HSLA values will update automatically.
Is this color converter free to use? ▼
Absolutely! This tool is completely free with no limits. Use it as many times as you need for your design and development projects.
Related Tools
Contrast Checker
Check WCAG accessibility compliance for color pairs.
Palette Generator
Generate tints and shades from any base color.
OKLCH Converter
Deep dive into OKLCH color space conversions.
CSS Variables Generator
Generate CSS custom properties from your colors.
Tailwind Export
Export colors for your Tailwind config.