All free tools
SaaS theme generator: a full palette from one colour
Enter your brand colour and get a full website theme: canvas, ink, a deep band and one accent for calls to action. Every text pair is checked for WCAG AA contrast and fixed if it fails.
Hex code, like #0F4C4F.
Contrast (WCAG AA)
| Pair | Ratio | Result |
|---|---|---|
| Ink on canvas | 10.0 : 1 | AA pass |
| Soft ink on canvas | 5.6 : 1 | AA pass |
| Text on accent | 4.6 : 1 | AA pass |
| Canvas on deep | 7.6 : 1 | AA pass |
Every pair passes AA as generated. No fixes were needed.
Live preview
NorthwindProductPricingDocsStart free
New: team workspaces
Ship your reports before the coffee cools
Connect your data once. Northwind writes the weekly update and sends it to the team.
Get started See a demo
Connect
Plug in your sources in a few clicks.
Write
Clear summaries in your team's voice.
Share
Send to email, chat or a link.
Ready when your team is
Free for small teams. No card needed.
Palette roles (click to copy a hex)
Export
:root {
--canvas: #D8E8E9;
--surface: #E7F1F2;
--sunk: #CBDFE0;
--ink: #10383A;
--ink-soft: #3F5D5F;
--border: #B5D0D1;
--hairline: #C2D8D9;
--deep: #0F4C4F;
--accent: #EE7B63;
--on-accent: #10383A;
--accent-tint: #F8C9BF;
}
Questions
- How do I pick website colours from one brand colour?
- Keep the brand hue and change only lightness and saturation. Use a pale, low-saturation tint for the background, a very dark shade for text and a dark, rich shade for bands and the logo. Then pick one accent from the colour wheel, such as the complement, and use it only for calls to action.
- What is the 60-30-10 rule?
- It is a balance guide for colour. About sixty parts of the page are the main neutral colour, thirty parts are the secondary colour and ten parts are the accent. On a SaaS site the canvas is the sixty, the ink and deep band are the thirty and the call to action is the ten.
- How do I check colour contrast?
- Compare the relative luminance of the text and its background with the WCAG formula. Normal text needs a ratio of at least 4.5 : 1 for level AA, and large text needs 3 : 1. This tool checks the main pairs and adjusts lightness until each one passes.
- Does it work with shadcn/ui and Tailwind?
- Yes. The Tailwind tab gives a Tailwind v4 @theme block, so classes like bg-canvas and text-ink work at once. The shadcn/ui tab maps the palette to background, foreground, card, primary, muted, border, ring and the other shadcn variables.
See your theme on a full landing page
BlockSnap builds a complete SaaS landing page in your colours, and you can swap any section in one click.
Get early access