How to Use the Color Converter
Enter a HEX code, adjust the individual red, green, and blue sliders, or pick a color visually using the built-in swatch — all three formats (HEX, RGB, HSL) stay in sync automatically, updating instantly no matter which one you edit.
The tool is built so you can work in whichever format is most natural for the task, without manually converting between them.
Choosing your starting format
As covered in the HEX-vs-RGB-vs-HSL guide, start from whichever format you already have the color in — a HEX code from a brand guideline, individual RGB values from a design file, or the color picker if you're starting from scratch and just want to explore visually.
Copying the result for your project
Use the copy button next to any of the three formats to grab a ready-to-paste CSS value — as covered in the HSL-for-design guide, converting to HSL first is especially useful if you're about to generate a lighter or darker variant of the color for your project.