Color Converter
Convert between HEX, RGB, HSL, and HSV color formats instantly.
Pick a color
Frequently Asked Questions
What is the difference between HSL and HSV?+
Both use Hue (0–360°) and Saturation (0–100%), but the third channel differs. HSL uses Lightness: 0% is black, 100% is white, and 50% is the pure color. HSV (also called HSB) uses Value: 0% is black and 100% is the fully bright version of the hue. HSL is more intuitive for CSS; HSV is common in design tools like Figma and Photoshop.
How do I use a color from Figma or Sketch in CSS?+
Design tools usually display colors in hex or HSB/HSV. Copy the hex code from the design tool, paste it into the HEX field here, then use the HSL values in your CSS — hsl() is often easier to adjust than hex because you can tweak lightness or saturation directly as a percentage.
When should I use RGB versus HSL in CSS?+
Use HSL when you want to create color variations programmatically — it is easy to generate a lighter or darker shade by adjusting the Lightness value. Use RGB or HEX when you have a specific color value from a brand guide or design file and do not need to derive variants from it.
Why does the same hex color look different on different screens?+
Screens vary in color gamut, color temperature, and calibration. A wide-gamut display (such as a MacBook with P3 color space) renders the same hex value more vividly than an sRGB display. CSS colors are specified in sRGB by default; if you need P3 colors, use the color(display-p3 ...) syntax.
How to use
- Use the color picker or type into any field — all formats update instantly.
- HEX: 6-digit hex code (e.g.
#ff6347). 3-digit shorthand is also accepted. - HSL: Hue (0–360°), Saturation (0–100%), Lightness (0–100%).
- HSV: Hue (0–360°), Saturation (0–100%), Value/Brightness (0–100%).
- Click Copy next to any format to copy the formatted value to your clipboard.