Free Color Palette Generator
Generate colour palettes from a base colour, a random seed or a photo, lock the colours you love, check WCAG contrast and export the code.
Color Palette Generator: Generate colour palettes from a base colour, a random seed or a photo, lock the colours you love, check WCAG contrast and export the code. It is free, needs no sign-up and runs in your browser. How to use it: 1) pick a base colour, choose a palette style or upload an image; 2) press Space or click Generate. Lock colours you want to keep; 3) check contrast, then copy HEX, RGB, HSL, CSS or Tailwind code. Every colour is converted to HSL (hue, saturation and lightness) so harmonies can be calculated on the colour wheel.
How the colour palette generator works
Every colour is converted to HSL (hue, saturation and lightness) so harmonies can be calculated on the colour wheel.
- Complementary: the hue opposite your base, 180 degrees away.
- Analogous: neighbouring hues, 15 to 30 degrees either side.
- Triadic: three hues 120 degrees apart.
- Split complementary: the base plus the two hues beside its complement.
- Tetradic: four hues 90 degrees apart.
- Monochrome, shades and tints: one hue mixed with black or white.
Regenerating adds small random changes in lightness so you get fresh options, while locked swatches stay put.
Colours from an image
Uploaded images are shrunk to about 120 pixels and grouped with k-means clustering. The most common clusters become your palette. The image stays on your device.
Contrast checker
Contrast uses the WCAG 2.2 formula: (lighter luminance + 0.05) divided by (darker luminance + 0.05). AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 and 4.5:1.
Limitations
Colours can look different on uncalibrated screens and in print. Contrast ratios are exact for the colours entered, but readability also depends on font size, weight and background images.
Color Palette Generator FAQs
How do I choose a colour palette for my brand?
Start with one main colour that fits your industry and audience, then build a harmony around it. Most brands need a primary colour, one or two accents, a dark neutral for text and a light neutral for backgrounds. Check every text and background pair for contrast.
What contrast ratio do I need for accessibility?
WCAG level AA asks for at least 4.5:1 for normal text and 3:1 for large text, which is 24px regular or about 19px bold. Buttons and form borders need 3:1 against their background. Level AAA raises text to 7:1 and 4.5:1.
How does extracting colours from an image work?
The image is shrunk and every pixel is grouped by colour similarity with a method called k-means clustering. The centre of each group becomes a swatch, ordered from most to least common. It runs in your browser, so the image is never uploaded.
Can I use the palette in Tailwind CSS?
Yes. The export section creates a tailwind.config.js snippet with a 50 to 950 scale for each palette colour, built by mixing it with white and black. It also creates CSS custom properties with HEX and RGB values for plain CSS projects.
Want our experts to implement these improvements?
Get professional support from Hayyat Networks. Request a free consultation.