HEX
Example: #00BFA5. The most common format for web colors. A six-digit code representing the mix of Red, Green, and Blue.
Color Palette Generator
Instantly generate beautiful, harmonious color palettes for your designs. Press the spacebar to explore new schemes, lock your favorite colors, and copy HEX codes with a click.
Advertisement
Advertisement
A palette generator extracts color palettes from images or creates harmonious color schemes using color theory algorithms. It analyzes an image's color distribution to find dominant colors, or generates palettes from a base color using complementary, analogous, triadic, and tetradic harmony rules. This tool processes images locally using the Canvas API -- no images are uploaded.
Generate beautiful color palettes without any data leaving your browser
Press spacebar to explore, lock colors you love, copy HEX codes instantly. HSL-based algorithm for vibrant, pleasant results.
HSL-based
Instant generation
Free unlimited
How to use
- 1
Generate & Explore
Press the Spacebar to generate random color schemes. Let inspiration strike!
- 2
Lock What You Love
Find a color that fits your vision? Click the lock icon to keep it. This color will be the anchor for your palette.
- 3
Refine and Repeat
Keep pressing the spacebar. The unlocked colors will change to create new combinations that work with your locked choices.
- 4
Copy & Use
Simply click on any color's HEX code to copy it to your clipboard, ready to be pasted into your CSS, Figma, or Photoshop project.
Understanding Color Codes
RGB
Example: rgb(0, 191, 165). Each value ranges from 0 to 255, defining the intensity of the red, green, and blue light components.
HSL
Example: hsl(174, 100%, 37%). More intuitive for humans. Hue is color type (0-360), Saturation is intensity, Lightness is brightness.
Lock & Build
Lock colors you love and regenerate the rest. Build palettes around your favorite anchor colors.
Advertisement
Understanding Color Palettes
How color palette extraction works
Color palette extraction from an image involves analyzing the image's pixel data to identify the most visually significant colors. The process begins by sampling pixels from the image (not every pixel, but a representative subset for performance). Each pixel's RGB values are then quantized to reduce the number of unique colors -- this is necessary because a photograph can contain millions of subtly different colors. The quantized colors are counted to build a color histogram, and the most frequent colors are selected as the palette.
Our tool uses a median-cut quantization algorithm for palette extraction. The algorithm works by recursively dividing the color space: it finds the dimension (R, G, or B) with the greatest range of values, sorts the pixels along that dimension, and splits them at the median. This process repeats until the desired number of colors is reached. The result is a set of colors that represent the image's most distinct color regions. Each color's frequency determines its order in the palette -- the most dominant color appears first.
For generated palettes (not extracted from images), the tool uses color harmony rules based on the color wheel. Complementary: two colors opposite each other (180掳 apart). Analogous: three colors adjacent on the wheel (30掳 apart). Triadic: three colors evenly spaced (120掳 apart). Tetradic: four colors forming a rectangle on the wheel. Split-complementary: a base color plus the two colors adjacent to its complement. These rules produce visually harmonious combinations because the colors share a mathematical relationship on the color wheel.
Advertisement
Using palettes in design
A typical design palette includes 5 colors: a primary (dominant), a secondary (supporting), an accent (for calls-to-action and highlights), and two neutrals (light and dark backgrounds). The 60-30-10 rule suggests using the primary color for 60% of the design, the secondary for 30%, and the accent for 10%. This creates visual balance while ensuring the accent stands out. Extract palettes from images that evoke the mood you want -- a nature photo for earthy tones, a sunset for warm gradients, a cityscape for cool blues and grays.
When using extracted palettes for web design, always test the contrast ratios between text and background colors. A palette that looks beautiful as swatches may fail WCAG accessibility standards when used for text. Use the lighter colors for backgrounds and darker colors for text. If a palette color doesn't meet contrast requirements, darken or lighten it until it does -- the harmony of the palette will be preserved because the hue remains the same.
Advertisement
A Tool for Every Creator
For Designers & Artists
Break through creative blocks and find unique color combinations for UI design, branding, illustration, and digital art.
For Developers
Quickly prototype a color scheme for your next web application. Grab HEX codes instantly without opening a heavy design tool.
For Hobbyists
Explore color theory and discover palettes for crafts, home decor, presentations, and personal projects.
For Brand Identity
Generate multiple palette options quickly to explore brand color directions before committing to a final choice.
How does this compare to other palette generators?
A side-by-side comparison of popular color palette tools.
| Feature | NovaTools | Coolors.co | Adobe Color |
|---|---|---|---|
| Extract from image | Canvas API | (Adobe CC only) | |
| Harmony rules | 5 types | Explore mode | |
| Privacy (no upload) | 100% local | Server-side | Server-side |
| Export HEX/RGB/HSL | All formats | ||
| No registration | (for save) | Required | |
| Works offline |
Server-based palette tools process your images and color choices on their servers. Our tool extracts palettes using the Canvas API and generates harmonies using local color theory algorithms -- all in your browser.
FAQ
How are the color palettes generated?
The palettes are generated by picking random colors from the HSL (Hue, Saturation, Lightness) color space. We restrict the saturation and lightness to ranges that typically produce vibrant and pleasant colors — specifically, saturation between 60% and 90% and lightness between 40% and 65%. This avoids washed-out pastels, muddy darks, and neon-bright colors that are difficult to use in real designs. The hue is chosen randomly across the full 0-360 degree range, giving you access to the entire color spectrum. When you lock a color, the tool keeps it fixed and only regenerates the unlocked colors, allowing you to build palettes around a specific anchor color.
Can I save or export the entire palette?
Currently, you can copy each color's HEX code individually by clicking on it. The tool also displays the RGB and HSL values for each color for easy reference. We are working on features to allow exporting the full palette in various formats (JSON, CSS variables, SCSS variables, Tailwind config) in a future update. In the meantime, you can manually copy the HEX codes into your design tool, CSS file, or config file. For a complete color management workflow, consider pairing this tool with our HEX/RGB/HSL Color Converter for individual color adjustments and our Contrast Checker for accessibility verification.
Is this tool completely free to use?
Yes, our Color Palette Generator is 100% free to use with no limitations. Feel free to generate as many palettes as you need for your creative projects — there are no daily caps, no premium tiers, and no sign-up requirements. The tool is sustained by non-intrusive advertising rather than paywalls. There are no watermarks on the generated colors (colors are universal and cannot be watermarked), and you can use the generated palettes for any purpose including commercial design work, client projects, and product development. No attribution is required.
What is the lock feature and how does it work?
The lock feature lets you preserve specific colors while regenerating the rest. Click the lock icon on any color to keep it fixed — the tool will not change that color when you press the spacebar. This allows you to build palettes around an anchor color: lock a color you like, then press spacebar to explore complementary colors that work with your locked choice. You can lock as many colors as you want — if you lock all five, pressing spacebar will have no effect. Locked colors are indicated by a highlighted lock icon and a subtle border around the color card.
Can I manually adjust a specific color?
Yes. Click on any color card to open a color picker that lets you fine-tune the hue, saturation, and lightness using standard color picker controls. You can also type a specific HEX value to replace the generated color with one of your choosing. This is useful when you have a specific brand color or design requirement that the random generator didn't produce. The manually adjusted color can be locked to prevent it from being regenerated. The color picker supports HEX, RGB, and HSL input.
How many colors are in each palette?
Each generated palette contains 5 colors, which is the most common palette size for design work. Five colors provide enough variety for a primary color, secondary color, accent color, and two supporting colors (light and dark variants) — covering most UI design, branding, and illustration needs. If you need a larger palette, you can generate multiple palettes and combine them, or use our HEX/RGB/HSL Color Converter to create tints and shades of your base colors. If you need fewer colors, simply ignore the ones you don't need.
What is HSL and why is it used for palette generation?
HSL (Hue, Saturation, Lightness) is a color model that describes colors in terms that are intuitive for humans: Hue is the color itself (red, blue, green, etc.) represented as an angle on the color wheel (0-360 degrees). Saturation is how intense the color is (0% = gray, 100% = fully saturated). Lightness is how bright the color is (0% = black, 50% = pure color, 100% = white). HSL is ideal for palette generation because you can control the saturation and lightness ranges independently, ensuring the generated colors are consistently vibrant and usable. RGB, by contrast, mixes red/green/blue values that don't correspond to human-perceptual qualities, making it harder to generate aesthetically pleasing random colors.
Can I use this tool for accessibility testing?
While this tool is designed for palette generation rather than accessibility testing, you can use it in combination with our Contrast Checker tool to verify that your generated palette meets WCAG accessibility standards. After generating a palette, copy the HEX codes and test potential text/background combinations in the Contrast Checker. A good approach is to generate a palette with a dark color (for text) and a light color (for background) that pass WCAG AA (4.5:1 contrast ratio). The HSL-based generation typically produces colors with sufficient lightness variation for accessible combinations.
Completely Private
This tool runs entirely in your browser using standard JavaScript math for HSL color generation and the Clipboard API for copying HEX codes.
- We do not store your generated palettes, track your color preferences, or transmit any data to our servers.
- The tool does not use cookies to persist your settings, does not employ local storage or session storage for palette data, and does not run analytics scripts that track which colors you generate or how often you use the tool.
- All color generation, locking, and copying operations happen locally in your browser's JavaScript engine — there are no server-side API calls for processing.
- When you close the browser tab, all generated palettes and locked colors are cleared from memory immediately.
- This makes the tool safe to use for proprietary brand color exploration, confidential client design work, and any scenario where color preferences should not be exposed to third-party servers.
- The tool also works offline after the initial page load.
You might also like
Helpful guides
How to Create a Brand Palette From a Logo (Step-by-Step)
Your logo is a goldmine of color information. Learn how to extract key colors from your logo and expand them into a full, versatile brand palette for your website, social media, and marketing materials.
How to Convert Colors Between HEX, RGB and HSL
Learn the difference between HEX, RGB and HSL color formats, when to use each, how to convert between them, and CSS tips like color-mix.
A Practical Guide to Color Contrast for UI Design
Learn the fundamentals of web accessibility and color contrast. Understand WCAG ratings (AA vs. AAA) and use our quick checks and practical fixes to make your UI readable for everyone.
Advertisement