Is Spectrum free to use?

Yes, Spectrum is completely free. There are no paid plans, no trial periods, and no features locked behind a paywall. All 7 tools are free for everyone, forever.

Do I need to create an account?

No account is needed. Open the site and start using any tool immediately. Your color history is saved to your browser locally, not to a server.

Are my images uploaded to a server?

No. Images are processed entirely in your browser using the HTML Canvas API. Your files never leave your device and are never sent to any server.

How do I extract colors from an image?

Upload an image (drag & drop, URL, or paste), then click anywhere on it to pick the color at that pixel. The color appears instantly in HEX, RGB, HSL, and more formats.

What is WCAG contrast ratio and why does it matter?

WCAG contrast ratio measures how different two colors look against each other. A ratio of at least 4.5:1 is required for normal text (AA level) to be readable by people with low vision. Spectrum's contrast checker tests your color pairs against all WCAG 2.1 levels.

What is color blindness and how common is it?

Color blindness (color vision deficiency) is a reduced ability to distinguish certain colors. About 8% of men and 0.5% of women are color blind in some way. The most common types are red-green (protanopia, deuteranopia) and blue-yellow (tritanopia). Spectrum simulates 7 types of color vision.

What are complementary colors?

Complementary colors sit directly opposite each other on the color wheel — red and green, blue and orange, yellow and purple. Placed side by side, they create the highest possible contrast and make each color appear more vivid.

What color formats does Spectrum support?

Spectrum supports HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, LAB, LCH, XYZ, YUV, YCbCr, HSI, and several technical formats like integer, binary, and Base64. You can copy any format with a single click.

SpectrumGitHub

CSS Generator

Gradient Maker

Design CSS gradients with a live preview.

Type

Direction90°

Colors

100%

Presets

Export

background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Quick Tips

• Tap presets to instantly apply
• Click color swatches to edit
• Use % inputs for precise positioning