JUMI Colour Generator

A good palette is rarely a lucky accident. Whether you are branding a business, designing a website or decorating a nursery, the palettes that feel effortless almost always follow a handful of simple rules. Here is the thinking behind this tool — and how to get the most out of it.

Start with one anchor colour

Most strong palettes grow outwards from a single colour with a job to do: the brand colour on your logo, the dominant tone in a hero photograph, or simply a hue you know your audience responds to. Put it into Base colour at the top of the workspace — typed, picked, or sampled off your screen — and press Build a palette around it. If the colour lives in an image rather than in your head, drop that image into the extract panel and take the swatch you want from there. Either way your colour is locked, so you can press Space as many times as you like and audition hundreds of companions for it in a couple of minutes.

Understand what the harmony modes are doing

Each harmony mode is a small piece of colour theory. Analogous palettes take neighbouring hues on the colour wheel — blues into teals into greens — and read as calm and cohesive, which suits editorial sites and wellness brands. Complementary palettes pair opposite hues, such as orange against blue, and create the strongest possible contrast; they are ideal when you need a call-to-action button that genuinely pops. Triadic palettes space three hues evenly around the wheel for a balanced but lively feel, and monochrome palettes vary only the lightness and saturation of a single hue — the safest route to something that always looks intentional.

The mood-based modes shortcut the same theory: Pastel drops saturation for softness, Neon pushes it for energy, Warm and Cool restrict the wheel to reds-through-yellows or blues-through-greens, and Vintage mutes everything towards retro print tones.

Balance with the 60-30-10 rule

Interior designers have used this ratio for decades and it translates perfectly to screens: give your dominant colour about 60% of the design (backgrounds, large surfaces), a secondary colour about 30% (cards, sections, navigation) and an accent about 10% (buttons, links, highlights). A five-colour palette from the generator maps neatly onto this — pick one quiet colour to dominate, one to support, and save the loudest swatch for the smallest role. When every colour is shouting, nothing is.

Test in context before you commit

Colours behave differently next to each other than they do in a neat row of swatches — a phenomenon called simultaneous contrast. Before you ship a palette, try it at realistic proportions: use Use for gradient to see colours blending into one another, check pairs in the contrast checker, and download the PNG to drop into your mockup. If a palette only looks good as evenly sized stripes, it is not finished yet.

Want the theory behind the harmony modes in more depth? Read our full guide: Colour theory basics — combine colours with confidence.

Roughly one in twelve men and one in two hundred women have some form of colour-vision deficiency, and everyone struggles with low-contrast text on a phone in sunlight. Accessible colour is not a legal box-tick — it is the difference between a design people can use and one they quietly abandon.

What the numbers mean

The Web Content Accessibility Guidelines (WCAG) measure the contrast ratio between two colours on a scale from 1:1 (identical) to 21:1 (black on white). The built-in checker gives you the ratio plus a pass or fail against each threshold:

• 4.5:1 — AA for body text. The minimum for normal-sized text. Treat this as non-negotiable for paragraphs, labels and form fields.
• 3:1 — AA for large text. Headlines of roughly 24px and up (or 19px bold) can get away with less contrast because their shapes are easier to resolve.
• 7:1 — AAA. The enhanced standard, worth aiming for in reading-heavy interfaces and anything used by older audiences.

Practical habits

Never rely on colour alone to carry meaning — pair red/green states with icons, labels or weight changes. The Vision check control under the workspace makes this concrete: switch to deuteranopia and any two swatches that merge into one are a pair your design must not distinguish by colour alone. Check your real text-on-background combinations too, not just adjacent swatches: the contrast strip flags neighbouring pairs, but the checker lets you test any foreground against any background. And remember that a palette that fails for body text may still be perfectly usable for illustrations, charts and decorative gradients — the rules exist to keep reading comfortable.

For colour blindness, non-text contrast and a full testing workflow, see the complete guide: Accessible colour — a practical guide to WCAG contrast.

Gradients have grown up. After years of flat design they are back everywhere — hero sections, app icons, glassy cards — because they add depth without adding image weight. A CSS gradient is generated by the browser, so it costs no download, scales to any resolution and can even be animated.

Choosing a type

A linear gradient blends along a straight line and is the workhorse: set the angle to roughly 135° for the diagonal sweep most hero sections use. A radial gradient blooms outwards from an origin point, which is lovely for spotlight effects and soft background glows — try moving the origin off-centre. A conic gradient sweeps around the origin like a colour wheel and produces the most contemporary results, from pie-chart effects to iridescent, holographic backgrounds.

Stops, smoothness and grain

Two or three stops taken from the same palette almost always beat five random ones — that is exactly what the Use for gradient button is for, carrying your harmonised palette straight into the stops list. If you can see hard bands where colours meet, nudge the stop positions apart or enable Smooth blend, which eases the transitions. A subtle noise overlay is the designer's trick for hiding the banding that wide, gentle gradients can show on large monitors, and it adds a tactile, printed feel at the same time.

