Free Color Palette Generator Online
Generate beautiful color palettes. Lock your favorites and keep generating. Press Space for new colors!
CSS Variables
How to Use
- Choose a harmony mode (Analogous, Complementary, Triadic, etc.) or keep it on Random.
- Click Generate or press Space for new palettes.
- Click the lock icon to lock a color so it stays when regenerating.
- Click a HEX code to copy it to your clipboard.
- Use Copy CSS to get CSS custom properties or download as an image.
Color Theory & Harmony Modes
This generator supports 7 harmony modes based on color theory. Analogous palettes use colors within 30° of each other on the color wheel · they feel calm and cohesive. Complementary palettes pair colors 180° apart for maximum contrast. Triadic palettes use three evenly spaced hues (120° apart) for vibrant variety. Split-Complementary takes a base color plus two colors adjacent to its complement · bold but more nuanced. Monochromatic palettes vary only lightness and saturation of one hue · elegant and minimal. Square uses four colors 90° apart for a well-balanced, colorful palette.
Frequently Asked Questions
How do I use these colors in my project?
Click "Copy CSS" to get ready-to-paste CSS custom properties. You can also click individual HEX codes to copy them, or export the entire palette as a PNG image for reference in design tools like Figma or Canva.
How many colors should a palette have?
Most designs work best with 3-5 colors: a primary color, a secondary color, an accent, and 1-2 neutrals. Use the "+ Add Color" button to expand your palette or remove colors by generating with fewer.
Can I lock colors I like?
Yes! Click the lock icon on any color swatch. When you generate new palettes, locked colors stay in place while the unlocked ones randomize. This is great for building a palette around a specific brand color.
What are the harmony modes?
Harmony modes generate palettes based on color theory relationships. Analogous uses nearby hues for a soothing palette. Complementary uses opposite hues for strong contrast. Triadic, Split-Complementary, and Square distribute hues evenly around the color wheel. Monochromatic keeps one hue and varies lightness · perfect for clean, minimal designs.
What is a color palette generator?
A color palette generator picks a set of colors that work together visually, based on the rules of color theory. You give it a starting hint (a base color, a harmony mode, or pure randomness), and it returns three to five hexadecimal codes that sit at deliberate positions on the color wheel. The output is ready to drop into CSS variables, a Figma file, a brand guideline, or a slide deck.
Modern web tools express colors in hexadecimal (#2b7190), RGB (43, 113, 144), HSL (199, 54%, 37%), or OKLCH (51.3% 0.066 233.4). Hex is the most copy-pasteable; HSL is the most intuitive to nudge (lower the lightness for a darker variant); OKLCH (introduced in CSS Color 4, supported in browsers since 2023) is perceptually uniform, which matters for design tokens. This tool emits hex by default and lets you copy CSS custom properties for variables and OKLCH-friendly hue stepping.
All generation happens in your browser. The harmony modes are computed from a base color via HSL hue rotation, then converted back to hex. The lock button keeps your favorites while the rest of the palette reshuffles. The Space key triggers a new generation without leaving the page, which makes exploration fast.
What is inside the generator
The top bar groups the three knobs that change generation: a Generate button that produces a new palette, a Mode dropdown with seven harmony rules (Random, Analogous, Complementary, Triadic, Split-Complementary, Monochromatic, Square), and a Base color picker for seeding non-random modes. The Add Color button extends the palette beyond the default five swatches, useful for design systems that need more tones.
Each swatch shows its hex code on a dark pill that stays readable against any background. Click the hex to copy it. Click the lock to freeze the swatch through future generations, which is how you build a palette around a brand color: lock the brand, regenerate, get three matching companions. The actions bar inside each swatch keeps the lock, copy and remove icons within 32-pixel touch targets to satisfy Lighthouse's target-size rule.
Below the palette, the CSS Variables export block updates live with your current colors as :root custom properties. The Export Image button serializes the palette to a PNG via a hidden canvas, which is handy for sharing in design reviews or pinning to a moodboard. The keyboard shortcut Space regenerates instantly, with no focus change required.
History and background
Isaac Newton splits white light (1666)
Isaac Newton's 1666 prism experiments at Cambridge showed that white light is composed of a continuous spectrum of colors. In Opticks (1704), he laid out a seven-color wheel with red, orange, yellow, green, blue, indigo, and violet positioned so that the diametrically opposite colors created harmonious complementaries. Every modern color wheel descends from this one diagram.
Goethe's color theory (1810)
Johann Wolfgang von Goethe's Theory of Colours (1810) reframed Newton's physics in terms of human perception. Goethe was the first to systematically describe afterimages, simultaneous contrast, and the psychological warmth of red versus the coolness of blue. His work influenced Turner, Schopenhauer, and the entire field of color psychology that art schools teach today.
Johannes Itten formalizes harmony rules (1961)
Johannes Itten, a Bauhaus teacher, published The Art of Color (Kunst der Farbe) in 1961. His twelve-spoke color wheel and the seven contrasts (hue, value, temperature, complementary, simultaneous, saturation, extension) became the standard curriculum in art and design schools. The harmony modes in this tool (Analogous, Complementary, Triadic, Split-Complementary, Square) come directly from Itten's chapters.
Pantone Matching System (1963)
Lawrence Herbert at Pantone, an M. Harris and Sons commercial printer, launched the Pantone Matching System in 1963. The chip book gave designers and printers a shared numeric reference, so a brand color could survive being reproduced across paper stocks, screens and fabrics. The Color of the Year, started in 2000, now drives palette trends across fashion, interiors and web design.
Web-safe palette and the 216 colors (1996)
When 8-bit displays dominated the early web, Lynda Weinman codified a 216-color web-safe palette in 1996 to ensure consistent rendering across Mac and Windows. The palette became obsolete once 24-bit color became ubiquitous (around 2000), but the hex syntax it popularized (#RRGGBB) remains the dominant way to write colors in CSS, HTML and design tools.
OKLCH and perceptually uniform color (2020)
Bjoern Ottosson's 2020 OKLab paper introduced a perceptually uniform color space that does not have the lightness inconsistencies of HSL. CSS Color Level 4 (browsers from Chrome 111, Safari 15.4, Firefox 113) added oklch() syntax. The future of design tokens, accessible color contrast, and palette generation increasingly lives in OKLCH because perceptual uniformity means that two colors with the same L value really do look equally bright.
Practical workflows
Building a brand identity from one color
Set the Base color to your brand hex, lock the first swatch, switch the mode to Analogous or Split-Complementary, and click Generate until the four companion colors feel right. Copy the CSS variables and paste them into your design system tokens. The result is a palette anchored to your brand with theory-backed harmonies.
Designing dark mode pairs
Pick a Monochromatic palette with your dark mode background as the base. The five swatches give you background, surface, divider, secondary text and primary text in graduated lightness. For light mode, generate a separate Monochromatic palette with a light base. The two palettes paired via prefers-color-scheme cover most theming needs without ad hoc tweaks.
Picking colors for data visualization
For categorical data (bar charts, pie segments), Triadic or Square palettes give you three or four distinct hues that read separately on a busy chart. For sequential data (heatmaps, choropleth maps), use Monochromatic to vary lightness while keeping hue constant. Check the contrast against the chart background; data-viz tools like Vega-Lite expect at least 3:1 between adjacent categories.
Accessibility-first palette draft
Generate a palette, then paste each pair into a contrast checker (WebAIM, Tanaguru). For body text on a background you want at least 4.5:1 (WCAG AA). For large text or UI components, 3:1 is the threshold. If a palette fails, generate a new one or lock the brand swatch and let the others reshuffle to find a compliant set.
Mood-board exploration
Hit Space repeatedly to cycle through dozens of random palettes. When one catches your eye, lock the best swatch, switch to Analogous, and keep generating to find variations that build on it. The Space-bar loop is faster than clicking, which lets you stay in the right-brain exploration mode without breaking flow.
Print-to-screen color matching
When you have a printed reference (a Pantone chip or a fabric swatch), eyedrop the closest digital equivalent and use it as the Base color. The harmony modes then fan out around your reference. Be aware that print is CMYK and screen is RGB, so an exact match is impossible; the goal is a palette close enough to read as the same brand.
Common pitfalls
WCAG contrast is not automatic
A theory-pretty palette can still fail accessibility. Pastel-on-pastel pairs (a light yellow on a light pink) look pleasant but have less than 2:1 contrast. Always test the proposed text-on-background pairs in a WCAG checker. If the palette must work for body text, build it around the contrast requirement first, harmony second.
Color blindness affects 8% of men
Red-green deuteranopia is the most common form of color vision deficiency, affecting roughly 8% of men and 0.5% of women. A red-green Complementary palette becomes a single brown smear to a deuteranopic viewer. For categorical color (charts, status badges, traffic lights), pair color with shape, label or pattern, and test in a simulator like Stark or Sim Daltonism.
HSL is not perceptually uniform
In HSL, yellow at 50% lightness looks much brighter than blue at 50% lightness. The HSL model treats all hues equally numerically, but human eyes do not. The generator works in HSL internally for hue rotation, so two swatches with similar S and L can still have noticeably different perceptual weight. For perceptually balanced palettes, switch to OKLCH-aware tools (Leonardo, Open Color).
Gamut differences between sRGB and Display P3
Modern Apple displays (since 2015 iMacs, 2016 MacBook Pros, all iPhones since 7) use Display P3, a wider color gamut than sRGB. A saturated red that looks vivid on Display P3 can look duller when the same hex is rendered on an older sRGB-only monitor. For brand colors that must look identical everywhere, stay within sRGB's smaller gamut.
Hex codes do not carry alpha by default
Three-digit (#abc) and six-digit (#aabbcc) hex are opaque. Eight-digit hex (#aabbcc80, where 80 is 50% alpha) is supported in CSS Color 4 and modern browsers but not in legacy tooling. If you need transparency, use rgba() or hsla() instead, or stick to opaque colors and let the parent's opacity handle blending.
Color picker calibration drift
An uncalibrated monitor can drift several Delta-E units away from a reference, which means a palette that looks pristine on your screen can look muddy or oversaturated on someone else's. For brand-critical work, calibrate with a Spyder or i1Display device. For most web design, screen variance is unavoidable; pick colors that work across the median range.
Privacy and data handling
Everything runs in your browser. The harmony math is JavaScript, the canvas export is local, and the clipboard API requires a user gesture. We do not send your hex codes anywhere, do not track which palettes you generate, and do not store anything in cookies or localStorage. Reload the page and the previous palette is gone.
Once the page is loaded, the generator works offline. You can use it on a flight, inside a corporate proxy, or in an air-gapped environment. The only network-touching action is the optional Export Image, which downloads via a blob URL, and the download itself does not transmit your colors anywhere.
When not to use this generator
Establishing a design system with semantic tokens
Design systems need named, semantic tokens (color-primary-500, color-error, color-warning) with paired light and dark mode values, contrast guarantees, and named scale steps. Use a dedicated tool (Material Color Tool, Open Color, Leonardo by Adobe) or a token-management system (Style Dictionary, Tokens Studio). This generator is for exploration, not system design.
Print color management (CMYK, Pantone)
CMYK color separations for offset printing require professional tools (Adobe Illustrator's swatch panel, Pantone Connect). RGB-to-CMYK conversion is lossy and ink-coverage limits matter. If your palette will be printed at scale, work with the printer's color spec from the start, not a screen-only hex generator.
Generating accessible palettes for body text
For palettes that must guarantee WCAG AA or AAA contrast across every pairing, use a contrast-first tool such as Tanaguru Contrast-Finder, Adobe Leonardo, or APCA-based tools. This generator follows harmony rules, not contrast rules, so a beautiful Analogous palette can have a 1.5:1 text-to-background pair that fails accessibility.
Animations and color interpolation
For gradient stops or color animations, you need a perceptually uniform interpolation in OKLCH or LCH, not raw HSL or hex. CSS gradient interpolation defaults to sRGB which produces muddy midpoints (the famous gray midpoint between yellow and blue). Use color-interpolation tools (Erin Kissane's chroma.js, oklch.com) for animated transitions.
More questions
When should I use hex vs RGB vs HSL?
Hex is the most compact and most-copied, great for design hand-offs. RGB is the easiest to compute in code (each channel 0-255). HSL is the easiest to nudge by hand: change hue to shift the color, lightness for variants. For modern CSS, OKLCH is the most future-proof for design systems because it is perceptually uniform.
Which harmony mode should I pick?
Start with Analogous for calm, cohesive palettes (interfaces, blogs). Use Complementary for high-contrast call-to-action pairs. Triadic and Square give vibrant categorical palettes for charts or playful brands. Monochromatic is best for dark-mode and tonal design systems. Split-Complementary is the safest "bold but not jarring" choice.
How do I check accessibility?
Paste each text-on-background pair into WebAIM Contrast Checker, Tanaguru, or APCA Contrast Tool. Aim for at least 4.5:1 (WCAG AA) for body text, 3:1 for large text and UI components, 7:1 (WCAG AAA) for prose-heavy reading apps. Test with color-blindness simulators (Stark, Sim Daltonism) for categorical use.
Can I export to Figma or Sketch?
Copy CSS gives you ready-to-paste custom properties. Both Figma and Sketch import hex codes directly via their color picker. The Export Image button gives you a PNG suitable for moodboards or screenshots. For a tokens-friendly export (W3C Design Token Community Group format), copy the hex codes and adapt them in Tokens Studio or Style Dictionary.
How many colors should a palette have?
Three to five for most websites and apps: a primary brand color, an accent or secondary, a neutral for text, and one or two utility neutrals (border, background). Larger design systems use 9 to 12 named tokens (primary, secondary, success, warning, error, info, plus neutrals). The tool starts at five but Add Color extends it.
What is OKLCH and should I use it?
OKLCH is a perceptually uniform color space added to CSS in 2023. Unlike HSL, two OKLCH colors with the same L value really look equally bright. For design systems and consistent tonal scales it is the new best practice. Browser support is universal in current versions (Chrome 111+, Safari 15.4+, Firefox 113+). For graceful fallback in older browsers, ship a sRGB hex value alongside the oklch().