How to make a website color theme
- Enter your main brand color, or upload a photo, logo, or product shot and click the color you want to build around.
- Choose a color scheme to set how the secondary and accent colors relate to your main color.
- Lock any color you love, then tap Shuffle (or press the space bar) to try new combinations for the rest. Click a color's swatch to set it by hand.
- Check the preview in light and dark mode. Readability problems are fixed automatically and listed under Readability checks.
- Copy the code for CSS, Tailwind, SCSS, or JSON, or download Adobe swatches and a palette image for your design apps.
When it comes in handy
- Building a site from a photo. Pull a palette from your best shot so the website feels like your work.
- Starting from a logo. Turn one brand color into backgrounds, buttons, borders, and text colors that all fit together.
- Adding dark mode. Get a matching dark theme that keeps the same personality and stays readable.
- Handing off to a developer. Export ready-to-paste CSS variables or a Tailwind config instead of a list of hex codes.
Frequently asked questions
What do primary, secondary, and accent colors mean?
Primary is your main brand color, used for key buttons and links. Secondary supports it in less important places, like alternate buttons and section backgrounds. Accent is a small pop of contrast for badges, highlights, and calls to action. Neutrals are the grays used for text, borders, and backgrounds, and they make up most of a page.
What are the numbers 50 to 950?
Each color comes as a scale from very light (50) to very dark (950), the same system Tailwind CSS uses. Light steps work for backgrounds, middle steps for buttons, and dark steps for text. The steps are built with OKLCH so they look evenly spaced to the eye.
How does the readability check work?
Every text and background pair is tested against the WCAG contrast guidelines. Normal text needs at least 4.5 to 1. When a pair falls short, the tool moves to a lighter or darker shade of the same color until it passes, and lists what it changed.
How are colors picked from my image?
The image is shrunk and its pixels are grouped into the most common color families. The tool suggests the most vivid of the larger groups as your main color, but you can click any of them instead.
Can I use these colors in Canva, Photoshop, or Illustrator?
Yes. Copy hex codes straight from the scales, or download the .ase file, which imports into Adobe apps as a swatch library. The PNG palette image is handy for brand guides and for sharing with clients.
Is my image uploaded?
No. The image is read in your browser and never sent to our server.