Animation, responsibly

An animated gradient makes a hero feel alive, but keep it slow — the default 9-second cycle is deliberately gentle — and respect users who prefer reduced motion by wrapping the animation in a prefers-reduced-motion media query in production. The generated CSS includes its @keyframes block ready to paste; keep that block outside any element selector.

For syntax, colour-stop tricks and banding fixes, read the full guide: CSS gradients explained — linear, radial and conic.

Is the JUMI Colour Generator really free?

Yes — completely. There is no account, no watermark, no export limit and no premium tier. Running costs are covered by advertising and affiliate links, which is how we keep the tool free for everyone; our Affiliate & Advertising Disclosure explains exactly how that works.

Can I use the palettes and gradients commercially?

Yes. Colours themselves cannot be copyrighted, and everything you generate here is yours to use in personal and commercial projects — websites, branding, print, products — with no attribution required.

Where are my saved palettes stored?

In your browser's local storage, on your device. Nothing you create is uploaded to our servers. That also means saved palettes will not follow you to another browser or machine — so download the PNG or copy the code for anything you want to keep permanently.

What export formats are supported?

CSS custom properties, OKLCH (with a hex fallback), SCSS variables, a Tailwind colors config block, JSON design tokens, SVG swatches and a PNG image of the palette. Tonal scales export separately as CSS, SCSS or a Tailwind block. Gradients export as plain CSS, a ready-to-paste snippet, or CSS scoped for a YOOtheme Pro custom-CSS field.

Can I start from my own brand colour?

Yes. Type or paste the hex into Base colour at the top of the workspace — or use the colour picker, or Pick from screen in Chrome and Edge to sample any pixel on your display — then press Build a palette around it. Your colour is locked and the harmony mode fills in the rest. You can also type over the hex on any individual swatch; editing a swatch locks it so the next generate leaves it alone.

Can I get a palette from a photo or a logo?

Yes. Drop an image into the Extract a palette from an image panel and the dominant colours come back sorted from dark to light, ready to load into the workspace. The image is decoded and analysed entirely in your browser using a median-cut and k-means quantiser — it is never uploaded to us, and we never see it.

How do I share a palette or move it to another device?

Use Copy share link. The palette is encoded in the URL itself, so anyone who opens the link sees exactly your colours, and it works as a bookmark or a way to move a palette between your own machines. The address bar also keeps up with your palette as you work, so you can bookmark at any point. Saved palettes, by contrast, live only in the browser you saved them in.

What is a tonal scale, and when do I need one?

A tonal scale takes one colour and expands it into ten steps — numbered 50 (lightest) to 900 (darkest) — giving you the tints and shades a real interface needs for hover states, disabled controls, borders and tinted backgrounds. Our steps are spaced in OKLCH, a perceptually uniform colour space, so they look evenly separated rather than merely being evenly numbered, and each step is labelled with the text colours it can carry at WCAG AA. See the design system guide for how to name and ship them.

Can I check my palette for colour blindness?

Yes — the Vision check chips under the workspace redraw your palette as someone with protanopia, deuteranopia, tritanopia or achromatopsia would see it. Around 1 in 12 men and 1 in 200 women have some colour-vision deficiency. Your hex values, exports and contrast ratios never change; only the on-screen preview does. If two swatches become indistinguishable, make sure nothing in your design depends on telling them apart by colour alone.

What is the difference between HEX and RGB?

They describe the same colour in different notations. HEX (#3DB3CB) packs the red, green and blue values into six hexadecimal digits and is the most common shorthand in web design; RGB (rgb(61, 179, 203)) lists the same three values in decimal and is easier to manipulate in code. Use whichever your workflow prefers — the tool copies both.

How many colours should a palette have?

For most projects, three to five. Three gives you a dominant, a support and an accent — enough for the 60-30-10 rule. Five adds flexibility for states and illustration. Beyond six, palettes get hard to apply consistently; if you need more variety, extend a colour with tints and shades rather than adding new hues.

How do I know if two colours are accessible together?

Use the contrast checker above: pick your text colour as the foreground and your surface colour as the background, then look for a ratio of at least 4.5:1 for body text (AA) or 3:1 for large headlines. The AA and AAA badges show at a glance which uses each pair is suitable for.

The sections above are a summary. If you want the detail — how to name a tonal scale once you have generated one, what OKLCH fixes that HSL cannot, how to get a palette into a page builder, or what to do when a brand colour will not pass contrast — it is all written up and free to read.

• Guides & tutorials — colour theory, WCAG contrast, colour models, brand palettes, design-system tokens, dark mode and CSS gradients.
• Palette & gradient examples — ready-made palettes with hex codes and gradient CSS you can copy straight into a project.
• The blog — colour psychology without the mythology, ten website colour schemes, modern gradient use, and rescuing a brand colour that fails contrast.
• YOOtheme Pro — moving a palette into the style customiser and pasting gradient CSS into an element's custom CSS field.
• About the tool — what it does, how it works entirely in your browser, and why it is free.