Developer Tools

Color Converter

Convert between HEX, RGB, HSL color formats.

How to Use Color Converter

1

Paste a HEX code, an rgb() string, or an hsl() value into the single input field.

2

Click the "Process" button to convert it into every supported format at once.

3

Use the copy button beside HEX, RGB, RGBA, HSL, HSV, or CMYK to grab the one you need.

4

Check the WCAG contrast ratio against black and white before shipping the colour.

Features

HEX, RGB, RGBA, HSL, HSLA, HSV, and CMYK shown side by side from one value
Accepts CSS named colours and three-digit shorthand such as #39F as input
Shows the nearest CSS named colour, useful for plain-language handoff
Calculates WCAG contrast ratios against black and white automatically
Round-trip safe, so pasting a converted value back returns the same colour
Free and instant, with no account and no colour library to install

Frequently Asked Questions

Yes, completely free with no sign-up, no daily limit, and no watermark on the results. There is also nothing to install, since it runs directly in the browser.
RGB describes the raw intensity of red, green, and blue channels from 0 to 255, which maps directly to how a screen emits light. HSL describes hue, saturation, and lightness, which is more intuitive for humans adjusting a colour, and it maps directly to how design tools present swatches and CSS gradients.
Any of HEX, rgb(), or hsl() is valid and renders identically. HEX is the most compact and easiest to compare at a glance, rgb() is convenient when you are driving values from JavaScript, and hsl() is best when lightness or saturation needs to be varied programmatically.
Yes. The conversion is computed in your browser and nothing is uploaded, so unreleased brand palettes and design tokens stay on your machine.

About Color Converter

Design tools speak HEX, CSS speaks RGB or HSL, print speaks CMYK, and every conversion between them is a place where a colour quietly drifts. The Color Converter takes a single value in any supported format and shows you all of the others at once, so a Figma token can be matched against an existing stylesheet without guesswork.

Technically it is one colour represented four ways. HEX is RGB written in base 16, two digits per channel. RGB is the raw 0 to 255 channel triple. HSL describes hue as an angle plus saturation and lightness as percentages, which is how humans naturally reason about a colour, and it is why designers reach for it. HSV is the same idea with value instead of lightness. CMYK is a subtractive model used for print.

Beyond the conversions, the tool reports the nearest CSS named colour, which helps when handing work to someone who will describe a colour in words rather than numbers, and it calculates WCAG contrast ratios against black and white so you can sanity-check whether text will be readable before you commit to it in a build.

When to Use This Tool

  • Matching a brand colour from a Figma or Photoshop file to a CSS value
  • Converting a print CMYK swatch into a value for a web build
  • Checking whether a colour meets WCAG contrast requirements for body text
  • Converting a colour picked in a native OS picker into a stylesheet token
  • Sending a designer a colour reference in the format they actually use