Skip to main content
dubinity

Design & Accessibility

Color Converter

Convert a colour between HEX, RGB, HSL, HSV, HWB, CMYK and OKLCH, with contrast against black and white.

  • Runs in your browser
  • Works on mobile
  • In: TEXT
  • Out: TEXT
Loading the tool…

Your files and text are processed on your own device, inside this page. Nothing is uploaded to Dubinity or stored, and closing the tab discards it. How privacy works

About Color Converter

Type a colour in any notation - #0f766e, rgb(15 118 110), hsl(174 78% 26%), oklch() or a CSS name such as teal - and get every other notation, ready to copy.

Underneath each colour is the WCAG contrast ratio against black and white text, with the AA and AAA verdicts, plus a row of tints and shades you can click to keep exploring. On Chromium desktop browsers an eyedropper can lift a colour straight off the screen.

CMYK is the simple conversion every web tool uses; real print colour depends on the press profile, so treat it as a starting point rather than a proof.

How to use it

  1. 1Type or paste a colour in any notation, or use the swatch to pick one.
  2. 2Read every other notation in the list and copy the one you need.
  3. 3Check the contrast cards to see whether black or white text is readable on it.
  4. 4Click a tint or shade to carry on from that colour.

Questions

Was this tool helpful?

Related tools

All design tools

  • CSS Gradient Generator

    Build linear, radial and conic CSS gradients with a live preview and copyable CSS.

    Runs in your browserOpen tool

  • CSS Box Shadow Generator

    Stack box-shadow layers with offsets, blur, spread and opacity, and copy the CSS.

    Runs in your browserOpen tool

  • CSS Border Radius Generator

    Shape each corner, including elliptical corners, and copy the shortest border-radius CSS.

    Runs in your browserOpen tool

  • Lorem Ipsum Generator

    Generate placeholder paragraphs, sentences or words, in classic Latin or in Arabic filler text.

    NONE
    Runs in your browserOpen tool

  • Color Palette Generator

    Generate colour palettes from a base colour and a harmony, or at random with locks, then export CSS, tokens, Tailwind or a PNG.

    HEX · RGB · HSL
    Runs in your browserOpen tool

  • Color Contrast Checker

    Check the WCAG 2.2 contrast ratio of a text and background colour, with AA and AAA verdicts and the nearest passing colour.

    HEX · RGB · HSL
    Runs in your browserOpen tool