InstantPalette Color Palette Generator

Click the Generate button or press the Space key to create a new color palette. Each generation creates a harmonious set of colors based on your selected harmony mode, and colors you have locked stay in place. Undo brings back the palette before.

Color harmony modes are different mathematical approaches to creating pleasing color combinations:

• Random: Uses golden angle distribution (137.5°) for balanced color selection with optimal spacing on the color wheel
• Complementary: Colors positioned 180° apart on the color wheel, creating high contrast and vibrant combinations
• Analogous: Colors spaced 30° apart (closer together at 6 to 8 colors, so the palette stays within 120°), producing harmonious and cohesive palettes ideal for gradients
• Triadic: Three colors equally spaced at 120° intervals, offering balanced yet vibrant schemes
• Split-Complementary: Base color plus two adjacent to its complement (150° and 210°), softer than complementary
• Monochromatic: Single hue with varying saturation and lightness, creating unified elegant palettes

For an in-depth explanation of when to use each harmony mode, see our Complete Color Theory Guide.

The Neighbor contrast control (in the top bar, or in Palette settings on phones) makes every generated palette meet a WCAG contrast ratio between adjacent colors:

• Off: No contrast requirements. Generates colors freely for maximum variety
• AA 4.5:1: Adjacent colors have at least a 4.5:1 contrast ratio (WCAG AA standard for normal text)
• AAA 7:1: Adjacent colors have at least a 7:1 contrast ratio (WCAG AAA standard)

This feature is perfect when creating palettes where colors will be used next to or on top of each other (like UI elements, data visualizations, or adjacent sections). At 4.5:1 or more, palettes alternate between dark and light colors. The chips on the seams between colors show each pair’s ratio with a check or a cross. If two colors you locked can’t reach the ratio, the generator tells you which pair to change.

Click the lock with the color’s number on any swatch to lock it (at the top of each column, or at the right of each row on phones). Locked colors remain unchanged when you generate new palettes, and the other colors re-harmonize around them. You can also press the number keys 1 through 8 to lock or unlock colors by position. A locked color shows a filled lock and the word “Locked”.

Point at a color (or move keyboard focus into it) and click the Regenerate button (circular arrow) to regenerate just that color while keeping all others unchanged. On phones and tablets, tap ••• on the color, then Regenerate. This is useful when you like most of your palette but want to explore alternatives for one specific color. The refresh respects your selected harmony mode and Neighbor contrast settings. Note: You cannot regenerate a locked color. Unlock it first if you want to refresh it.

The number beside the lock is the color’s position, and the key that locks it. The Aa line is the WCAG contrast ratio of the better of black or white text on that color, with its level:

• AAA (7:1+): Highest accessibility standard. Excellent for all text sizes and users with visual impairments
• AA (4.5:1+): Standard accessibility level. Suitable for normal text (meets WCAG 2.1 guidelines)
• Below 4.5:1: Insufficient contrast for normal text. 3:1 is enough only for large text and icons

Every color passes AA with black or white text, so a swatch always shows AA or AAA. The chips on the seams between two colors show their contrast with each other (point at a seam, or turn on Neighbor contrast); click a chip to see which text sizes pass.

Click Edit (the pencil) on any color, or tap ••• and then Edit on phones. Type a hex code (or paste an RGB, HSL or OKLCH value), drag the hue, saturation and lightness sliders, open your system’s color picker, or use the eyedropper in browsers that support it. The palette updates instantly; Revert or Esc restores the original. The edited color remains unlocked unless you manually lock it.

Choose the format with the Format control in the top bar, or press F. The swatches, Copy all and the copied codes all follow it:

