RunLocalTools

Color Converter: HEX, RGB, HSL, OKLCH, Lab & P3 — Contrast, Palettes & Batch

Free color converter for HEX, RGB, HSL, HWB, CMYK, Lab, OKLCH and Display P3, with WCAG contrast, color-blindness simulation, palettes and batch file conversion. Runs in your browser.

What it does

Paste any color — a hex code, an rgb() or oklch() value, a CSS name like tomato, even an Android 0xFFFF5C39 — and get it back in every format at once: HEX, RGB, HSL, HSV, HWB, CMYK, CIE Lab, LCH, OKLab, OKLCH, XYZ, linear sRGB, Display P3 and a decimal integer. Every field is also an input, and each has its own copy button.

Beyond converting, it checks WCAG contrast, simulates color blindness, builds harmonies, a 50–950 shade ramp and tints/tones/shades, and batch-converts every color in a CSS, SCSS, JSON, CSV or text file.

How it works

Colors are held as sRGB floats with an alpha channel, and every format is computed from that single value, so edits never drift through repeated round-trips.

  • Wide-gamut colors stay exact. An oklch() or color(display-p3 …) value outside sRGB keeps its exact Lab/OKLCH/P3 numbers. The sRGB formats (HEX, RGB, HSL…) show the nearest in-gamut color, found by reducing OKLCH chroma while holding lightness and hue, and a notice tells you when that happened.
  • Lab and LCH use the CSS D50 white point (Bradford-adapted from D65), matching browsers.
  • Shade ramps are built in OKLCH, so steps look evenly spaced to the eye. The step closest to your color’s lightness is replaced by your exact color.
  • Contrast uses the WCAG 2 relative-luminance formula. Colors with transparency are blended over the background first, and ratios are floored (never rounded up) so a 4.49 never displays as a pass.
  • Color-blindness simulation uses the Machado et al. (2009) matrices at full severity, applied in linear light.
  • Batch extraction finds #rgb, #rrggbb, 4- and 8-digit hex, 0x…, and rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(), hsv() and cmyk() notation.

How to use it

  1. Paste a color into Paste any color, use the picker, or sample one from your screen with the eyedropper (browsers that support it).
  2. On the Convert tab, copy any format, or edit any field to change the color.
  3. Drag the Alpha slider for transparency. 8-digit hex and rgba()/hsla() update automatically.
  4. Open Analyze to test contrast against a background and preview color-blindness. If it fails, the tool suggests the nearest passing shade.
  5. Open Generate for harmonies, a shade ramp (exportable as CSS variables, a Tailwind config, SCSS or JSON) and tints, tones and shades.
  6. For many colors at once, open Batch, paste text or drop a file, pick an output format and sort order, then copy or download CSV, JSON, CSS variables, SCSS or a GIMP .gpl palette.
  7. Use Saved to keep a named palette. Code gives ready-to-paste CSS, SCSS, Tailwind, Swift, Kotlin, Android XML, Flutter and JSON snippets.

Supported formats

Input and output: HEX (3, 4, 6, 8 digits, with or without #), RGB/RGBA, HSL/HSLA, HSV/HSB, HWB, CMYK, CIE Lab, LCH, OKLab, OKLCH, XYZ (D65), linear sRGB, Display P3, decimal integer, CSS named colors, and 0xAARRGGBB.

Syntax options: legacy (rgb(255, 92, 57)) or modern (rgb(255 92 57 / 0.5)), and 8-digit hex as #RRGGBBAA (CSS) or #AARRGGBB (Android).

Batch input files: .css, .scss, .sass, .less, .txt, .json, .csv, .svg, .html, .md, .xml, .gpl and other plain-text files.

FAQ

How do I convert HEX to RGB or HSL?

Paste the hex code (with or without #) into the box at the top. The RGB and HSL fields fill in immediately, each with a Copy button. Going the other way works too: type into the RGB or HSL field and the HEX updates.

Can I convert OKLCH to HEX?

Yes. Paste an oklch() value. If it fits inside sRGB you get an exact hex. If it doesn’t, the tool shows the nearest in-gamut hex and warns you, while the OKLCH, Lab and P3 fields keep the exact original values.

Why is my CMYK value different from my printer or Photoshop?

CMYK here is a simple device-independent formula, not an ICC print profile. Real print conversion depends on the ink, paper and profile, which a browser tool can’t know. Use it for approximate values only.

What do the contrast ratings mean?

WCAG 2 asks for 4.5:1 for normal text (AA) and 7:1 for AAA. Large text needs 3:1 (AA) or 4.5:1 (AAA), and UI components and graphics need 3:1. The Analyze tab shows pass/fail for each and, when a color fails, the closest shade of the same hue that passes.

Is #AARRGGBB the same as #RRGGBBAA?

No. CSS puts alpha last, Android puts it first. Switch the 8-digit hex order toggle to match what you’re working with; it controls both how 8-digit hex is read and how it is shown.

Why was my pasted number read as hex and not decimal?

Bare digit strings of 3, 4, 6 or 8 digits are read as hex, because that is what they almost always are. To enter a decimal color integer, use the Decimal field or prefix the value with int:, for example int:16711680.

Privacy

Everything on this page runs in your browser. Conversion, contrast checks, palettes and batch extraction are all local, and no feature of this tool uses the internet. Nothing you type, paste or drop is uploaded.

Your last color, settings, recent colors and saved palette are stored in this browser. A file or text you add to Batch is also kept in this browser so it survives a refresh; use Clear saved batch input to remove it. The eyedropper is a native browser feature that reads one pixel you click and sends nothing anywhere.

Limitations

  • CMYK is an approximation, not a print profile.
  • Batch extraction can’t tell a color like #bad from an ID or anchor with the same letters. Selectors followed by { and href/url() references are skipped, but check the list if you scan HTML.
  • The eyedropper only appears in browsers that support it and may be blocked inside some embeds.
  • Color-blindness simulation is an approximation to help design decisions, not a diagnosis.