Press Generate (or the space bar) for a fresh palette, lock the colours you want to keep, or pull a palette straight out of a photo or logo. Export it in the format your project uses.
:root {
}Pyalm designs and builds fast, conversion-focused websites in Next.js — the same stack these tools run on. If you'd rather have it built than fiddle with CSS, talk to us.
Random colours rarely look good side by side. The generator builds palettes from colour-theory harmonies — neighbouring hues for calm schemes, opposite hues for energy, evenly spaced hues for balance — and keeps saturation and lightness in a pleasing range.
Upload your logo or a brand photo and the extractor finds its dominant colours, so your website, social graphics and documents match what you already have.
📖 Read the full guide: How to Choose a Brand Color Palette (That Works on Screen and Paper)
Convert between HEX, RGB, HSL, HSV, CMYK and OKLCH — and check WCAG contrast.
Design layered CSS box shadows visually and copy the CSS or Tailwind class.
Design 1200×630 social share images for links on LinkedIn, X, WhatsApp and Facebook.
Typically one or two primary colours, one accent, and a set of neutrals (greys or tinted off-whites) for text and backgrounds. Five swatches is a good starting point.
Each swatch shows whether white or black text passes WCAG contrast on it. For body text aim for a contrast ratio of at least 4.5:1.
Yes. Colours aren't owned by anyone — use any palette you generate in any project.