Anvil Tools
Background Remover
Remove the background from a photo automatically, processed locally in your browser.
Open tool →Color Palette Generator
Click generate for a set of five colors that work well together, built from a rotating hue with varied lightness. Lock any swatch you want to keep and generate again to fill in the rest around it.
Generate a palette
Use a palette in a small design
Choose an accent for a heading, lock that swatch, and generate alternatives for the remaining colors. Export CSS variables when the combination works in the actual design. The preview covers its displayed pair, not every swatch combination or interface state.
| Input or check | Expected result or decision |
|---|---|
| Lock one swatch, then generate | The locked value remains while unlocked swatches can change. |
| Dark text on a pale surface | Check that exact pair at the intended font size. |
| An accent on a button | Also inspect focus, hover, disabled text, and button boundaries. |
| Preview text against the first swatch | The displayed ratio compares the first swatch with its displayed #000000 or #FFFFFF text color, not the other swatches. |
How it works
- A base hue is picked at random, then four related hues are generated around it at increasing lightness.
- Each swatch shows its hex code, ready to copy into a design tool or CSS file.
- Lock a swatch to keep it fixed while regenerating the others.
Common uses
- Finding a starting color scheme for a website or slide deck.
- Generating quick color ideas for a logo or brand exploration.
- Building a palette of chart colors for a data visualization.
Your privacy matters here: check the FAQ below for exactly what happens to anything you enter into this tool.
Build a usable color system
Start with a brand color, choose a harmony, and lock colors you want to keep. Copy CSS variables into your stylesheet. The preview checks black or white text against the first swatch; it does not certify every color pair in the palette.
A practical walkthrough
- Generate a palette for a presentation, keep colors you like, and explore alternatives for the remaining swatches.
- Try the colors on actual headings, backgrounds, and buttons before committing to the palette.
- Copy individual swatch values or use Copy CSS variables. Check contrast for the exact text and background pair you intend to use.
Tips for a reliable result
A visually pleasing palette does not guarantee readable contrast. Check your chosen foreground and background pairs separately.
What to use next
These tools open separately; inputs are not transferred.
QR Code Generator
Turn any link or short message into a scannable QR code you can download as an image.
Open tool →Image to PDF Converter
Turn JPG, PNG, or WebP images into ordered pages in one downloadable PDF.
Open tool →Password Generator
Create a strong, random password with adjustable length and character types.
Open tool →How this tool handles your data
Palette generation and color locking happen in your browser. No palette values are uploaded to an Anvil processing server.
Known limitations
Generated colors are starting points, not an accessibility guarantee. Check contrast, color-vision needs, print behavior, and brand requirements separately.
Related guide and Lab test
Questions and troubleshooting
Are these palettes accessible for text and backgrounds?
Not automatically. Always check contrast between text and background colors separately using a contrast checker before finalizing a design.
Can I export the palette?
Each swatch shows its hex code, which you can copy directly into your design software or CSS.
Why do locked colors stay the same?
Locking a swatch excludes it from the next randomization, so you can build a palette around a color you've already decided on.
When palette or contrast results look wrong
Check which swatches are locked before generating another palette. Evaluate the exact foreground and background pair used in the design, including text size and hover states. A contrast preview for one pair does not validate every combination in the palette.
Does a generated palette meet accessibility contrast requirements?
A palette alone does not establish contrast. Check the exact text and background pair, font size, and control boundaries before using the colors in an interface.
How do I keep a color while exploring alternatives?
Use the lock control for the swatch you want to retain, then generate again. Copy the color value or export CSS variables when you have a combination you want to keep.
Read the practical guide
From Five Colors to a Usable Interface: Building an Accessible UI Palette
Turn five color swatches into a usable UI system with semantic roles, accessible contrast, button states, status colors, design tokens, and WCAG checks.