DevTools

Color Converter

Convert colors between HEX, RGB, HSL, HSV, and OKLCH, with a picker, alpha, and a WCAG contrast checker — all in your browser.

Prefer the terminal? See the CLI equivalent →
Loading tool…

About the Color Converter

  • HEX, RGB, HSL, OKLCH & Lab
  • WCAG contrast & color-blindness preview
  • Live swatch preview
  • Instant results
  • 100% private — runs in your browser
  • Free, no sign-up

Colors on the web can be written many ways — HEX, RGB, HSL, and increasingly OKLCH — and it is constantly useful to move between them. This converter takes a color in any of those notations (or a CSS name like “teal”, or the picker) and shows it in every other format at once, with a live preview and full alpha support.

It also checks color contrast against the WCAG accessibility guidelines: pick a foreground and background and see the contrast ratio along with whether it passes AA and AAA for normal and large text. Everything is computed in your browser using exact color math — nothing is uploaded.

Each format has its place: HEX and RGB are the classics; HSL describes a color by hue, saturation, and lightness, which is intuitive to tweak; and OKLCH is a modern, perceptually-uniform space where equal changes look equally different to the eye, making it excellent for building consistent palettes.

How to use it

  1. Enter a color in any format — HEX, rgb()/hsl()/hsv()/oklch(), or a CSS name — or drag the picker (or use the eyedropper to grab any pixel on screen, where supported).
  2. Adjust transparency with the picker’s alpha bar; the preview shows the result over a checkerboard.
  3. Copy the value you need from the HEX, RGB, HSL, HSV, or OKLCH rows.
  4. Set a background color in the contrast checker to see the WCAG ratio and AA/AAA pass/fail for text.

Color formats

HEX
#rrggbb (or #rrggbbaa with alpha). The most common web notation.
RGB
Red, green, blue channels (0–255); rgba() adds alpha.
HSL
Hue (0–360°), saturation, lightness — intuitive for adjusting a color by hand.
HSV / HSB
Hue, saturation, value/brightness — the model most color pickers use.
OKLCH
Perceptual lightness, chroma, hue. Equal steps look equal; great for palettes.
WCAG ratio
Contrast from 1:1 to 21:1. AA needs 4.5:1 (3:1 large); AAA needs 7:1 (4.5:1 large).

Frequently asked questions

What is OKLCH and why use it?+

OKLCH is a modern color space (lightness, chroma, hue) built to be perceptually uniform — a given change in the numbers produces a similar change to the eye across all hues. That makes it far better than HSL for generating consistent tints/shades and accessible palettes, and it can express colors outside the sRGB gamut. Browsers support the oklch() CSS function.

What contrast ratio do I need?+

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (roughly 18px bold or 24px regular). AAA is stricter: 7:1 for normal and 4.5:1 for large. This tool shows the exact ratio and whether each level passes.

Does it support transparency?+

Yes. Use the alpha slider or enter a translucent color (e.g. #rrggbbaa or rgba(...)). HEX shows as 8 digits and RGB/HSL switch to their alpha forms; the preview sits over a checkerboard so you can see the transparency.

How is the contrast computed with transparency?+

The WCAG ratio is defined for opaque colors, so the checker uses each color’s RGB channels directly. For an accurate result on a translucent color, first flatten it against its real background.

Is my data uploaded?+

No. All parsing, conversion, and contrast math run locally in your browser — there is no server involved.

Works well with

Color Converter chains with these tools — send your result straight on:

CSS Unit Converter

Related tools

Code to UML

Turn TypeScript or Java source into a Mermaid class diagram — classes, interfaces, enums, fields, methods, inheritance, and interfaces — rendered live in your browser.

CSS Unit Converter

Convert between CSS units — px, rem, em, pt, vw, vh, and more — with live visual feedback and a full conversion table.

Encoder / Decoder

Encode and decode text with Base64, URL, and Hex — UTF-8 safe, instant, and fully in your browser.

HEIC to JPG Converter

Convert iPhone HEIC/HEIF photos to JPG, PNG, or WebP — fast, multi-threaded batch conversion entirely in your browser. Nothing is uploaded, and location and metadata are removed by default.

Image Compressor

Fast, multi-threaded image compression — shrink many images at once by quality or to a target file size, with WebP/JPEG output and optional resizing, entirely in your browser.

Image Converter

Convert, resize, and compress images between PNG, JPEG, and WebP, or copy them as a Base64 data URI — entirely in your browser.