Browser 106

no file limit

Inspector color/color-editor

Color Editor

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.

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

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

Set

Color Tools 11

Neighbours

01 Accessible Palette Generator 02 Accessible Text Color Finder 03 Brand Palette Accessibility Checker 04 Color Blindness Simulator 05 Color Converter 06 Complementary Color Generator

Specification

Command: color.color_editor
Set: Color
Input: text
Output: —
Max. bestand: no limit
Batch: single file

Runtime

Engine: native oklch
Threads: single
Isolated: —
WebGPU: —
Memory: —

Transport 0 B

The file is opened, worked on and written back inside this tab. No upload step exists in this tool — there is nowhere for the bytes to go.

Keys

Zoeken: ⌘K
Panels: ⌘1 · ⌘2
Full width: F
All keys: ⌘/

How it works

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.

Explore the panels

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

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

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.

Keys

Zoeken: ⌘K
Panels: ⌘1 · ⌘2
Full width: F
All keys: ⌘/

Gerelateerd · Color Tools