How it works

Palette generator

The loop: generate, lock, repeat

On the color palette generator, the space bar (or the generate button) is your main instrument. Every press gives you a complete, considered set of colours. Found a keeper in the middle of an otherwise so-so palette? Click the lock on that swatch and generate again — locked colours stay exactly where they are while everything else reshuffles around them. Lock one, then two, then three, and you can build a palette you truly own in under a minute.

You can ask for anywhere from four to sixteen colours. Four keeps you honest and is usually the better brief; sixteen is lovely for exploring a whole world of a theme before you narrow it down.

History quietly keeps everything you have generated in this session. Pressed generate one time too many and lost a beauty? Step back through the strip and it is still there. Nothing is ever really gone.

What happens by default — our studio modes

Out of the box the generator is not tossing random colours at the screen. Each press picks one of our internal studio recipes — a plan worked out in advance that decides the shape of the whole palette at once: how the colours relate, which ones stay quiet, which one carries the accent, how much light and depth the set gets, how much room neutrals take.

That is why the results feel considered rather than accidental — the proportions were decided as a set, not colour by colour. A different recipe gets drawn next time, so consecutive results feel like cousins rather than clones. You never have to see or choose these recipes. That is the whole point of the default: press until something clicks, and only then start steering.

Auto and Pro: who is driving

Two cards have an Auto / Pro switch. Auto means we choose and keep surprising you. Pro means you choose, and we stop overriding you.

• Color harmony → Pro. Opens the list of harmonies. From that moment every palette is built on the one you picked, and the studio recipe stops deciding the structure. Reach for this when you already know the feeling you are after.
• Palette color → Pro. Opens the base colour field. Type or pick a HEX and the palette grows out of that colour instead of a fresh random one. This is the brand-colour button.

Inside the Palette color card there are two ways to use your colour. Main treats it as a direction — the palette forms around it and the exact shade may drift a little to make the set work. Exact puts that precise HEX into the palette untouched. Use Main when you are exploring around a colour you like, and Exact when a client's brand colour has to survive verbatim.

Colour harmonies

A harmony is simply how far apart the colours sit on the colour wheel. It decides variety and tension — how much the colours agree or argue — and leaves mood and lightness to the other controls.

• Analogous. Neighbours on the wheel. Smooth, calm, everything gets along. The safest place to start, and a natural fit for backgrounds, landing pages and anything that should feel serene.
• Complementary. A colour plus the one directly opposite. Maximum contrast and one unmistakable accent. Brilliant for a call-to-action button; easy to overdo if you give both sides equal space. Let one dominate and keep the other for small, loud moments.
• Split. Your colour plus the two hues either side of its opposite. All the punch of complementary with the shouting turned down. If complementary feels too blunt, this is almost always the answer.
• Compound. A close family around your colour plus a small group near the far side. A quiet main direction with a deliberate counterweight — great for editorial work and interfaces that need one clear highlight.
• Square. Four hues spread evenly around the wheel. Rich, playful and busy. It works beautifully when one colour clearly leads and the other three support — think packaging, kids' brands, illustration.
• Triad. Three evenly spaced hues. Balanced and lively without tipping into chaos. A classic for branding and illustration, and hard to make look bad.
• Mono. One hue, barely moving. All the variety comes from light and depth instead. Extremely tidy and very grown-up — the fastest route to a palette that looks intentional.
• Shades. One hue built into a light-to-dark ladder. Less a brand palette, more a working tool: interface states, chart series, shadows, depth ramps.
• Scattered. A wide, deliberate spread across the wheel with the distances still kept in check. Unexpected pairings that somehow hold together. Try it when everything else feels a bit too polite.

Try this: pick Analogous, generate until you like the family, then switch to Split. You keep the mood you found and gain an accent you would not have thought of.

Mood

If harmony decides which colours meet, mood decides how they behave. It shifts how saturated and how deep everything runs, and how often neutrals, near-whites and inky darks join the party.

One thing worth knowing: a mood is a character, not a fixed set of colours. The same mood can give you a warm palette now and a cool one next time, light in one result and deeper in another. What stays constant is the feeling. So if the first result is not quite it, generate again — you are still inside the same world.

