Home › Tools › Color Converter (HEX, RGB, HSL)

Color Converter (HEX, RGB, HSL)

Convert colors between HEX, RGB, HSL, and CMYK formats. Calculate values directly on your device.

#1D70B8

Or select a standard preset:

R:G:B:

CSS value: rgb(29, 112, 184)

H:S (%):L (%):

CSS value: hsl(208, 73%, 42%)

C: 84%   M: 39%   Y: 0%   K: 28%

Accessibility & Contrast

Contrast on White (#FFFFFF):5.17:1Passes WCAG AA (Normal text)
Contrast on Black (#000000):4.06:1Passes WCAG AA (Large text only)

About this tool

Color Converter calculates real-time conversions between HEX hexadecimal codes, RGB color values, HSL components, and CMYK printing coordinates. Changing any field or using the visual color picker updates all formats instantly. It also provides Web Content Accessibility Guidelines (WCAG) contrast ratios against black and white backgrounds. Everything runs entirely in your browser with zero network requests.

When to use it

  • Convert design tokens from Figma or Photoshop into CSS HEX, RGB, or HSL values
  • Inspect and adjust hue, saturation, and lightness for consistent interface palettes
  • Check text-to-background contrast ratios against WCAG 2.1 AA requirements (minimum 4.5:1 for standard text)
  • Translate digital screen colors into CMYK percentages for print design and physical collateral

How to use it

To convert a color

  1. Enter a hexadecimal code (for example: #1D70B8) or click Change colour to pick a visual swatch.
  2. The synchronized fields for HEX, RGB, HSL, and CMYK update immediately.
  3. Adjust individual color channels (Red, Green, Blue, or Hue, Saturation, Lightness) to fine-tune your shade.
  4. Click any Copy button to copy the formatted CSS string directly to your clipboard.
  5. Review the Accessibility & Contrast panel to verify compliance on white or black backgrounds.

Questions

What is the difference between HEX, RGB, and HSL?

  • HEX: A 6-character hexadecimal notation (such as #1D70B8) commonly used in HTML and CSS stylesheets. The three pairs represent red, green, and blue byte levels from 00 (0) to FF (255).
  • RGB: Represents additive primary light channels as decimal numbers from 0 to 255 (such as rgb(29, 112, 184)).
  • HSL: Represents colors using cylindrical coordinates: Hue (0 to 360 degrees), Saturation (0% to 100%), and Lightness (0% to 100%). HSL is often preferred by designers because altering brightness or intensity requires changing only one parameter.

Does this tool send any data to a server?

No. Color calculations, luminance evaluations, and clipboard operations happen entirely client-side using JavaScript in your browser memory.

What are WCAG contrast ratios?

The Web Content Accessibility Guidelines (WCAG) require text to maintain sufficient contrast against its background so readers with low vision can discern content comfortably:

  • Level AA: Requires a minimum contrast ratio of 4.5:1 for standard body text and 3.0:1 for large text (18pt or 14pt bold).
  • Level AAA: Requires an enhanced contrast ratio of 7.0:1 for body text and 4.5:1 for large text.

How do I use these color codes in CSS?

All modern web browsers support HEX, RGB, and HSL notation natively in CSS rules:

/* Using HEX */
color: #1D70B8;

/* Using RGB */
background-color: rgb(29, 112, 184);

/* Using HSL */
border-color: hsl(207, 73%, 42%);