maratoolColor tools
Generate gradients, shades, palettes — check contrast, convert between color spaces. All running locally.
About these color tools
This page collects utilities for the color decisions that come up in product design and front-end work — checking whether a foreground passes contrast against a background, generating a full palette from a brand color, converting a value between hex, RGB, HSL, and OKLCH, and finding harmonious accent colors that work alongside a base. They are aimed at designers, developers, and anyone who has had to ship a UI that needs to look right and meet accessibility requirements.
What is on this page
The tools group around four jobs. Accessibility tools answer whether a combination will work — the contrast checker computes the WCAG ratio between two colors and tells you whether it passes AA or AAA for normal and large text, the standard most teams target. Conversion tools move a single color between formats — the color converter reads hex, RGB, HSL, HSV, CMYK, and OKLCH, useful when one tool exports in one format and your code expects another. Palette tools produce sets of related colors from a starting input — the color shades generator builds the lighter and darker steps you need for hover states, borders, and surfaces, and the palette generator creates a full multi-color set you can drop into a design system. Harmony tools find colors that pair well with a base — the harmony generator outputs complementary, analogous, triadic, and split-complementary schemes from a single seed.
Which to use when
Use the contrast checker before locking in a text color over a background — it is the fastest way to catch an accessibility failure during design rather than during audit. Use the shades generator when you need a coherent scale for a single brand color (50 through 900, in Tailwind's convention). Use the harmony generator when you have a primary and need an accent or a secondary that does not clash. Use the converter when copying a value out of a design file and into CSS, or when working in OKLCH for perceptual uniformity.
Privacy
All color tools on this page run in your browser. Color values you enter, palettes you generate, and any exports stay on your device — nothing is uploaded, logged, or stored on any server.