Color Palette Generator — Harmonious Palettes, From Scratch or a Photo
Press the spacebar for a new palette, lock the colours you like, pick a harmony, or pull the palette out of a photo. Export to CSS, Tailwind, SCSS, JSON or PNG.
Click a swatch to select it, the padlock to keep it when generating, the pencil to pick a new colour, the code to copy it.
| HEX | RGB | HSL | |
|---|---|---|---|
| #264653 | rgb(38, 70, 83) | hsl(197, 37%, 24%) | |
| #2a9d8f | rgb(42, 157, 143) | hsl(173, 58%, 39%) | |
| #e9c46a | rgb(233, 196, 106) | hsl(43, 74%, 66%) | |
| #f4a261 | rgb(244, 162, 97) | hsl(27, 87%, 67%) | |
| #e76f51 | rgb(231, 111, 81) | hsl(12, 76%, 61%) |
:root {
--color-1: #264653;
--color-2: #2a9d8f;
--color-3: #e9c46a;
--color-4: #f4a261;
--color-5: #e76f51;
}
Palette from an image
Upload a photo to pull its dominant colours into the unlocked swatches, then click anywhere on the image to sample an exact pixel into the selected swatch (colour 1). The image stays on your device.
Palettes are generated in your browser and uploaded images never leave your device. Browse all free tools.
Found a problem, or something that could be better? We read every message and we fix things quickly.
This free color palette generator builds a set of 2 to 10 colours that work together. Press the spacebar (or Generate) for a new palette, lock the swatches you want to keep, and generate again until the rest fit. Choose a harmony such as analogous, complementary or triadic, or upload a photo and pull its dominant colours straight into the palette. Every swatch shows its HEX, RGB and HSL values and the text colour, black or white, that stays readable on it.
Most generators rotate the hue in HSL, which produces palettes where the yellow glares and the blue sinks, because HSL lightness has nothing to do with how bright a colour looks. This one computes harmonies in OKLCH, a perceptual colour space in which equal lightness looks equally light, then spreads the lightness so every palette has dark, mid and light tones you can actually use for text, backgrounds and accents. It cannot tell you whether a palette suits your brand. That is still your call, and the contrast checker linked below tells you which pairs are legible.
How to use
- Press the spacebar or the Generate button to create a palette. Use − and + to choose between 2 and 10 colours.
- Pick a harmony from the menu. Random gives varied but balanced sets; the others follow classic colour-wheel rules.
- Click the padlock on any swatch you like, then keep generating: locked colours stay, and the harmony is rebuilt around the first locked one.
- Click the pencil to choose a colour by hand, or type a HEX value in the editor below the strip. To start from a photo, upload it under Palette from an image and click the image to sample exact pixels.
- Export the palette as CSS variables, a Tailwind config, SCSS or JSON, download a PNG, or copy the share link.
Frequently asked questions
How do I generate a color palette?
Press the spacebar on this page. Each press creates a new palette from the selected harmony. When a colour looks right, lock it with the padlock and keep pressing: only the unlocked swatches change, and the new colours are chosen to harmonise with the locked one. Five colours is a good default for a website: one dark for text, one light for backgrounds, a primary, a secondary and an accent.
What are complementary, analogous and triadic colours?
They are positions on the colour wheel. Complementary colours sit opposite each other (180 degrees apart), which gives the strongest contrast. Analogous colours are neighbours, roughly 30 degrees apart, and feel calm and cohesive. Triadic colours are three hues spaced 120 degrees apart; split-complementary uses a base hue plus the two hues either side of its complement (150 and 210 degrees); tetradic, or square, uses four hues 90 degrees apart. Monochromatic keeps one hue and varies lightness and saturation.
Can I get a color palette from an image?
Yes. Upload a photo under Palette from an image. The tool shrinks it to at most 200 pixels, which averages out noise, and groups the pixels with k-means clustering in the OKLab colour space, so the result reflects the colours you see rather than raw pixel counts. The largest clusters fill your unlocked swatches, and the share of the image each colour covers is listed. Click anywhere on the image to sample one exact pixel into the selected swatch. The image never leaves your browser.
How do I use a palette in CSS or Tailwind?
Choose the CSS variables export and paste the :root block into your stylesheet, then use the colours as var(--color-1) and so on. The Tailwind export is a theme.extend.colors block that adds palette-1 to palette-N, so you can write bg-palette-1 or text-palette-3. Rename the variables to their role (primary, surface, text) once you have decided what each colour is for; names like color-3 do not survive a redesign.
Why does this generator use OKLCH instead of HSL?
Because HSL lightness is not perceived lightness. In HSL, pure yellow and pure blue are both 50 percent lightness, yet yellow looks about as bright as a light grey and blue looks almost black. Rotating the hue in HSL therefore produces sets that are unbalanced in brightness. OKLCH, defined in CSS Color Level 4 and supported by every current browser, separates lightness, chroma and hue so that rotating the hue keeps the apparent brightness the same. Colours that fall outside the sRGB range are brought back by lowering chroma, keeping hue and lightness.
Can I share or save a palette?
Copy the share link: it contains the colours in the address (for example ?colors=264653-2a9d8f-e9c46a), so anyone who opens it sees the same palette, and you can bookmark it. Nothing is stored on a server. You can also download a PNG of the swatches with their HEX and RGB values for a mood board or a client email.
Turning a palette into a usable UI colour system
A palette of five pretty colours is not yet a design system. What a site needs is roles: a text colour with at least 4.5:1 contrast on the background, a background and a slightly different surface for cards, one primary colour for buttons and links, and one accent used sparingly. The 60-30-10 rule from interior design is a reasonable starting point: about 60 percent neutral background, 30 percent secondary colour, 10 percent accent.
• Text: the darkest colour, or near-black tinted with your primary hue. Pure #000 on pure #fff is harsher than it needs to be.
• Background and surface: the lightest one or two colours. Many generated palettes include one; if not, lock your primary and switch to Monochromatic to get light tints of it.
• Primary: the colour that says 'click me'. Check that white or black text on it passes 4.5:1 (the readable text colour on each swatch is a quick first check, the contrast checker the real one).
• Accent: the most saturated colour, for highlights and badges, not for large areas.
Then generate tints and shades of the primary (lighter for hover backgrounds, darker for pressed states) instead of introducing new hues. Locking the primary and switching to Monochromatic with 7 to 10 colours gives you that ramp.
Harmony modes and when each one works
• Analogous: neighbouring hues. Calm, natural, hard to get wrong. Good for content sites, wellness and food brands. Needs a contrasting neutral for text.
• Monochromatic: one hue, many lightness steps. The safest choice for dashboards and apps, where colour should support data rather than compete with it.
• Complementary: two opposite hues. Maximum contrast and energy; use one as the main colour and the other only for calls to action, or it looks like a sports kit.
• Split-complementary: one hue plus the two either side of its opposite. Nearly as lively as complementary with less tension; a good default for marketing sites.
• Triadic and tetradic: three or four evenly spaced hues. Playful and bright, suited to children's products, games and illustration. Let one hue dominate and keep the others small.
• Random (pleasant): hues drift by 20 to 70 degrees from one swatch to the next, with lightness spread across the set. Good for exploring before you commit to a rule.
How colour extraction from an image works
The uploaded image is drawn onto a canvas no larger than 200 pixels on its long side. Downscaling averages neighbouring pixels, which removes JPEG noise and fine texture that would otherwise produce dozens of near-identical colours. Fully transparent pixels are ignored.
The remaining pixels are converted to OKLab and grouped with k-means clustering, where k is the number of swatches. The starting centres are chosen by a fixed rule (the pixel closest to the image's average colour, then repeatedly the pixel farthest from every centre so far), so the same image always gives the same palette, and small but distinct areas such as a red jacket in a green landscape are not lost. Each cluster's average becomes a swatch, ordered by how much of the image it covers.
Extraction finds the colours that are there, not necessarily the ones you would design with. Photos are dominated by muted mid-tones, so lock the one or two colours that capture the image and generate the rest, or click the image to sample a specific highlight.
Related free tools
- Contrast Checker — Check text and background colours against WCAG 2.x AA and AAA, see the APCA Lc value, and get the nearest colour that passes.
- Color Picker & Converter — Pick any color from anywhere on your screen, or convert instantly between HEX, RGB, and HSL.
- CSS Gradient Generator — Build linear, radial and conic gradients with draggable colour stops, an angle dial and presets. Copy the CSS or a Tailwind class.
- Box Shadow Generator — Design layered box-shadow and text-shadow effects with live preview, presets for elevation, neumorphism and glow, and copy the CSS.