Website Color Scheme Generator
A complete light and dark theme from your brand color.
Pick your brand color and get a ready color scheme for a website or app: tinted backgrounds and surfaces, borders, text and muted text, a primary color adjusted to stay readable, and a matching accent, each for a light and a dark theme. A live preview shows a card with text and buttons, and the whole scheme is ready to copy as CSS custom properties, with the dark theme following the system setting.
How to generate a website color scheme
- Step 1
Choose your brand color.
- Step 2
Check the light and dark previews.
- Step 3
Copy the CSS variables.
Why use PhotoTools
Light and dark
Two matching themes at once.
Readable by design
Primary and accent keep at least 3:1 contrast.
Ready for code
CSS custom properties with dark mode.
Supported formats
Output
- CSS
Frequently asked questions
Why is the primary color a bit different from mine?
If your color is too light or too dark against the background, it is shifted just enough to reach a 3:1 contrast, so buttons stay visible.
How do I use the CSS?
Paste it into your stylesheet and use the variables, for example background: var(--color-primary). The dark theme switches with the system setting.
Is it free?
Yes. Browser tools on PhotoTools are free, unlimited and work without an account.
Are my images uploaded to a server?
No. This tool runs entirely in your browser using WebAssembly. Your images never leave your device, and nothing is stored.