About the Color Converter
The Color Converter shows the same color in every format web and design tools use — HEX, RGB, HSL and HSV — at the same time, so you can copy whichever one you need. Use the color picker or type a value to get a live preview, plus a row of lighter tints and darker shades for building palettes. Everything runs locally in your browser.
How to use
- Click the color box to open the picker, or type a HEX or RGB value.
- Read the HEX, RGB, HSL and HSV values and click Copy on any of them.
- Click a tint or shade swatch to switch to that color.
- Paste the value into your CSS, design tool or code.
Common uses
- Converting between HEX, RGB, HSL and HSV.
- Building tint and shade palettes.
- Matching brand colors across tools.
- Choosing accessible color variations.
Frequently asked questions
What is the difference between HEX, RGB and HSL?
They describe the same color in different ways: HEX and RGB specify the red, green and blue channels, while HSL uses hue, saturation and lightness — which is often easier to tweak by hand.
Are tints and shades the same as opacity?
No. A tint mixes the color with white and a shade mixes it with black, producing new solid colors rather than transparency.