Color Editor

Convert between HEX, RGB, HSL, CMYK, LAB, LCH, and OKLCH, generate matching palettes, check WCAG contrast, and preview color-blindness — all in one browser-based color workspace.

Overview

Color Editor is a full-featured, browser-based workspace for working with color. Enter a color in any common format, see it converted live to every other space, generate matching palettes and tint/shade/tone ramps, check WCAG contrast for text and UI, and preview how your colors look under common color-vision deficiencies. Every calculation runs locally in your browser — nothing is uploaded, and the whole tool works offline once loaded. Deep-link to any state with a share URL, or open one of the platform's focused single-task pages (like RGB to CMYK or the Contrast Checker) when you only need one thing.

Key Features

  • Enter a color as HEX, RGB, HSL, CMYK, LAB, LCH, a named color, or pasted CSS
  • See every format converted live, with one-click copy
  • Generate complementary, analogous, triadic, tetradic, split-complementary, and monochromatic palettes
  • Build tints, shades, and tones from any base color
  • Check WCAG AA/AAA contrast for text, large text, and UI components
  • Preview protanopia, deuteranopia, tritanopia, and achromatopsia
  • Export CSS variables, JSON, design tokens, and a Tailwind-style color scale
  • Share your exact state with a deeplink URL
  • 100% client-side — nothing you enter ever leaves your browser

Common Use Cases

  • Building a brand palette — Start from one brand color, generate a full set of tints, shades, and harmonies, and export a Tailwind-style color scale.
  • Checking accessibility before shipping — Verify every foreground/background combination in a design meets WCAG AA or AAA before handing it to engineering.
  • Converting a design token to print — Take a HEX brand color and get an approximate CMYK value with clear caveats about print accuracy.
  • Reviewing designs for color-blind users — Preview a palette under protanopia, deuteranopia, and tritanopia to catch colors that read as indistinguishable.

How It Works
1

Enter a color

Type a hex code, rgb()/hsl() value, a named color, or paste a CSS declaration — or pick one visually with the native color swatch.

2

Explore the panels

Switch between Convert, Matching colors, Accessibility, and Color blindness to see every derived value update live.

3

Copy or share

Copy any format, export a full color report, or copy a share link that reopens the editor with your exact color and view.

Frequently Asked Questions

Which color formats does the editor support?
HEX, RGB/RGBA, HSL/HSLA, CMYK, CIE Lab, CIE LCH, OKLCH, XYZ, CSS named colors, and pasted CSS color declarations. All conversions happen instantly as you type.

How accurate is the CMYK output?
It's a browser-safe approximation using an uncalibrated formula — there's no ICC profile, ink set, or substrate involved. Real print CMYK depends on your press's color profile, so treat this as a starting point, not a press-ready value.

Are LAB and LCH values print-accurate?
They're referenced to the D65 white point (the same one sRGB uses) rather than the D50 reference common in print workflows, so they round-trip cleanly with your input color but aren't bit-identical to a print house's D50-referenced Lab.

Why does the palette panel use OKLCH internally?
OKLCH produces more even-looking lightness and hue steps than CIE LCH or plain HSL, so generated harmonies and tint/shade ramps look more consistent. CIE Lab/LCH remain available as explicit conversion targets everywhere else in the tool.

Is anything uploaded to a server?
No. Every conversion, palette, and contrast calculation runs in your browser. Nothing you type or generate is sent anywhere.

Related Tools

Accessible Palette Generator Accessible Text Color Finder Brand Palette Accessibility Checker Color Blindness Simulator Color Converter Complementary Color Generator