Text & Code

Color Converter

Pick a colour or type a HEX, RGB or HSL value and instantly see it converted into the other formats, complete with a live preview swatch. Every value is formatted as ready-to-paste CSS, so you can move between design tools and code without doing the maths.

Runs in your browserNo uploads, instantFree, no sign-up
Loading tool…
▸ Highlights
  • HEX ⇄ RGB ⇄ HSL conversion
  • Visual colour picker
  • Live preview swatch
  • Copy CSS-ready values

How to use the Color Converter

  1. 01

    Pick or type

    Use the picker or enter a HEX/RGB/HSL value.

  2. 02

    See conversions

    All formats update together instantly.

  3. 03

    Preview

    Check the colour on the live swatch.

  4. 04

    Copy

    Copy any format straight into your CSS.

Frequently asked questions

Which colour format should I use in CSS?+

All three are valid. HEX is the most common and compact, RGB is handy when you need an alpha channel, and HSL makes it intuitive to lighten, darken or shift the hue.

Does it support shorthand HEX like #f00?+

Yes. Three-digit shorthand HEX is expanded automatically and converted to its full six-digit form alongside the RGB and HSL equivalents.

▸ Related tools
QR Code GeneratorGeneratorsImage ConverterImage & PDFWord & Character CounterText & Code
▸ BUILT BY ANWER SOLANGI

Need a custom tool or a mobile app? Let’s build it.

I’m a React Native & web developer in Karachi. These free tools are built with the same care I bring to client work.

Start a project →All tools
back to all tools