• Studio. The balanced default. The widest range we offer, kept disciplined. When in doubt, stay here.
• Earthy. Clay, sand, moss and stone. Natural, slightly dusty, never shouty. Lovely for wellness, food, craft and anything that wants to feel handmade.
• Pastel. Soft, light and gentle. Air and sugar. Perfect for kids' products, stationery and soft-focus branding — and a nice base for illustration you plan to draw dark lines over.
• Dark. Depth instead of brightness, with plenty of room for near-black. This is the one for night-mode interfaces, film posters and moody hero sections.
• Bright. The mirror of Dark: everything lifted towards the light, with the colour still clearly there. Fresh, open, optimistic — great for spring campaigns and airy layouts.
• Vivid. Saturation pushed as far as it will go, neutrals almost absent. Loud on purpose. Use one of these as an accent and let the rest of your design stay calm.
• Nordic. Scandinavian restraint: limewash, linen, pale wood, sage, frost blue. Almost no darkness at all. Interiors, minimal brands, quiet portfolios.
• Luxe. Deep and expensive-looking — bottle green, sapphire, plum, wine, with a gold highlight showing up more often than not. Anchored by inky tones. Try it for spirits, jewellery and premium packaging.
• Textile. Dyed rather than printed: indigo, madder, saffron, undyed linen. Softly washed, with the texture of fabric about it. A favourite for fashion and interiors.
• Corporate. Business blues, steel and navy, with the rest of the wheel deliberately switched off. It will not hand you a surprise pink, because in a report or a SaaS dashboard a surprise pink reads as a mistake. Presentations, finance, B2B.
• Retro 70s. Mustard, burnt ochre, rust and avocado, with the occasional period turquoise. Warm, confident and instantly nostalgic. Posters, record sleeves, cafés.
• Coastal. Whitewashed wall, sand, shallow water and terracotta. The theme lives on the gap between warm and cool, so it always feels like somewhere by the sea rather than just "summery".
• Happy Colors. Big, clear, cheerful blocks of colour with nothing muddy in them. Made for posters, children's books and anything meant to make someone smile from across the room.

Try this: keep the harmony you like and click through the moods one by one without regenerating. Same structure, ten different personalities — it is the quickest tour of what your idea could become.

Adjust palette

Three sliders that treat the finished palette as one object, so the relationships between the colours survive the change.

• Hue rotates every colour around the wheel together. A green set becomes a blue set with exactly the same character. This is how you keep a palette you love but move it to a different season.
• Saturation makes the whole set more colourful or pulls it towards grey.
• Lightness lifts the whole set into the light or takes it down into the dark.

Reset puts all three back to the middle without regenerating, so you never lose the palette while experimenting.

Sort palette

Reordering only — not a single colour changes. Original is the order it was born in, Lightness runs light to dark, Color family gathers related hues together, Saturation puts the most colourful first, and Accent leads with whatever stands out most. Worth a click right before you export, so the swatches arrive in your design tool in an order that already makes sense.

Seeing it on something real

A row of squares is a promise; a design is the proof. Two cards further down let you check the promise straight away.

• Template preview drops your palette into a ready-made piece of artwork, so you can see how the colours behave when they have shapes, edges and text to live on.
• Your SVG preview does the same with your own file. Upload an SVG — a logo, an icon set, an illustration — and it is repainted in your palette instantly. Generate again and it repaints again. It is the fastest way to audition a hundred palettes on the actual thing you are designing.

Both previews share the same little toolkit. Rotate colors reshuffles which palette colour lands on which shape — same palette, completely different composition, and often the difference between "hmm" and "yes". Lock background color holds the backdrop still while everything on top keeps changing. And Freeze colors in preview pins individual colours in place so one element stays put while the rest of the artwork keeps exploring.

Codes, exports and sharing

Click any colour to open the editor and tune it by hand. Every code — HEX, RGB, CMYK — copies with a single click, and the RGB / CMYK switch flips the whole palette over when the work is heading for print rather than a screen.

When you are happy, download it in whatever your next tool speaks: ASE and ACO for Adobe swatch panels, SVG, PNG and PDF to look at or send to a client, CSS to paste into a stylesheet, and JSON for anything that needs the raw data. There is also a share link that carries the whole palette inside it, so a colleague opens the exact same result in their browser — no account needed at either end.

Tonal check

This is the most useful control on the page and the one most people walk straight past. It takes the colour away and shows you only the values — how light or dark each colour truly is.

Why it matters: two colours can look worlds apart and still be exactly the same brightness. When that happens they stop separating in black-and-white print, on a cheap screen, for a colourblind viewer, or as small text on a background. Switching the colour off for two seconds is the fastest way to catch it — and catching it now is much nicer than catching it after the posters are printed.

• Value. Converts each colour to grey the way your eye actually reads brightness, where green counts for a lot and blue counts for very little. The honest answer to "how light is this colour, really?".
• Desaturate. The plainer conversion, the same one you get by dragging saturation to zero in a graphics editor. Compare it against Value: wherever the two disagree, that colour is trickier than it looks and deserves a second thought.
• 3 Values. Squashes the whole palette into three greys — dark, mid, light. It answers one question: does this set have a real light–mid–dark structure, or is everything hiding in the middle? Posters, logos and illustrations live or die on this one.
• 5 Values. The same idea with more steps. Five levels tell you whether you have enough distinct tones for interface states, charts or shading.
• Off. Colour comes back.

