Convert colors between 15 spaces including hex, RGB, HSL and OKLCH and build matching harmonies, or upload a room photo or website screenshot and try new colors on real surfaces. Everything runs in your browser with no account and nothing uploaded, and your work in each tool is kept while you switch between them.
Privacy note: image data stays on your device. The page itself still loads fonts and anonymous analytics from third-party services, so standard details like your IP address and page URL may be visible to them — as with any website.
Convert between 15 colour spaces and build colour harmonies. Copy hex, RGB, HSL and OKLCH instantly. A private, browser-based colour tool.
Every field below is editable — type or paste a value in any space and press Enter. Values marked clamped fall outside that space's gamut and are shown gamut-clipped.
Upload an image to pull its overall palette, or click anywhere on it to grab that exact pixel. Any color you pick flows into the converter, harmonies and tint/shade studio below. Images are processed entirely in your browser — nothing is uploaded.
Click a swatch to load it. It becomes the active color everywhere below.
Relationships are computed in OKLCH, so equal hue rotations produce perceptually even steps — the modern equivalent of classical color wheel theory. Click any chip to copy its hex and open a full detail card: every color space, ten shades and tints, and every harmony for that specific color.
OKLCH hue wheel · markers = active harmony hues
Build a full palette from one color. Tints add white, shades add black, tones add gray — computed in OKLCH so the perceptual spacing stays even. Then check whether it holds up against real-world constraints: WCAG contrast on light and dark backgrounds, and how it looks to the ~8% of men who see color differently.
+ white · lighter
+ black · darker
+ gray · muted
Drop this into your stylesheet. Values are 8-bit hex for maximum compatibility; the base color is also emitted as OKLCH for modern displays.
Spectral converts colors between CSS color spaces — HEX, RGB, HSL, OKLCH and more — and helps you build harmonies and check how colors appear under color-vision deficiencies.
Tip: OKLCH keeps perceived lightness consistent when you rotate hue — ideal for building accessible palettes.
Upload a room photo or website screenshot, select surfaces, try new colours, compare variations, check accessibility, and export results.
Upload a room photo or website screenshot, define separate surfaces, try colors while preserving texture and shadows, compare alternatives, check web contrast, and save the result privately.
The realistic color mode uses the original image’s luminosity so shadows, highlights, and texture remain visible instead of covering the wall with a flat translucent block.
Website mode supports flat recoloring, named design-token surfaces, extracted palettes, CSS-variable export, and a WCAG contrast checker for sampled foreground and background colors.
A sandbox for playing with colors: build palettes, blend gradients, and preview combinations before committing them to a design.
Tip: Check contrast between text and background swatches early — it is the constraint that kills otherwise pretty palettes.