Color Converter

Convert colours between HEX, RGB and HSL and preview them — instantly, in your browser.

Aa
HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
HSVhsv(217, 76%, 96%)
CMYKcmyk(76%, 47%, 0%, 4%)
Contrast vs white3.68:1
Contrast vs black5.71:1 ✓ AA
Shades
Tints

Suggested tools

Number Base Converter

Convert numbers between binary, octal, decimal and hex.

BINHEXDEC
Open Tool

CSS Formatter

Beautify minified CSS into readable rules, or minify it.

CSS
Open Tool

CSS Minify

Shrink CSS by removing comments and spaces, keeping it valid.

CSS
Open Tool

Image Converter

Convert and compress PNG, JPG, WebP, SVG, and other image assets.

PNGJPGWEBPSVGGIF
Open Tool

HTML Formatter

Indent and tidy HTML, or minify it.

HTML
Open Tool

Case Converter

Convert text to UPPER, lower, Title, camel, snake, kebab case.

TEXT
Open Tool

About Color Converter

Color Converter converts any colour between HEX, RGB, HSL, HSV and CMYK, with a live preview swatch. Enter a colour as a CSS name (teal), HEX, RGB or HSL and all five formats are shown instantly.

It also calculates the colour's contrast ratio against white and black text and tells you which is more readable, following the WCAG accessibility formula. It runs entirely in your browser, so nothing you paste is uploaded.

How to use Color Converter

  1. Enter a colour, such as #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%) or teal.
  2. See it in HEX, RGB, HSL, HSV and CMYK.
  3. Check the contrast results and copy the format you need.

Key features

  • HEX, RGB, HSL, HSV and CMYK
  • Live colour preview
  • WCAG contrast ratio with white and black
  • Recommended text colour

Example

Input
#3b82f6
Output
HEX: #3b82f6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
HSV: hsv(217, 76%, 96%)
CMYK: cmyk(76%, 47%, 0%, 4%)
Contrast with white: 3.68:1
Contrast with black: 5.71:1
Better text colour: #000000

When to use Color Converter

  • Converting a brand colour from HEX to RGB or HSL for CSS.
  • Checking whether white or black text is more readable on a background colour.
  • Getting approximate CMYK values for a print brief.

Tips and common problems

  • Aim for a contrast ratio of at least 4.5:1 for normal text.
  • HSL makes it easy to create lighter or darker shades — change only the lightness.
  • Ask your printer for exact CMYK values; screen-to-print conversion depends on the printer profile.

Frequently asked questions

WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text; AAA asks for 7:1.