Your Color Palette
Palette Controls
Keyboard shortcuts: Space generate, Ctrl/⌘ Z undo, and Ctrl/⌘ Y redo.
Base Color Controls
Accessibility Checker
Live Palette Preview
Design a consistent visual system.
This mock interface shows how your selected palette behaves across common website elements.
Review surfaces, text, accent colors, and interactive elements together.
Example linkGradient Generator
Extract Palette From Image
Image processing happens locally inside your browser.
Export and Copy
Saved Palettes and History
Saved palettes
Recent history
Favorite colors
Import Palette
Example Data
| Role | Color | HEX | RGB | HSL |
|---|---|---|---|---|
| Primary | Blue | #3366FF | 51, 102, 255 | 225°, 100%, 60% |
| Secondary | Yellow | #FFCC33 | 255, 204, 51 | 45°, 100%, 60% |
| Accent | Green | #22AA88 | 34, 170, 136 | 165°, 67%, 40% |
Formula used
Harmony modes rotate hue positions around the HSL color wheel. Complementary colors use a 180 degree hue offset.
Triadic colors use approximately 120 degree spacing between hues. Relative luminance follows the standard sRGB linearization method.
Contrast ratio uses brighter luminance plus 0.05 divided by darker luminance plus 0.05. WCAG thresholds then classify readable color pairs.
How to use this calculator
Choose the number of colors and a harmony method. Select a base color when you need controlled results.
Adjust saturation, lightness, similarity, or randomness for your project. Lock useful swatches before generating another palette.
Check text contrast before using colors in interfaces. Assign palette colors to preview roles and inspect results.
Use image extraction when artwork already defines the visual direction. Export the finished palette in your preferred format.
Color Palette Guide
A color palette is a coordinated group of visual colors. Good palettes create hierarchy while supporting a consistent identity.
Monochromatic palettes vary one hue through saturation and lightness. They often produce calm and controlled interface systems.
Analogous palettes use neighboring hues on the color wheel. Their relationships feel natural because hue changes remain gradual.
Complementary palettes place opposite hues together for strong contrast. Use the brightest combination carefully around large surfaces.
Triadic palettes distribute three hues evenly around the wheel. They create balanced variety without relying on adjacent colors.
Tints mix a color toward white for lighter variations. Shades push the same hue toward black for depth.
Tones reduce intensity by moving toward a neutral middle. These variations can produce restrained professional interface colors.
HEX values are compact and common in website styling. RGB describes red green and blue channel intensity.
HSL separates hue saturation and lightness into understandable controls. Designers can adjust visual relationships more deliberately.
Accessibility requires more than selecting attractive colors. Text must remain readable against its surrounding background color.
WCAG contrast ratios offer practical readability targets for interfaces. Larger text can pass with lower contrast thresholds.
Brand palettes usually need clear functional color roles. Primary colors support recognition while accents highlight important actions.
Background and surface colors should avoid unnecessary visual competition. Text colors should preserve legibility throughout different states.
Image extraction helps match an existing photograph or illustration. Dominant colors provide a useful starting palette quickly.
Gradients can connect two or more palette colors smoothly. Check resulting text contrast across the complete gradient area.
Warm hues often communicate energy comfort and urgency. Cool hues can communicate calm precision or technical qualities.
Pastel palettes use higher lightness with controlled saturation levels. Neon palettes use intense saturation and stronger visual contrast.
Saving multiple palette versions makes comparison easier during design. It also protects useful combinations before further experimentation.
Exported CSS variables improve consistency across interface components. Named roles make future maintenance easier for development teams.
Always test palettes on real interface components before publishing. Context changes how every selected color appears to users.
Accessible palettes improve clarity across many viewing conditions. Strong systems balance aesthetics readability hierarchy and flexibility.
Use this generator to explore combinations before finalizing designs. Thoughtful testing produces dependable and reusable color systems.
Clear role assignments keep interfaces predictable across pages. Consistent colors help users recognize important actions immediately.
Review every palette under light and dark surroundings. Final choices should remain useful across realistic design contexts.