NEW COLLECTION
Design with confidence
See how your palette creates hierarchy in a compact landing page.
Color Palette Generator – Random & Harmonious Color Schemes
Create your palette
Base color
Enter a six-digit HEX value.
Drop an image here or choose a local PNG, JPEG, WebP, GIF, or BMP.
The image is sampled with Canvas in this browser and is never uploaded.
Shortcuts: Space generate when focus is outside a control · each swatch has separate copy, lock, move, and remove buttons.
Advertisement
Apply colors to a design
Northstar
Good morning
Your activity
Focus time 3h 20m
Tasks complete 8 / 10
Quarterly growth
Studio North
Clear ideas, thoughtfully made.
Contrast testing
Ratios use WCAG 2.2 relative luminance. Large text means at least 18 pt regular or 14 pt bold.
History & favorites
Recent palettes and named favorites are stored only in local storage on this device.
Export & share
How to build a useful color scheme
Choose a harmony
Analogous feels calm and unified. Complementary creates a direct accent. Split-complementary softens that tension. Triadic balances three families, tetradic supports richer systems, and monochromatic creates an ordered scale.
Use 60–30–10
Start with roughly 60% background, 30% surface or secondary color, and 10% accent. This is a composition guide, not a contrast rule. Add white, near-black, or a tinted gray when saturated colors compete.
Build UI scales
For light UI, pair pale backgrounds with dark text and reserve stronger chroma for actions. For dark UI, use near-black surfaces rather than pure black, raise text lightness, and retest every interactive state.
Check accessibility
Harmony does not guarantee accessibility. Aim for at least 4.5:1 for normal text and 3:1 for large text under WCAG 2.2 AA. Use labels, icons, or patterns as well as color for status and meaning.
Worked palette examples
Blue + complementary CTA
Start: #2563EB · Harmony: complementary
#2563EB #A37A1E #5F91F7 #D69F15 #7AA6FD
Use blue for structure and the opposite hue for a landing-page call to action, after checking text contrast.
Analogous green wellness brand
Start: #2F855A · Harmony: analogous
#2F855A #68911C #3FAF59 #0DC697 #14C0B6
Use the starting green for primary actions and quieter neighbors for panels and supporting graphics.
Monochromatic dashboard
Start: #7C3AED · Harmony: monochromatic
#7C3AED #55349C #7D60CC #A88DFD #D2C8FF
Map the lightness steps to chart emphasis, selected states, surfaces, and borders.
Formulas used
Complementary: h + 180° · Analogous endpoints: h − 30° and h + 30° · Triadic: h, h + 120°, h + 240° · Contrast: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter relative luminance.
Frequently asked questions
How are random color palettes generated?
Random mode chooses hues and builds colors in OKLCH, varying perceptual lightness and chroma according to the selected style. Formal modes use the fixed hue-angle relationships documented above.
How do color locks work?
A locked swatch stays unchanged when you generate again. Every locked color contributes to the average OKLCH lightness, chroma, and circular hue anchor used for new suggestions.
Which color harmony should I choose?
Use analogous or monochromatic for cohesion, complementary or split-complementary for a focused accent, triadic for balanced variety, and tetradic when you need four color families.
How many colors does a palette need?
Three to five colors suit many interfaces: background, surface, text, primary, and accent. Add shades or semantic state colors only when the design needs them.
What is the difference between HEX, RGB, HSL, and OKLCH?
HEX and RGB encode screen channel values. HSL describes hue, saturation, and lightness in an intuitive but perceptually uneven space. OKLCH makes many lightness and colorfulness changes feel more consistent across hues.
Are generated palettes automatically accessible?
No. Harmony does not guarantee readable contrast. Test the exact foreground and background pair, and do not rely on color alone to communicate meaning.
How do I export CSS variables?
In Export & share, choose CSS variables, then copy the paste-ready code or download it as a CSS file.
Can I share a palette?
Yes. Copy shareable URL encodes the current colors, harmony, locks, preset, base color, and role assignments in the link.
Does palette or image data leave my browser?
No. Generation, image sampling, previews, history, favorites, and exports run locally. This tool does not upload the selected image.
Methodology & limitations
- Color space
- Generation uses OKLCH, converted to sRGB with chroma reduced when a requested color falls outside the sRGB gamut.
- Harmony rules
- Analogous spans h±30°; complementary uses h+180°; split-complementary uses h+150° and h+210°; triadic uses 120° spacing; square tetradic uses 90° spacing; monochromatic holds hue constant.
- Locked colors
- All locks are preserved and jointly influence the circular hue anchor and average lightness/chroma for regenerated suggestions.
- Contrast
- WCAG 2.2 relative luminance and thresholds: 4.5:1 normal-text AA, 3:1 large-text AA, 7:1 normal-text AAA, and 4.5:1 large-text AAA.
- Processing
- JavaScript, Canvas image sampling, local history, and exports run in your browser. No account or upload is required.
- Requirements
- A modern browser with JavaScript, Canvas, Blob downloads, URLSearchParams, and localStorage. Clipboard access may require HTTPS or browser permission.
- Limitations
- Displays vary, image extraction uses quantized sampling rather than color-managed clustering, simulations are approximations, and attractive harmony does not ensure accessible or culturally suitable use.
Editorial review: Starlight Robotics · Last reviewed: 17 July 2026