🎨

Color Converter

HEX ↔ RGB ↔ HSL converter

Pick Color
HEX
RGB
HSL
CSS Variable
Swatches

About Color Converter

HEX is what design tools export. RGB is what you use in programmatic colour manipulation. HSL is what makes sense when you want to adjust lightness or create colour variations — changing the L value makes a colour lighter or darker, adding 180 to H gives you the complement. Type or pick a colour in any format and all three update simultaneously. The output includes a ready-to-paste CSS custom property declaration. The quick palette gives you 12 common UI colours as starting points.

Common Use Cases

  • →Converting Figma or Sketch colour exports to CSS values
  • →Creating lighter and darker variants by adjusting HSL lightness
  • →Generating CSS custom properties from brand colour values
  • →Finding the complement of a colour by adding 180 to the HSL hue

Frequently Asked Questions

HEX vs RGB — same data, different notation?+
Exactly. #FF5733 is the same as rgb(255, 87, 51). HEX is base-16 notation; RGB explicitly names the channel values. HEX is more compact; RGB is more readable in code.
Why is HSL useful for generating colour variations?+
Because the Lightness channel is independent. To make any colour lighter, increase L. To make it darker, decrease L. The hue and saturation are preserved. This is not easy to do in HEX or RGB without a library.
What is a CSS custom property for colour?+
--color-primary: #7c6dfa; defined in :root means you can use color: var(--color-primary) anywhere in your stylesheet. Changing the variable propagates everywhere it is used.