Color Converter
Convert between HEX, RGB, and HSL color values
Overview
Convert between HEX, RGB, and HSL color values. Use it when you need to turn a HEX code from a designer into CSS rgb(), or when you want fine-grained hue adjustments via HSL. A color preview is shown alongside the conversion so you can visually verify the result.
Key Features
- Bidirectional HEX, RGB, HSL conversion
- Real-time color preview panel
- Pick colors directly with a color picker
- Copy CSS code for each format
- Alpha channel support (RGBA, HSLA)
How to Use
- Enter a color value in any format: HEX, RGB, or HSL.
- Converted values for the other formats appear automatically.
- You can also pick a color directly with the color picker.
- Copy the CSS code using the button next to the format you need.
Tips
- HSL separates hue (H), saturation (S), and lightness (L), making fine color tone adjustments intuitive.
- A 6-digit HEX with repeating pairs (#AABBCC) can be shortened to 3 digits (#ABC).
- For dark mode, just adjust the L (lightness) in HSL to change brightness while keeping the same hue.
FAQ
- Is CMYK conversion supported?
- Currently only HEX, RGB, and HSL are supported since they are the standard web color formats. CMYK is a print color model and does not map 1:1 to web colors, so a dedicated tool is recommended.
- How do I set the alpha (opacity)?
- When entering RGB or HSL, add a fourth value between 0 and 1 for alpha. For HEX, use the 8-digit format (#RRGGBBAA).
- Can I look up Tailwind CSS color names?
- Tailwind color name matching is not currently supported. This tool focuses on conversions between HEX, RGB, and HSL formats.