A rule of thumb worth keeping: if two swatches merge into one block in 3 Values, never put them directly on top of each other as text and background. Everything else is a matter of taste.

Palette from a photo

The palette from image tool reads your photograph and works out which colours it is genuinely made of. Your file never leaves your device — the whole thing happens inside your browser, so you can drop in unreleased work without a second thought.

Clean or Studio

The most important switch on the page. Both modes look at the same photo and answer two different questions.

• Clean tells the truth about the picture. Greys, browns and the muddy in-between colours are all included, because they really are there. Reach for it when you want to reproduce the feel of the image faithfully — a photo report, a mood reference, a colour study, a set that has to match the shot it came from.
• Studio looks for the colours a designer would have picked by hand. It hunts for the colour on the lit side of each surface, sets aside the dull and washed-out pixels, and keeps the strongest example from each colour family. That is why the small red jacket in a grey street survives instead of being averaged into the pavement, and why the result has a bit of cinema about it.

Same photo, same number of colours, two completely different palettes. If Clean comes out lifeless, the answer is almost always Studio rather than a different photo.

Detail

This slider decides how closely we look at the picture — how many points across the image actually get inspected.

• Lower takes a squint from across the room. Only the big areas make it in. Fast, and lovely for broad atmosphere.
• Higher studies the photo properly, so small accents and thin details get their chance. Takes a moment longer, and often finds the colour you were hoping for.

If a colour you can clearly see in the photo is missing from the palette, raise Detail first. Nine times out of ten it is simply too small an area to have been noticed yet.

Colours, coverage and Remix

Colors sets how many to pull out, from four to sixteen. The percentage next to each swatch is its real share of the picture, measured across the whole image in both modes — so it stays honest even in Studio, where the palette is curated. The bar underneath shows the same thing as a strip: it tells you at a glance which colour actually rules the photograph and which ones are guests.

Remix keeps every one of your settings and rebuilds the palette from different starting points. Reading colour out of a photo has more than one right answer, and Remix is how you meet the alternatives. Press it a few times before you decide you have the best one.

You can also reorder the codes by dominant — biggest share of the image first — or by accent, which brings the colours that carry the most character to the top. Dominant is what you want when you are matching the picture; accent is what you want when you are looking for the one colour to build a design around.

Working with the result

Click any colour to open the editor and adjust it by hand. Every code copies with a click, the whole palette flips between RGB and CMYK for print, and the same family of exports is waiting at the bottom: ASE, ACO, SVG, PNG, PDF, CSS and JSON, plus a share link and the option to save it to your account.

Gradient creator

The color gradient generator makes everything from a two-line CSS background to a piece of artwork you would happily print poster-size — out of the same handful of colours. Press FIND (or the space bar) for a fresh result, lock the colours you want to keep, and press it again. You can work with two to nine colours, edit any of them directly, and go as far off the map as you like.

Choosing a type

The type changes what kind of thing the gradient is, not just how it looks. Pick it based on where the result is going.

• Mesh — the default, and the one people stay in. Every colour gets its own point that you drag around the canvas, and the colours blend into each other the way wet paint does. This is the modern app-background look: soft, organic, expensive. Four to six colours is the sweet spot — enough to feel rich, few enough that each one still has room to breathe.
• Linear — colours travel across the canvas in one direction. The workhorse. Set the angle with the arrows or the slider, and drag the stops underneath to decide where each transition happens. Two or three colours makes the cleanest CSS background; more than that and a linear gradient starts to look like a flag.
• Radial — colour spreads outward from a centre point you can move. Perfect for a glow behind a product shot, a spotlight, or a soft vignette. Tighten the spread for a focused light source, widen it for atmosphere. Put the lightest colour in the middle and it reads as a light; put the darkest there and it reads as a hole.
• Conic — colours turn around a centre like a colour wheel or a sweeping radar. Both the centre and the point where the turn begins are yours to move. Great for circular graphics, loading rings and angular metallic effects. Watch the seam where the last colour meets the first — either make those two similar so the loop is invisible, or make them very different and let the seam be a deliberate edge.
• Silk — a linear gradient with the light bending through it like fabric. The bands fold and drift instead of running straight, which is what gives it that draped, satin quality. Use two colours. Really — two. Silk is at its most beautiful when there is one clean transition for the folds to play with; each extra colour adds another seam and the fabric starts to look creased instead of flowing. Two close colours give you luxury; two distant ones give you drama.
• Iridescent — the oil-slick, soap-bubble, holographic look. The palette sweeps back and forth rather than looping, so the first and last colours never slam into each other, and a fine ripple of light runs over the top. Three or four colours is where it sings, and it loves colours that sit close together on the wheel — that is what makes it read as one shifting surface rather than a rainbow.
• Liquid — marbled swirls, where the image folds into itself like ink dropped into water. The most painterly of the lot. Two or three colours keeps the marbling readable and elegant; with lots of colours it turns into beautiful chaos, which is sometimes exactly what you want. Try two colours plus a touch of Grain for paper-marbling, or a dark and a bright one for something molten.

