Magic Color Tools

Magic Color Tools is a free color studio for designers and developers. Generate harmonious palettes, extract colors from images, check accessibility, preview palettes on real interfaces, build design systems and export everything to the format you need. It works entirely in your browser: no sign-up, no server and no image uploads.

What you can do

• Generate palettes of 1 to 16 colors with analogous, complementary, triadic, tetradic, monochromatic, split-complementary and square harmonies.
• Lock colors, edit them in HEX, RGB, HSL, HSV, OKLCH or CMYK and build full 50–950 scales with perceptual interpolation.
• Extract dominant, secondary and accent colors from any JPG, PNG or WebP image without uploading it.
• Check WCAG 2.x AA/AAA contrast, fix failing pairs and simulate four types of color blindness.
• Preview your palette on eight real interface templates with reassignable color roles.
• Create light and dark design systems with primitive and semantic tokens and interactive states.
• Mix colors, build CSS gradients and compare palettes side by side.
• Export CSS, SCSS, JSON, Tailwind CSS, Design Tokens, SVG, PNG, ASE and GPL.

Frequently asked questions

What is Magic Color Tools?

Magic Color Tools is a free, browser-based color studio. It generates color palettes, extracts colors from images, checks WCAG contrast, simulates color blindness, previews palettes on real interfaces, builds design systems with tokens and exports the results.

Is it free, and do I need an account?

It is free and there is no account or sign-up. Your palettes and preferences are stored only in your own browser.

Are my images uploaded to a server?

No. Color extraction runs locally in your browser, so your images never leave your device.

Which color formats and color spaces are supported?

HEX, RGB, HSL, HSV, OKLCH and CMYK in the editor, plus LAB and LCH conversions. OKLCH is the main space for scales, mixing and contrast fixes because it is perceptually uniform.

How do I check whether my colors are accessible?

Open the Accessibility module, choose a text and a background color and read the WCAG 2.x contrast ratio for AA and AAA. It can also analyze every pair in your palette, suggest fixes that keep the original hue and simulate color blindness.

What can I export?

Palettes can be exported as TXT, JSON, CSS, SCSS, SVG, PNG, ASE (Adobe Swatch Exchange) and GPL (GIMP). Design systems can be exported as CSS variables, SCSS variables, JSON, Tailwind CSS and Design Tokens.

Is it available in other languages?

Yes. The whole interface is available in English and Spanish, and it supports automatic, light and dark themes.