Free color palette generator with WCAG contrast checking
This free color palette generator builds harmonious colour schemes in seconds, with no login and no install. Generate unlimited palettes, fine-tune every colour, check contrast for accessible text and export production-ready code. Everything runs in your browser: palettes are calculated locally, images you extract colours from are never uploaded, and saved palettes stay in your browser’s local storage.
Making a palette
How do I generate and customize a color palette?
There are several ways to create and refine your palette. The quickest method is to press the spacebar, which generates an entirely new palette instantly. To fine-tune a specific color, simply click on its strip to open the full color picker with a saturation-brightness canvas, hue slider, and editable HEX, RGB, and HSL input fields that all synchronize in real time. The color theory dropdown lets you switch between Random, Analogous, Complementary, Triadic, Tetradic, Monochromatic, and Split-complementary modes. When you select a harmony mode and press spacebar, the generator picks a random base hue and calculates the remaining colors according to that color theory rule. You can also add or remove colors from your palette (up to 10) and drag strips to reorder them. Every change you make instantly updates the shades and tints, gradient preview, quick UI mockup, and accessibility matrix below the main palette bar.
What are the color theory modes and when should I use them?
Analogous selects colors adjacent on the color wheel, creating a harmonious and cohesive look ideal for nature-inspired or calming designs. Complementary picks colors opposite each other for maximum contrast and visual impact, great for call-to-action elements and bold branding. Triadic uses three colors equally spaced at 120-degree intervals for vibrant, balanced schemes common in children's products and dynamic interfaces. Tetradic (rectangle) selects four colors in two complementary pairs, offering rich variety for complex UIs. Monochromatic generates variations of a single hue by adjusting saturation and lightness, perfect for subtle, elegant designs and creating visual hierarchy within one color family. Split-complementary takes a base color and the two colors adjacent to its complement, giving strong contrast with less tension than a pure complementary scheme. Choose Random when you want pure serendipity and creative inspiration without constraints.
Can I type in exact hex, RGB or HSL values instead of using the picker?
Click any color strip to open its editor, where the HEX, RGB, and HSL fields are all live and synchronized — type a value into any one of them and the other two, plus the saturation-brightness canvas and hue slider, update instantly to match. This makes it easy to dial in an exact brand color while still seeing it in the context of the rest of your palette.
What are shades and tints, and how are they generated?
Below the main palette bar, each color is expanded into a full ramp of shades (darker variations, mixed toward black) and tints (lighter variations, mixed toward white). These are generated by adjusting that color's lightness in HSL space while keeping its hue and saturation fixed, giving you the kind of 50–900 style color scale used in design systems like Tailwind or Material Design — built automatically from whatever base color you picked, with no manual mixing required.
What are the gradient preview and UI mockup for?
The gradient preview strings your palette together into a smooth CSS linear-gradient so you can see how the colors blend into each other, which is useful for backgrounds and hero sections. The UI mockup renders a small sample interface — buttons, a card, body text — styled with your palette's colors, so you can judge how the scheme actually reads in a real layout rather than as isolated swatches sitting next to each other.
Can I extract colors from a photo or image?
Switch to the From Image tab and either drag-and-drop an image file or click the upload zone to select one from your device. The tool draws the image onto an invisible canvas, reads the pixel data, and applies a simplified median-cut color quantization algorithm to identify the dominant colors. A slider lets you choose how many colors to extract, from 3 to 10. The extracted colors appear as clickable swatches below the image preview. Click any swatch to copy its hex value. When you are satisfied, press the Use as Palette button to replace the current palette with the extracted colors. All processing happens locally in your browser; no image data is uploaded anywhere. This feature is especially useful for deriving color palettes from photographs, artwork, brand assets, or screenshots of designs you admire.
Can I save multiple palettes, or start from a ready-made one?
The Saved tab lets you name and save as many of your own palettes as you like to your browser's local storage, so they're there the next time you open the tool on the same device. Below your own saves, a library of 50 curated preset palettes — Material Design colors, pastels, ocean and sunset tones, forest and earth tones, and more — gives you a solid starting point you can load with one click and then tweak, instead of generating from scratch every time.
Accessibility: contrast and color blindness
How does the WCAG accessibility checker work?
The Accessibility tab shows a contrast matrix that calculates the WCAG 2.1 contrast ratio for every possible pair of colors in your palette. For each pair, the tool computes relative luminance using the standard formula (sRGB channel linearization with the 0.2126R + 0.7152G + 0.0722B weighting), then derives the contrast ratio. Results are displayed with AA and AAA badges: AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text, while AAA requires 7:1 for normal text. This lets you instantly see which color combinations in your palette are accessible for body text, headings, and UI elements. The matrix updates in real time whenever you modify the palette, making it easy to iteratively adjust colors until all your intended foreground-background pairs meet compliance standards.
Can I simulate color blindness for my palette?
The Accessibility tab includes a color blindness simulator that shows how your palette would appear to people with Protanopia (red-blind), Deuteranopia (green-blind), and Tritanopia (blue-blind) — the three types of colour blindness where one kind of cone is missing. Colour vision deficiency as a whole, mostly the red-green kind, affects about 1 in 12 men and 1 in 200 women. The simulation uses simple 3×3 colour-transformation matrices to approximate how each color shifts for each condition, so you can catch a palette that relies on a red/green distinction alone — a common accessibility pitfall — before you ship it.
Export, sharing and privacy
How do I export my palette for use in code?
Navigate to the Export tab to see your palette formatted in multiple code-ready formats. CSS Variables gives you a :root block with custom properties you can paste directly into your stylesheet. Tailwind Config provides the colors object for your tailwind.config.js. SCSS Variables outputs $variable declarations. JSON gives you a structured array you can import into any application. Beyond code, you can also download your palette as a PNG image (rendered on a canvas with hex labels) or an SVG file for lossless scaling. The Share URL button encodes your colors into the URL hash, so you can bookmark or share a direct link that loads your exact palette when opened. Every copy button provides instant clipboard access with a confirmation toast.
Is my data private? Where are palettes saved?
Your data never leaves your browser. All color calculations, image processing, and palette generation happen client-side using JavaScript. Saved palettes are stored in your browser's localStorage, which means they persist between sessions on the same device and browser but are never transmitted to any server. If you clear your browser data, saved palettes will be lost, so you may want to export important palettes as JSON or use the Share URL feature to create a permanent bookmark. No cookies are set for tracking purposes, and the only analytics used is SimpleAnalytics, a privacy-first, cookie-free page-view counter. The tool loads a single HTML file plus the JetBrains Mono font from Google Fonts; no other external requests are made during use.
How is this different from tools like Coolors?
The core idea — generate palettes, keep the ones you like — is similar to well-known palette tools, but this one is a single self-contained page with no account, no ad-supported free-tier limits, and no server involved: every calculation, including image color extraction and WCAG contrast checking, happens locally in your browser. It also bundles accessibility tooling (the contrast matrix and color blindness simulation) and code export (CSS, Tailwind, SCSS, JSON, PNG, SVG) directly alongside generation, so you don't need to hop between separate tools to go from idea to shippable colors.
Does this work on mobile devices?
The layout is fully responsive and touch-friendly — the color picker's saturation-brightness canvas, hue slider, and every swatch respond to touch the same way they respond to a mouse, so you can build and fine-tune palettes just as easily from a phone or tablet as from a desktop.
The generator is free, with no account, no limits and no ads, and you can use the palettes in personal and commercial work.
More free design tools