Silk, Iridescent and Liquid are painted rather than assembled from standard CSS gradients, so they are for artwork and images rather than code. More on that below.

Colours: harmonies and moods

The Color Harmony & Moods card decides what FIND reaches for next. The first row is structure, the second row is atmosphere, and locked colours are untouched by both.

Studio is the default and shuffles through our own recipes, which is why it keeps producing pleasant surprises. Then come the wheel harmonies: Analogous for smooth, calm blends, Complementary for real contrast, Split for contrast with better manners, Triad for lively three-way sets, and Mono for a single hue moving only through light and depth — quietly the best choice for a background that has to sit behind text.

Two of them are ours. Spark is a close, calm run of neighbours with one opposite colour dropped in as a flash of light. Drift is almost complementary but nudged off the exact opposite — which matters in a gradient, because a true opposite pair passes through a grey middle on its way across, and Drift does not. If a two-colour blend ever looks muddy in the centre, Drift is the fix.

The moods are ready-made worlds you can drop into with one click: Sunrise (warm, airy, sometimes with a slice of morning sky at the edge), Sunset (deeper, and it will give you either a lilac-and-blue evening or a burning orange one), Blush (barely-there pinks, ideal for soft backgrounds), Sorbet (bright citrus, cheerful), Forest (deep greens), Arctic (pale icy blues), Midnight (deep blues for dark interfaces), Nebula (cosmic purples), Cyber (electric teals) and Chrome (near-neutral metal).

Two of them arrive with an opinion about presentation: Nebula switches you to Mesh with Grain on, because that is what makes it look like actual space, and Chrome switches to Linear with Sheen on, because that is what makes metal look like metal. It is only a suggestion — the next FIND hands your own settings back, and if you change the type yourself, your choice stands.

Working in Mesh

Mesh is where the gradient stops being a setting and becomes a canvas. Drag any coloured point straight on the image and the colours follow your hand.

• Custom is the starting layout, and it is deliberately yours. Once you have arranged the points, nothing rearranges them behind your back — FIND changes only the colours, so you can keep your composition and try a hundred palettes in it.
• Scattered spreads the points naturally across the canvas, never letting two crowd each other. The everyday choice.
• Wave runs them along a flowing curve — good for horizon-like, layered backgrounds.
• Edges pushes the colour out to the sides and corners and leaves the middle calmer, which is exactly what you want behind a headline or a product photo.
• The shuffle button next to the layouts deals a fresh arrangement in whichever layout you are in — including a brand new random spread in Custom, if you would rather start from something than from nothing.

Blob size decides how much canvas each colour claims, and Softness decides how gently the blobs melt into one another. Small and soft gives you distinct pools of colour with gentle edges; large and soft gives you that single-wash, almost-one-colour glow. Then click any point to select it and Point size becomes available — that one is per point, so you can give a single colour a bigger say without touching the others. Click the point again, or anywhere empty, to deselect.

A selected point also highlights its swatch in the Colors card, which is genuinely handy: neighbouring gradient colours are often close enough to share a name, and this tells you which one you are actually holding.

Two moves worth knowing. Hover a point and a small bin appears — that removes just that colour and leaves the rest of your arrangement exactly as it was. And you can drag a point clean off the edge of the canvas: the colour keeps glowing in from outside, like a lamp just out of frame. Hover the canvas and you will see a thin ring showing where that point's blob still reaches; grab the ring to bring it home.

Finally, the background row. On Auto we work out a backdrop that suits your colours. Switch to Custom (or close the lock, which does the same thing) and you choose it yourself. It shows through wherever the blobs do not reach, so it matters most when Blob size is small — a deep background behind small bright blobs is a lovely, easy look.

Placing colours along the line

