nicetool.dev logo

Color Converter

Type any CSS color (HEX, rgb(), hsl(), oklch(), cmyk() or a color name).

#3B82F6
Formats
  • HEX#3B82F6
  • RGBrgb(59 130 246)
  • RGB (legacy)rgb(59, 130, 246)
  • HSLhsl(217 91.2% 59.8%)
  • HSVhsv(217 76% 96.5%)
  • HWBhwb(217 23.1% 3.5%)
  • OKLCHoklch(62.31% 0.188 259.81)
  • CMYKcmyk(76% 47% 0% 4%)

WCAG contrast

Aa 123

Text on white

3.68:1

AAAA LargeAAA
Aa 123

Text on black

5.71:1

AAAA LargeAAA

Shades

Click a shade to use it.

Why convert color formats?

Designers and developers work with colors in many formats: HEX in design tools, rgb() and hsl() in CSS, OKLCH in modern design systems like Tailwind CSS v4, and CMYK for print. This tool converts between all of them instantly.

Features

  • • HEX, RGB, HSL, HSV, HWB, OKLCH and CMYK output
  • • Native color picker and opacity slider
  • • WCAG 2 contrast ratio against white and black
  • • Automatic tints and shades palette

Instant & local

All conversions are computed in your browser with no network requests.

Accessible colors, zero tracking.

How to use the Color Converter

  1. 1

    Type a color in any CSS format: #3B82F6, rgb(59 130 246), hsl(217 91% 60%), oklch(...), cmyk(...) or a name like tomato. You can also pick one with the color picker.

  2. 2

    Adjust the opacity slider if you need transparency. All formats update together, including 8-digit HEX and rgba.

  3. 3

    Copy the format you need: HEX for design handoff, rgb() or hsl() for CSS, OKLCH for modern design tokens, CMYK as a starting point for print.

  4. 4

    Check the WCAG contrast against white and black text, and click a shade in the palette to explore lighter or darker variants.

Practical examples

Design to code handoff

A designer sends #0EA5E9 from Figma. Convert it to hsl() so you can easily build hover and active states by changing only the lightness.

Accessibility checks

Body text needs a contrast ratio of at least 4.5:1 for WCAG AA. Check a brand color before using it as a button background with white text.

Building a color scale

Use the generated shades as a starting point for a 50 to 900 palette in Tailwind CSS or your design system.

Print materials

Convert a screen color to CMYK to brief a printer. Treat it as an approximation: exact print colors depend on the paper and the printer profile.

Frequently asked questions

What is the difference between RGB and HSL?+

Both describe the same colors. RGB mixes red, green and blue light; HSL uses hue, saturation and lightness, which is easier for people to adjust, for example making a color 10% lighter.

Why use OKLCH?+

OKLCH is perceptually uniform: equal changes in lightness look equally different to the eye, unlike HSL. It is supported in all modern browsers and makes consistent color scales and dark themes easier.

What contrast ratio do I need?+

WCAG AA asks for 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold). AAA raises this to 7:1 and 4.5:1.

Is the CMYK value exact?+

No. Converting from screen RGB to CMYK without a color profile gives a mathematical approximation. For brand-critical printing, ask your printer for a proof or use Pantone references.