Color Converter
How to use
Converts colors between HEX, RGB and HSL formats. It is useful for designers and developers who work across different color systems. Enter a color in any format and all the other formats are shown at once, so you can copy the one you need.
Pick a Color
Shade Palette
- Translating a brand HEX color into RGB or HSL for a CSS variable or design token
- Generating a lighter/darker shade scale from one brand color for a UI style guide
- Converting a color picked from a design mockup into code-ready formats
- Checking what a designer-provided HEX code looks like in HSL for easier hue tweaking
Free and private. Everything runs on your own device, with no account and no uploads.
This tool lets you pick a color visually or type a HEX code and see the equivalent RGB and HSL values, along with a strip of lighter and darker shades generated from the same hue. It is useful for designers and developers who need to translate a brand color between different CSS color notations while building a style guide. All calculations happen locally in JavaScript with no network requests.
It converts between HEX, RGB, and HSL notations; it does not currently output HSV or CMYK values.
Since it works with screen-based HEX/RGB/HSL values rather than CMYK, it is best suited for web and UI design rather than exact print color matching.
It generates a strip of lighter and darker variations of your chosen hue, useful for building consistent UI color scales.
Yes, 3-character HEX shorthand is automatically expanded to the full 6-character form.
- 1
Pick or type a color
Use the color picker or enter a HEX code directly.
- 2
View the converted formats
See the matching RGB and HSL values change as you edit.
- 3
Browse the shade palette
Click any generated shade swatch to switch to that color.
- 4
Copy the format you need
Use the copy button next to HEX, RGB, or HSL to grab the code.
- ·Use the HSL output when you want to tweak lightness or saturation without changing the hue.
- ·For print work, treat the RGB/HEX values as a starting point only, convert to CMYK in your print software for accurate results.
- ·The generated shade strip is a fast way to build a 5-10 step color scale without manual hue math.