How to Use the Color Picker & Hex Converter
- Use the color picker or type a value in HEX, RGB or HSL.
- All three formats update to match instantly.
- Copy the value you need with one click.
- Adjust until you have the exact shade you want.
HEX, RGB and HSL explained
The same colour can be written several ways. HEX (like #fc5418) is compact and common in CSS. RGB describes a colour by its red, green and blue components. HSL uses hue, saturation and lightness, which many people find the most intuitive for tweaking a shade.
Each format suits a different moment: HEX for pasting into code, RGB when you need the raw channels, and HSL when you want to make a colour lighter, darker or less saturated by adjusting a single value.
Converting between formats
Designers and developers constantly move between these formats, matching a brand colour, adjusting a palette, or copying a value from a design tool into code. Converting by hand is error-prone, so a converter keeps everything consistent.
Many colours also carry an alpha (opacity) value. Understanding how the formats relate makes it easy to reproduce a colour exactly across your designs and stylesheets.
Frequently Asked Questions
What's the difference between HEX, RGB and HSL?
HEX and RGB both describe a color by its red, green and blue components; HEX uses a 6-digit code and RGB uses 0-255 numbers. HSL describes color by hue, saturation and lightness, which many designers find more intuitive to adjust.
Can I paste a color code in?
Yes. Enter a HEX code, an rgb() value or an hsl() value and the tool converts it to the other formats.
Is it good for CSS?
Absolutely. Copy the HEX, RGB or HSL string directly into your stylesheet.