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.
Enter a color in any format, or pick one visually.
Read the equivalent values in every supported color space, ready to copy.
Generate harmonies (complementary, analogous and others) built in the perceptual OKLCH space.
Use the color-blindness simulation to confirm your palette stays distinguishable.
Copy any value straight into your stylesheet.
Tip: OKLCH keeps perceived lightness consistent when you rotate hue — ideal for building accessible palettes.
Private by design
This tool processes the files and text you select inside your browser. It does not upload their contents to Azad University. Your original files remain unchanged unless you explicitly download a new result.
Browser compatibility
Modern Chrome, Edge, Firefox, and Safari are recommended. Very large files may be limited by the memory available to your browser and device.
Convert & harmonize
Color Converter — Azad University
Color Converter
Every CSS color space, one page — convert, pick, harmonize.
sRGBP3Rec.2020
#4AA8FF
outside sRGBsRGB edgeP3 edge
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.
Legacy & standard gamut — sRGB
Wide gamut & HD
Perceptually uniform
Color matching — CIE XYZ
Colors from a photo
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.
Drop an image or browse
JPG, PNG, WebP, GIF — click the loaded photo to pick a pixel
—
Photo palette
Click a swatch to load it. It becomes the active color everywhere below.
Color wheel harmonies
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
Variations, contrast & color-blindness
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.
10
Tints
+ white · lighter
Shades
+ black · darker
Tones
+ gray · muted
Contrast on white
Aa
—
Contrast on black
Aa
—
Color-blindness simulation — base color vs. complementary
Normal visiontrichromatic
Protanopiano red · ~1% of men
Deuteranopiano green · ~6% of men
Tritanopiano blue · rare
#000000
Tints — 10 steps toward white
Shades — 10 steps toward black
Harmonies
CSS custom properties
Drop this into your stylesheet. Values are 8-bit hex for maximum compatibility; the base color is also emitted as OKLCH for modern displays.