Color Palette Generator
Generate a rule-based palette, choose the colors yourself, or extract dominant colors from an image. Then preview and export the result.
Choose one to three core colors. The tool adds light and dark surfaces, generates 50–900 shade ramps, and exports the values for implementation. It does not verify contrast or assign a complete set of semantic UI roles; test the final pairings with the color contrast checker.
Built and maintained by Maaz Rana. Updated .
Loading Color Palette Generator...
Color Harmony Rules
The hue rotations used by the generator's rule-based modes
Complementary
Keeps the base hue and adds a second hue 180° around the HSL color wheel. This creates hue separation, but it does not guarantee readable foreground/background contrast.
0° and 180°Analogous
Uses hues beside the base color. This generator places them 30° above and below the starting hue when three colors are selected.
Base hue, +30°, −30°Triadic
Places three hues at equal 120° intervals. The relationship controls hue spacing; saturation, lightness, role, and contrast still need review.
Base hue, +120°, +240°Monochromatic
Starts from one core hue. The tool then derives light and dark surfaces plus a 50–900 shade ramp from that base color.
One core color and its derived valuesSplit-Complementary
Pairs the base hue with two hues on either side of its complement, at 150° and 210° from the starting point.
Base hue, +150°, +210°Turn a Palette Into Interface Colors
Checks to make before generated swatches become product tokens
Assign Roles Before Names
Decide which values are backgrounds, surfaces, text, borders, actions, focus indicators, and status colors. “Primary” alone does not define safe usage.
Test Every Foreground/Background Pair
The generator does not check WCAG thresholds. Measure text, icon, border, and focus-indicator pairs with the Color Contrast Checker.
Define Interaction States
Add explicit default, hover, focus, selected, pressed, and disabled values. A 50–900 ramp is not a finished state model.
Review Both Themes
A dark theme is not a simple inversion. Check the actual role assignments, contrast, elevation, and emphasis in both contexts.
Add a Non-Color Cue
Hue cannot be the sole signal for an error, selection, status, or action. Pair color with text, shape, pattern, or another visible change.
Check the Export Against the UI
Use the generated code as a starting set of values. Confirm token names, shade order, component mappings, and rendered colors before release.
How to Choose Colors
A role-first path from a seed color to implementation
Choose a Real Seed
Start from an approved brand color, a value chosen with the manual controls, or colors extracted from a representative image. Record the source.
Choose the Number of Core Colors
Use one, two, or three core colors based on the roles the product needs. More roles can be added later without forcing more saturated brand colors into the base palette.
Generate or Adjust the Hue Relationship
Try a complementary, analogous, triadic, split-complementary, or single-hue starting point. Treat the result as an option to review, not an automatic design decision.
Map Values to Semantic Roles
Assign backgrounds, surfaces, text, borders, actions, focus, and status roles. Keep role names stable even when light and dark themes use different values.
Test Pairings and States
Measure contrast for the exact foreground and adjacent background in default, hover, focus, selected, pressed, error, and disabled states.
Export, Integrate, and Recheck
Move the values into CSS, Tailwind, or JSON, connect them to real components, and verify the rendered interface rather than the swatches alone.
Industry Color Standards
How current platform and design-system guidance handles roles, themes, and contrast
Carbon Design System
Carbon separates role-based token names from the color values assigned by each theme, including dedicated interaction-state tokens.
Learn MoreApple Human Interface Guidelines
Apple recommends testing custom colors in light, dark, increased-contrast, varied-lighting, and device contexts instead of assuming one value works everywhere.
Learn MoreWCAG 2.2 Contrast Minimum
WCAG sets pair-specific contrast thresholds for text and images of text. A generated swatch does not pass or fail until it is used against another color.
Learn MoreWCAG 2.2 Use of Color
When color communicates meaning, WCAG requires another visual way to convey the same information. Contrast alone does not satisfy this criterion.
Learn MoreCommon Mistakes to Avoid
Where a generated set of swatches still needs design work
Treating Swatch Names as Semantic Roles
Primary, secondary, and tertiary describe the generated set, not every job in an interface. Map values to explicit text, surface, border, action, focus, and status roles.
Assuming Generated Means Accessible
Hue relationships and shade ramps do not enforce WCAG. Test each foreground/background pair and give status or selection another visible cue beyond color.
Using One Value Across Every Theme
The same accent can work on one theme and fail on another. Assign and test a value for each theme instead of relying on inversion.
Shipping the Export Without Integration Review
Generated CSS, Tailwind, and JSON are starting structures. Check names, shade order, state mappings, contrast, and the rendered components before release.
Frequently Asked Questions
The image stays in your browser. The tool reads it into an HTML canvas and samples every tenth pixel. It skips pixels with alpha below 128, all RGB channels above 240, or all three channels below 15. It rounds each channel to a 32-step value, capped at 255, and shows the five most frequent groups. Your first one to three selections become the core palette, and the first color seeds the surfaces.
They describe hue positions in HSL. This tool uses 180° for complementary, ±30° for analogous, 120° intervals for triadic, and +150°/+210° for split-complementary. Those rotations describe hue relationships. You still need to judge contrast, accessibility, brand fit, and each color's role in the interface.
There is no universal number. This tool supports one to three core colors because that is enough to explore a primary, secondary, and optional tertiary relationship. A production system needs additional semantic roles for text, surfaces, borders, actions, focus, success, warning, and error. Those roles can reuse derived values; they do not each need a new core hue.
HEX and RGB encode red, green, and blue channel values in different notation. HSL describes hue, saturation, and lightness, which is the model this generator uses for hue rotations and derived shades. The interface shows HEX values; the JSON export also includes RGB and HSL data for each generated color.
The generator does not make that determination. Test each intended foreground/background pair with the Color Contrast Checker: WCAG 2.2 Level AA requires 4.5:1 for normal text and 3:1 for large text. Necessary active-control indicators and meaningful graphics have a separate 3:1 requirement. Also add a visible cue beyond color anywhere hue communicates meaning.
The CSS export includes core colors and light/dark surfaces; its optional shade toggle adds a 50–900 ramp for the primary color. The Tailwind export produces a JavaScript theme extension with 50–900 ramps for primary and secondary. JSON includes the full palette object with HEX, RGB, and HSL values. Review names and theme structure before placing any export in a production codebase.
It is rule-based. Random mode chooses a base color and applies the selected HSL hue relationship. Manual mode derives secondary and tertiary suggestions from the values you enter, and image mode groups sampled RGB values. Random generation varies on each run, but no AI model chooses or evaluates the colors.
Need the Palette to Work as a System?
A usable color system has to survive real screens, states, and accessibility constraints. Share the product and where the current palette falls short.
Discuss the Color System