~/color-palette apps ← back to terminal
◆ design tool

Color Palette Generator

Generate beautiful color palettes with color theory, WCAG contrast checking, image extraction, and one-click export. Free, no login, unlimited use.

Press Space to generate · Click any color to fine-tune · Drag to reorder
5 colors
Shades & Tints
Gradient Preview
Quick Preview
🖼
Drop an image here or click to upload
Preview
Your Saved Palettes
Curated Palettes

CSS Variables

Tailwind Config

SCSS Variables

JSON

WCAG Contrast Matrix
Color Blindness Simulation

Edit Color

Closest CSS: black
FAQ — Color Palette Generator

Frequently Asked Questions — Color Palette Generator

What is this color palette generator and who is it for?

This is a free, browser-based color palette generator designed for web developers, UI/UX designers, graphic designers, illustrators, and anyone who needs to create harmonious color schemes quickly. The tool runs entirely in your browser with no server-side processing, which means your data stays private and there is zero latency. You can generate random palettes, apply color theory rules such as analogous, complementary, triadic, tetradic, monochromatic, and split-complementary harmonies, extract dominant colors from uploaded images, check WCAG accessibility compliance, simulate color blindness, and export your palettes in multiple formats including CSS custom properties, Tailwind CSS configuration, SCSS variables, JSON, PNG images, and SVG files. Whether you are designing a brand identity, building a website, creating a presentation, or simply exploring color combinations for creative projects, this tool provides everything you need in a single page without requiring any account or installation.

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.

Is this tool completely free? Are there any limits?

Yes, this tool is 100% free with absolutely no usage limits, no account required, and no login or signup of any kind. You can generate an unlimited number of palettes, save as many as you want to your browser's local storage, export in every available format, and use the results in any personal or commercial project. There are no premium tiers, no watermarks, no feature gating, and no ads. The tool is one of over 50 free utilities available at jasperbernaers.com, all designed with the same philosophy: powerful tools that respect your privacy and work without friction.

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.

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.

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 extract colors from a photo or image?

Yes. 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.

What makes this color palette generator different?

This tool is built with a privacy-first approach — everything runs in a single HTML file with no external dependencies beyond the Google Font. There is no account required, no ads, no usage limits. Features include built-in WCAG contrast checking across all color pairs, color blindness simulation using Brettel/Viénot transformation matrices, image color extraction, shade and tint generation for every color, live UI mockup preview, and export to CSS, Tailwind, SCSS, JSON, PNG, and SVG. Your palettes are saved locally in your browser — no data ever leaves your device. For quick web development and design tasks, this generator covers all the essentials and more in a fast, private, and free package.

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 no analytics beyond the standard Google Analytics page-view counter are collected. The tool loads a single HTML file plus the JetBrains Mono font from Google Fonts; no other external requests are made during use.