See a color in every format at once
Enter a HEX value, tweak the R/G/B channels, or drag the H/S/L sliders — every representation updates in real time, and each value has a one-click copy button.
How to use
- Type a HEX value or use the picker.
- Or edit the RGB or HSL channel values directly.
- Copy the value you need.
Frequently asked questions
About the Color Converter
Designers hand over HEX codes, CSS wants RGB or HSL, and design tools use their own pickers. The Color Converter translates a colour between HEX, RGB and HSL so you can copy exactly the notation you need.
It runs entirely in your browser.
How to use it
- Type a HEX code, adjust the R, G and B channels, or choose a colour with the picker.
- See the equivalent HEX, RGB and HSL values.
- Copy the value you need.
Common uses
- Converting a brand colour from a style guide into CSS.
- Creating lighter and darker shades by adjusting HSL lightness.
- Checking that a colour entered in one tool matches another.
Tips for better results
- HSL is the easiest format for adjusting a colour by hand. Change lightness for tints and shades, or saturation for a more muted look.
- Three-digit HEX codes such as #0af are shorthand for #00aaff.
- Always check text and background colours for sufficient contrast so your page is readable for everyone.
Good to know
- Colours are handled in the standard sRGB space. Print formats such as CMYK are not covered.
- Rounding means that converting back and forth may change a value by one unit.
Built and maintained by Neha Singh. Found a problem or have a suggestion? Email hello@zevqi.com.