# Magic Color Tools

> Generate color palettes, extract colors from images, check WCAG contrast and export design tokens. Free, private and runs in your browser.

Magic Color Tools is a free, browser-based color studio for designers and developers. It runs entirely on the client: there is no account, no server-side processing and images are never uploaded. The interface is available in English and Spanish. Every tool shares the same palette, so work done in one module carries over to the others.

## Tools

Each tool is a section of the same single-page app; open it directly with the `m` query parameter.

- [Generator](https://hsl-color.ramirezchristian.com/?m=generator): palettes of 1–16 colors with analogous, complementary, triadic, tetradic, monochromatic, split-complementary and square harmonies; color locking; editing in HEX, RGB, HSL, HSV, OKLCH and CMYK; 50–950 scales with perceptual interpolation; export to TXT, JSON, CSS, SCSS, SVG, PNG, ASE and GPL.
- [Extractor](https://hsl-color.ramirezchristian.com/?m=extractor): extracts dominant, secondary and accent colors from JPG, PNG or WebP images locally in the browser.
- [Accessibility](https://hsl-color.ramirezchristian.com/?m=accessibility): WCAG 2.x AA/AAA contrast checker, palette-wide contrast matrix, fixes that preserve hue, and protanopia, deuteranopia, tritanopia and achromatopsia simulation.
- [Preview](https://hsl-color.ramirezchristian.com/?m=preview): applies a palette to eight interface templates (dashboard, mobile app, corporate website, e-commerce, landing page, branding, poster, game UI) with editable color roles.
- [Color Systems](https://hsl-color.ramirezchristian.com/?m=systems): primitive and semantic design tokens, light and dark modes, interactive states; exports CSS variables, SCSS, JSON, Tailwind CSS and W3C Design Tokens.
- [Color Lab](https://hsl-color.ramirezchristian.com/?m=lab): color mixer (RGB, HSL, LAB, OKLCH), linear/radial/conic gradient studio, palette comparator and color blindness simulator for full interfaces.
- [About and FAQ](https://hsl-color.ramirezchristian.com/?m=about): what the app does, supported formats and exports, privacy, and answers to frequently asked questions.

## Language

- [English](https://hsl-color.ramirezchristian.com/?lang=en)
- [Español](https://hsl-color.ramirezchristian.com/?lang=es)

## Technical notes

- OKLCH is the primary space for scales, mixing and contrast corrections; colors outside the sRGB gamut are reduced in chroma while keeping lightness and hue.
- Contrast uses the WCAG 2.x relative luminance formula. Color blindness uses the Machado, Oliveira and Fernandes (2009) matrices in linear RGB.
- Shareable URLs encode the palette, locked colors, harmony, module and scale.

## Optional

- [Sitemap](https://hsl-color.ramirezchristian.com/sitemap.xml)
- [Author](https://www.rismirez.com/)