TidyFigure

Color Converter

  • 100% free
  • No sign-up
  • Runs in your browser

Pick a colour or type it in any format (#0B7F5E, rgb(11, 127, 94), hsl(163, 84%, 27%) or a name like "teal") to see it in HEX, RGB, HSL, HSV and CMYK at once. The contrast check tells you whether white or black text on that colour is readable, and the strip below gives you lighter tints and darker shades.

Tints and shades (tap to copy)

Everything runs in your browser. Nothing you type is sent anywhere.

Colour formats explained

  • HEX (#RRGGBB) is the most common format on the web. Each pair of characters is a red, green or blue value from 00 to FF (0 to 255) in hexadecimal. #FF0000 is pure red; #3AF is short for #33AAFF.
  • RGB gives the same red, green and blue values as decimal numbers, from 0 to 255. Screens make every colour by mixing these three lights.
  • HSL stands for hue (0–360° around the colour wheel), saturation (0% grey to 100% vivid) and lightness (0% black, 50% pure colour, 100% white). It's the easiest format for adjusting a colour by hand: change only the lightness to get a lighter or darker version.
  • HSV / HSB (hue, saturation, value or brightness) is used by colour pickers in Photoshop, Figma and other design tools.
  • CMYK (cyan, magenta, yellow, black) describes ink for printing. The values here are a straightforward conversion; for professional print work, your printer's colour profile will adjust them.

Converting HEX to RGB by hand

#0B7F5E → 0B | 7F | 5E 0B = 0×16 + 11 = 11 7F = 7×16 + 15 = 127 5E = 5×16 + 14 = 94 → rgb(11, 127, 94)

Contrast and accessibility

The Web Content Accessibility Guidelines (WCAG) measure contrast as a ratio from 1:1 (no contrast) to 21:1 (black on white). Text needs at least 4.5:1 against its background to pass level AA, or 3:1 for large text (about 24 px, or 19 px bold). Level AAA needs 7:1. The contrast boxes show whether white or black text works better on your colour, which is handy for choosing button and badge text.

Tints and shades

A tint is a colour mixed with white; a shade is mixed with black. Design systems usually build a scale like this from each brand colour: light tints for backgrounds, the base colour for buttons, darker shades for hover states and text. Tap any square to copy its HEX value and make it the current colour.

Supported input

You can type any colour CSS understands: 3-, 6- or 8-digit HEX (with or without #), rgb(), hsl(), and all 148 named CSS colours such as "tomato", "rebeccapurple" and "dodgerblue".

Frequently asked questions

How do I convert HEX to RGB?

Split the HEX code into three pairs and convert each from hexadecimal to decimal. #0B7F5E becomes 11, 127, 94. Or paste it above to convert instantly.

How do I convert RGB to HEX?

Convert each value from 0–255 into a two-digit hexadecimal number and join them. rgb(255, 99, 71) becomes #FF6347.

What is a good contrast ratio for text?

At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA. 7:1 meets the stricter AAA level.

What is the difference between HSL and HSV?

Both use hue and saturation. HSL uses lightness, where 50% is the pure colour; HSV uses value, where 100% is the brightest version of the colour.

Can I use colour names?

Yes. Type any CSS colour name, such as “teal” or “tomato”, and it is converted to all formats.

Last updated October 2026 · More converters