• HEX: Hexadecimal format (e.g., #3F51B5) - standard for web design
• RGB: Red, Green, Blue values (e.g., rgb(63, 81, 181)) - used in CSS and design tools
• HSL: Hue, Saturation, Lightness (e.g., hsl(231, 48%, 48%)) - intuitive for color adjustments
• OKLCH: Lightness, Chroma, Hue in a perceptual color space (e.g., oklch(0.552 0.068 216.8)) - used by modern CSS and Tailwind v4

Click any code to copy it to your clipboard instantly. On phones, tap ••• on a color to copy it in any format.

You have several options:

• Copy individual color: Click the code on any swatch to copy it in the current format
• Copy all colors: Click Copy all or press C to copy every color at once, in the current format
• Copy code: Open Export to copy the palette as CSS variables, SCSS, Tailwind v4 (@theme) or JSON
• Export as PDF: Choose PDF with contrast in Export or press P to download a PDF document with full color details and WCAG contrast ratios
• Export as CSS: Choose CSS file in Export or press E to download a CSS file with colors as CSS variables (--color-1, --color-2, etc.)
• Share: Copies a link that opens this exact palette

On phones, these are in the ••• menu next to Generate.

PDF exports include comprehensive color information perfect for client presentations and documentation:

• Large color swatches with visual previews and color names
• All color formats (HEX, RGB, HSL and OKLCH) for each color
• WCAG contrast ratios vs white and black text with AA/AAA ratings, and the contrast between neighboring colors
• Metadata: Timestamp, harmony mode, and color count
• Professional formatting suitable for client deliverables

You can export the current palette, individual palettes from the Library, or your entire history or saved palettes as a multi-page PDF document.

Yes! Click Library or press H. The History tab shows your last 10 palettes, and the Saved tab shows the palettes you saved with the heart or S. Both are stored in your browser’s local storage only; nothing is uploaded.

Each palette shows:

• Color strip: Visual preview of every color
• Harmony mode & color count
• Time: When the palette was created (e.g., “4 min ago” or “Yesterday, 4:12 PM”)
• Actions: Click the palette to load it, or save it, export it to PDF or delete it (with Undo)

At the bottom of the Library you can export a whole tab as one PDF, and use Export JSON and Import to back up your palettes or move them to another browser.

Use the − and + buttons under Colors in the top bar (in Palette settings on phones) to choose between 2 and 8 colors. You can also press + to increase or - to decrease the color count. Adding a color keeps the ones you have and fits the new one into the harmony; removing one drops the last color.

The following keyboard shortcuts speed up your workflow:

• Space - Generate new palette
• 1-8 - Lock/unlock specific color by position
• C - Copy all color codes
• F - Switch the code format
• P - Export palette to PDF
• E - Export palette as CSS file
• S - Save the palette to your library
• H - Open the library
• + - Increase color count
• - - Decrease color count
• Ctrl Z - Undo (add Shift to redo)
• ? - Show the shortcut list

Shortcuts are ignored while you type in a field or hold Ctrl, Cmd or Alt. You can turn off single-key shortcuts in the shortcut list.

Absolutely! The Color Palette Generator is fully responsive and touch-optimized. All features work on mobile devices, tablets, and desktops. On phones, tap a code to copy it, tap the lock to keep a color, and tap ••• on a color for more formats, contrast details, Regenerate and Edit. The settings button at the top opens harmony, color count, Neighbor contrast and format. The layout automatically adapts to your screen size for the best experience.

Yes, the Color Palette Generator is completely free to use with no registration required. There are no limits on palette generation, exports, or features. The tool is ad-supported to keep it free for everyone while maintaining development and hosting costs.

Colors are generated using the HSL color space (Hue, Saturation, Lightness) rather than RGB, which allows for more perceptually harmonious results. The generator applies smart constraints (saturation 50-100%, lightness 30-80%) to avoid overly dull or neon colors. Each harmony mode uses mathematical relationships on the color wheel to ensure colors work well together. With Neighbor contrast on, the generator may go darker or lighter where it needs to reach the ratio.

WCAG (Web Content Accessibility Guidelines) contrast ratios ensure your designs are readable for everyone, including people with visual impairments, color blindness, or viewing screens in bright sunlight. Meeting AA standards (4.5:1) is required for ADA compliance and recommended for professional web design. AAA standards (7:1) provide even better accessibility for body text and small fonts.

Yes! All generated color palettes are free to use for personal and commercial projects without attribution. The colors themselves cannot be copyrighted, so you own full rights to any palette you create with this tool.