In Linear, Radial and Conic there is a track underneath the gradient with a handle per colour. Drag them to give one colour more room or to squeeze a transition into a narrow band — that is how you get a gradient that is mostly one calm colour with a quick burst of another, which is far more useful in real design than an even blend. Even puts everything back to equal spacing, and it lights up to tell you whether you are currently even or not.

The three effects

These sit under the type buttons and work on top of any gradient. Turn one on and its own strength slider appears underneath.

• Grain lays a fine film-like texture over the image. Beyond looking good, it is the classic cure for banding on large flat backgrounds — a little grain and the transition reads as perfectly smooth. Somewhere gentle is usually right; you want to feel it rather than see it.
• Soft blend makes each colour linger a little longer before handing over. The colours you chose stay recognisable instead of spending most of the canvas as in-between mixtures. Turn it up when a blend feels like it has lost the actual colours.
• Sheen lays a wide, soft band of light across the image — instant glass, satin or polished metal. You get its angle as a separate control, and if you switch on Move sheen on the gradient a white handle appears so you can drag the highlight wherever the light should be falling. Off-centre almost always looks better than dead centre.

Choosing the size

The size button in the top bar decides the shape of the canvas and the size of the file you download — they are always the same thing, so what you see really is what you get. Banner keeps the wide strip you see on the page. Screen covers the usual desktop and video sizes up to 4K. Smartphone and Tablet give you tall, portrait canvases for wallpapers and app screens, and Square is there for social posts and album art.

Switching to a portrait size relays out the mesh points so the colours run top to bottom rather than being squeezed into the narrow side — except in Custom, where your own arrangement is left alone, as always. The very large sizes take a second or two to prepare on export, and the button will say so while it works.

Adjust, reset and start again

Hue, Saturation and Lightness move the finished gradient as a whole, so its internal relationships survive — the fastest way to take a gradient you like into a different colour world. Each card has its own Reset: one for the shape settings, one for these sliders. Neither throws away your colours.

Downloading and sharing

We only offer a format when it can honestly reproduce what is on your screen, so the buttons change depending on what you have built.

• CSS appears for Linear, Radial and Conic when no painted effects are on. Copy it straight to your clipboard or download the file. Mesh, Silk, Iridescent and Liquid have no true CSS equivalent, and neither do Grain and Sheen — so rather than hand you code that looks different from your gradient, we hide the button. (Soft blend is fine — it lives inside the colour stops themselves and travels with the CSS.)
• PNG is always available and always matches the screen exactly, at the size you picked.
• SVG is a true vector for simple linear gradients, and carries the image inside it for everything else — either way the file looks like what you made.
• JSON holds the whole recipe: colours, positions, angles, points, effects, size. It is the format to keep if you want to rebuild this gradient later or hand it to a developer.

Save it to your account and it waits for you on your saved page with an Edit button that reopens it exactly as you left it. Or copy the share link — it carries every setting inside it, so a colleague opens your gradient, not an approximation of it.

Mood Board

The online mood board maker lays out a whole folder of images the moment you choose it. Nothing is uploaded anywhere — the board exists only on your screen, which makes it perfectly safe for client work and unreleased projects.

The layout is automatic, and it respects your images

Nothing is cropped and nothing is squashed. Every image keeps its own proportions, and the board arranges them into rows that fill the width exactly, adjusting each row's height so everything lines up cleanly. Wide and tall images are mixed on purpose so rows stay varied, lonely single-image rows are avoided, and the whole thing is scaled to fit one screen rather than sending you scrolling.

Rearranging

Drag any image onto another and they swap places, and the board instantly recalculates everything around the change. You are moving pictures around, not resizing boxes — which is why it feels less like software and more like laying photographs on a table. Click an image to see it large.

Resizing the window is a tool, not an accident

Every time the window changes shape the board is rebuilt from scratch: how many rows, how many images in each, and how tall they are.

This is worth doing on purpose. With any given set of images there is usually one window shape where the composition simply falls into place — the rows balance and nothing looks stranded. Widen or narrow the window slowly and watch the board reflow until it looks right. Every folder has a different sweet spot, and finding it takes about five seconds.

Saving and sharing

Everything on FindColor works without an account, and every tool gives you a share link that carries the result inside it — open it anywhere and you get the exact same palette or gradient back, with all its settings.

An account adds one thing: a home for the work you want to keep. Palettes and gradients both live on your saved page, each with its own download buttons, and gradients keep an Edit button that reopens them in the creator exactly as you left them. If you press save before signing in, we hold on to what you made and store it the moment you are in — nothing gets lost on the way.

Still stuck?

If something here does not match what you are seeing, or a control still refuses to make sense, tell us — write to [email protected] or use the Contact page. Questions that arrive twice usually end up explained on this page, so you would be doing the next person a favour too.