Images & Media / Design & Icons

Color Palette Generator

A colour palette generator takes one base colour and derives a set of colours that work together, by applying a fixed rule on the colour wheel rather than by guessing. Pick a scheme — complementary, analogous, triadic, split complementary, tetradic or monochrome — and the tool rotates the base hue by the angles that scheme is defined by, then shows each result as a swatch with its HEX, RGB and HSL value. Hue, saturation and lightness are computed in the browser, so the palette updates as you type or drag the colour picker, and no image or colour ever leaves your device.

How to use

1
Set the base colour
Use the colour picker or type a hex value such as #6366f1 into the field. Three- digit shorthand like #63f works too. The palette updates as you type, and an invalid value keeps the last valid colour instead of blanking the preview.
2
Choose a scheme
Pick complementary, analogous, triadic, split complementary, tetradic or monochromatic. Each one is a fixed set of hue offsets on the colour wheel, and the line under the buttons says what that scheme is good for.
3
Switch the value format
Choose HEX, RGB or HSL and every swatch re-labels itself in that notation — the same colours, just written the way you need them for CSS, Tailwind or a design tool.
4
Copy what you need
Click any swatch to copy its value, or Copy all to put the whole scheme on your clipboard as one value per line. The swatch confirms with a Copied label for a moment.
5
Take the tints and shades
The strip below the palette shows nine steps of your base hue from near-black to near-white. These are what you reach for when you need a hover state, a border or a tinted background that must not introduce a new colour.

Key facts

Complementary colours sit 180° apartOn the colour wheel, a complementary pair is separated by exactly 180° of hue, which is the greatest hue distance possible and therefore the pairing with the strongest contrast. Placing them side by side makes each appear more saturated than it does alone.Source:Colour theory — the artists' colour wheel (Munsell / Itten)
A six-digit hex value is three 8-bit channels#rrggbb encodes red, green and blue as three pairs of hexadecimal digits, each channel holding a value from 0 to 255. That gives 256 × 256 × 256 = 16,777,216 distinct colours in the sRGB space that web browsers use.Source:CSS Color specification (W3C); sRGB IEC 61966-2-1

Frequently asked questions

What is a complementary colour?

A complementary colour is the one sitting directly opposite your base colour on the colour wheel: 180° away in hue. That position is why the pairing produces the strongest contrast available from a two-colour scheme — the two hues differ in every way the eye separates them, so each makes the other look more saturated than it does alone. The effect is useful and also risky. Placed as large blocks of equal size, complements vibrate at the boundary and can look harsh; the usual fix is to let one colour dominate the layout and use the other only for accents, or to soften one side by changing its lightness rather than its hue. Split complementary is the milder version of the same idea: instead of the exact opposite hue you use the two hues 30° either side of it, which keeps most of the contrast but removes the tension. This tool generates both, so you can compare them on the same base colour in one click.

How do I choose a brand colour?

Start from the job the colour has to do, not from what looks nice. A brand colour appears as a tiny favicon, as a solid button, as text on white and behind white text, so the useful test is whether it survives all four. Practically: pick a hue that fits the category you are in, then check its contrast against white and black before committing — this tool prints both ratios, and WCAG asks for 4.5:1 for body text and 3:1 for large text. A mid-lightness colour usually fails both ends, which is why most brand systems keep one saturated primary for accents and a darker or lighter variant of the same hue for text and fills. Generating the monochrome scheme gives you that family immediately, because the hue stays fixed and only lightness moves, so the colours cannot clash. Finally, build the palette around three roles rather than three colours: one primary, one neutral for surfaces and text, and one accent for calls to action. Analogous schemes suit calm interfaces; triadic and tetradic give more energy but need one colour to clearly dominate.

Can I export the palette to a design tool?

Not as a file — there is no download of a .ase, .gpl or JSON swatch file. What the tool gives you instead is the format every design tool already accepts: plain text values you can paste. Switch the format buttons to HEX, RGB or HSL and each swatch shows that notation; clicking a swatch copies the value, and Copy all puts the whole scheme on your clipboard as one value per line. Pasting a column of hex values into Figma, Sketch, Illustrator or Photoshop creates one fill per line, and CSS custom properties, Tailwind config entries and SVG fill attributes all take the same strings. The reason there is no binary export is that these formats are all trivially reproducible from the text, and a download path would mean building a file in the browser that adds nothing you cannot already paste.

Why does the same colour look different on another screen?

Because the numbers describe a colour, not an appearance. A HEX value is a position in the sRGB colour space, and how that position looks depends on the display's brightness, its contrast setting, its backlight and how far its gamut extends beyond sRGB. Two calibrated monitors will agree closely; a phone at 30% brightness beside a laptop at full brightness will not, and neither will a wide-gamut display showing an sRGB value that it has stretched. Ambient light plays a real part too — the same page reads warmer under a warm lamp. This is why colour decisions should be checked on a mid-range screen at ordinary brightness rather than on the best display available, and why contrast ratios matter more than exact appearance: the ratio is computed from the numbers, so it holds on every device even when the perceived colour shifts.

How many colours should a palette have?

Fewer than you think. Working interfaces are usually built from three roles — a primary, a neutral for backgrounds and text, and one accent for actions — and those three are then extended by lightness rather than by adding new hues, so a full system might carry twelve values across only two or three hues. The schemes here reflect that: complementary and triadic give you two or three hues to combine, while monochrome gives you one hue at five lightness levels, and the tint-and-shade strip under the palette gives you nine steps of your base hue for backgrounds, borders and hover states. Adding a fourth unrelated hue is where palettes usually start to look accidental. If you do need more variety, prefer a tetradic scheme and make one of the four dominant: the scheme is balanced by construction, but it only reads as deliberate when the proportions are not equal.

Related tools

CSS Gradient Generator

Build a CSS linear or radial gradient visually: place colour stops, set the angle, alpha and position, then copy the CSS or a Tailwind class.

Favicon Generator

Generate a favicon.ico plus 16, 32, 64 and 128 px PNG icons from a letter, initials or an image. Preview them in a real browser tab, then download the set.

Image Format Converter

Batch-convert images between JPG, PNG, WebP and AVIF in your browser. Drag in a folder, set a quality level, and download a ZIP — nothing is uploaded.