Edit and lock are separate
Edit selects a swatch for HEX input. Lock preserves that swatch during generation; it does not prevent you from deliberately editing it. Select its lock again to release it.
ONELESS / COLOR
Color Palette Generator
A palette is a small set of decisions that should work together. Generate a starting combination, change a shade, lock what you want to keep and explore the rest. The composition preview shows the colors together without promising that every pair is suitable for text.
Open Color Palette Generator. JavaScript powers the workspace; the full guide is available below.
UNDERSTAND THE RESULT
Color, with a little context.
Direction guides exploration
Soft, Earthy and Bright vary the saturation of generated HSL combinations. These are starting points for visual work, not established brand palettes or guarantees of harmony.
A palette is not an accessibility result
A pleasing combination can still have weak contrast. Check the actual foreground/background pairs and the size of the text separately.
HOW TO USE IT
From a starting point to a usable result.
- Choose 3 to 8 colors and a generation direction. Generate palette creates a new combination.
- Select Edit on a swatch to change its HEX value. Lock favorites before generating again. If every swatch is locked, unlock one to continue.
- Undo returns to the previous palette or size. Copy HEX exports a list; CSS exports numbered custom properties.
A WORKED EXAMPLE
Keep a brand anchor
Edit the first swatch to #263F3A and lock it. Generate another palette: the first color remains #263F3A while unlocked colors change. Copy CSS to obtain --color-1 and the other numbered variables.
EVERYDAY USES
Make the next small decision easier.
Explore a page direction
Keep an existing brand accent while trying backgrounds and supporting shades. Review the small composition preview and check real text contrast.
Prepare a reusable color set
Copy CSS variables into a draft stylesheet, then give them semantic names such as --surface or --accent according to their actual use.
LOCAL WORKSPACE
Your work stays in this browser.
The tool processes color values locally. It does not upload the input to a processing server or save it in browser storage. Leaving or reloading the page clears the working state. Copying places the selected result on your clipboard; sharing sends only the page address without your working values.
These tools describe sRGB colors. Browser decoding, color management and the display can affect what you see; they are not an ICC proofing workflow or a print-color guarantee. Read the site privacy policy for information about the surrounding website.
KEEP IT NEARBY
One less search next time.
Press Ctrl + D on Windows or Command + D on Mac to bookmark this page. Your browser may also offer Create shortcut or Add to Home Screen. Shortcuts open the tool; they do not include your colors or images.
Choose a shortcut icon
Soft Coral
Warm Peach
Sunset Orange
OneLess Blue
Rose PinkQUESTIONS, ANSWERED
A few useful details.
Does locking survive a new generation?
Yes, for swatches that remain in the palette. Reducing the size removes swatches from the end, including their locks. Undo can restore the previous size and colors.
Can I use transparency?
Palette swatches are opaque 3- or 6-digit HEX colors in this release. Use Color Picker to create an alpha variant afterward.
What does Undo restore?
Up to twenty previous palette edits, generations or size changes. It is local to the current workspace and is cleared when you leave.
Are generated colors accessible?
Not automatically. Use Color Contrast Checker for each text/background pair. A palette alone cannot certify a page’s accessibility.
How do I build a palette around one brand color?
Edit a swatch to your brand HEX and lock it before generating again. The unlocked swatches can change while your chosen anchor remains.
How many colors can I generate?
Choose from three to eight swatches. A smaller palette can be easier to assign to specific roles; more swatches give you additional accents to review.
Can I copy the palette as CSS variables?
Yes. Copy the CSS output for a set of reusable variables, or copy the color list when you only need the values. Assign foreground and background roles after checking their contrast.
REFERENCES
ANOTHER SMALL STEP
Keep the next tool close.
Ready for a little more color?
Keep the colors you love. Find the ones that complete the picture.
Return to Color Palette Generator ↑