About the JUMI Colour Generator
A free, browser-based tool for building colour palettes and CSS gradients — and checking they are readable before you ship them.
The JUMI Colour Generator is a free online design tool that lets anyone build a colour palette, test it for accessibility and export it as production-ready code in under a minute. There is no sign-up, nothing to install and no watermark on what you make. Everything happens in your browser.
What the tool does
It is really four tools that share one palette:
- The palette generator. Start from a colour you already have — typed as a hex, chosen with a picker, or sampled off your screen — or press Space and let one appear. Ten harmony modes (random, analogous, monochrome, complementary, triadic, pastel, neon, warm, cool and vintage) apply the colour-wheel relationships behind schemes that look deliberate rather than accidental. Lock any swatch and it survives the next generate, so you can hold a brand colour steady and audition companions around it.
- Palette extraction from images. Drop in a photograph, screenshot or logo and the dominant colours come back sorted dark to light. The image is decoded and quantised entirely on your device — it never reaches a server.
- The contrast checker. Pick any two colours from your palette and see the WCAG 2.1 contrast ratio, with clear AA and AAA pass or fail badges for both body text and large text. A contrast strip under the workspace flags neighbouring pairs as you generate.
- Colour vision simulation. Redraw the palette as someone with protanopia, deuteranopia, tritanopia or achromatopsia would see it, so you can spot the pairs your design must not distinguish by colour alone.
- The tonal scale generator. Expand any colour into a ten-step 50–900 scale for a design system, spaced in OKLCH so the steps look evenly separated, with each one labelled by the text colours it can carry at WCAG AA.
- The palette browser. Fifty-two curated palettes, grouped by mood and use case, ready to load into the workspace and adapt.
- The CSS gradient generator. Linear, radial and conic gradients built from your palette, with adjustable stops, angle, smooth blending, a noise overlay to kill banding and an optional slow animation. It outputs plain CSS, a ready-to-paste snippet, or CSS scoped for a YOOtheme Pro custom-CSS field.
When a palette is finished, export it as CSS custom properties, OKLCH (with a hex fallback), SCSS variables, a Tailwind colors config block, JSON design tokens, an SVG of the swatches or a PNG image — or copy a share link that carries the whole palette in the URL.
Why it works in the browser
Every calculation — harmony generation, HSL and Oklab conversion, relative luminance, contrast ratios, colour-vision simulation, image quantisation, gradient syntax, export formatting — runs as JavaScript on your device. Nothing is sent to a server to be processed, which means the tool is fast, works on a patchy connection, and keeps your work private by default. That includes images: one you drop in for palette extraction is read by your own browser and never uploaded. Palettes you save go into your browser's local storage, on your machine, and we never see them.
The flip side is worth knowing: saved palettes do not follow you to another browser or device, and clearing your browser data deletes them. Copy the code, download the PNG, or use the share link — which carries the palette in the URL — for anything you want to keep or move between machines.
Why it's free
Colour tools have a habit of hiding the useful parts behind an account or a subscription — export formats, saved palettes, contrast checking. We wanted the opposite: everything unlocked, immediately, for everyone. The tool is funded by advertising and affiliate links, which is set out in full in our Affiliate & Advertising Disclosure. There is no paywall and no trial to expire.
Who it's for
- Web and product designers building brand palettes and UI colour scales.
- Front-end developers who need CSS variables, SCSS or a Tailwind config, not a screenshot of a palette.
- Page-builder users working in YOOtheme Pro, WordPress or Joomla who want gradient CSS they can paste straight into a custom-CSS field.
- Accessibility-minded teams who need to prove a colour pair passes WCAG AA before it reaches a design review.
- Students, makers and small businesses choosing colours for a first brand, site or print job.
The company behind it
The Colour Generator is made by JUMI Ltd, a UK company building simple, free creative tools that run in the browser. It sits alongside JUMI Pattern Maker and JUMI Ad Animator. The aim across all of them is the same: remove the friction from an everyday creative task — no accounts, no installs, no cost.
Our commitment
Whatever you create here is yours to use, personally or commercially, with no attribution required. We will keep the core tool free, watermark-free and private by default, and we keep adding to the guides and palettes based on what people ask for.
Related: Guides · Contact · Credits & Licences · Terms of Use