Palettes
Colour systems for any site.
22 curated, contrast-checked colour palettes — 11 light and 11 dark. Preview each one, then open it to tweak every colour live and copy the CSS variables.
Start here
What a colour palette is here
Not a swatch board you screenshot — a working set of colour roles the whole platform understands.
Most colour palettes you find online are five squares and a hex code. They look beautiful and then you still have to decide, by hand, which one is the button, which one is the card, and what the small grey text underneath is supposed to be. That last mile is where a good palette usually falls apart.
A palette on code-anything is defined by what each colour does. Every one of the 22 palettes in this library sets the same seven roles — background, surface, text, muted, accent, accent 2 and border. Because the roles are constant, the colours are portable: the design system, the templates, the elements library and the code the agent writes all read the same tokens, so swapping palettes repaints a product instead of breaking it.
They are also chosen as sets, not as individual colours. A text colour is only ever good against a background, an accent is only ever good next to the surface it sits on. That is what contrast-checking means here: each palette is reviewed as a whole so body copy stays legible, muted copy stays secondary, and the accent stays loud enough to act like a button.
Anatomy
The seven roles in every palette
One vocabulary, shared by every palette, template and generated app.
| Role | CSS variable | What it carries |
|---|---|---|
| Background | --bg | The page canvas — the biggest area on screen, and the colour every other role is judged against. |
| Surface | --surface | Cards, panels, nav bars and modals. One quiet step off the background so grouped content reads as a layer. |
| Text | --text | Headings and body copy. The highest-contrast colour in the set, and the one that decides whether the page is comfortable to read. |
| Muted | --muted | Secondary copy, captions, metadata and placeholders — present, but never competing with the text colour. |
| Accent | --accent | The brand colour: primary buttons, links, active states and highlights. The colour people will remember the product by. |
| Accent 2 | --accent2 | The supporting accent for gradients, secondary buttons, badges, charts and illustration — so the palette has range without a second brand. |
| Border | --border | Hairlines, dividers and input outlines. Separates regions without drawing a hard box around everything. |
The same seven roles the palette editor exposes — and the same names it copies to your clipboard as CSS custom properties.
The pair of accents is the part people underuse. Accent is your brand: it should appear on the primary button, the active nav item and the links, and almost nowhere else. Accent 2 is the release valve — the second colour in a gradient, the badge on a card, the second series in a chart — so a design can have range without looking like it has two logos.
Background and surface are the other pair worth understanding. Keeping them close together gives a calm, flat, editorial page; pushing them apart makes cards and panels pop and suits dense product UI. Border then does the fine separation neither of them should be asked to do.
The library
Browse all 22 colour palettes
Ready-to-use colour systems — 11 light and 11 dark, grouped by mood. Open one to edit it.
Professional
6 palettes
Blues, indigos, slate and glacier teal — the safe, legible end of the library. Built for SaaS products, dashboards, B2B marketing sites, finance and clinical tools, where the colour should build trust and then get out of the way of the content.
Aurora
lightModern · trustworthy · premium SaaS
Open & editMidnight
darkDark · technical · electric
Open & editCampus
lightFriendly · optimistic · clear
Open & editRoyal
darkRegal · trusted · premium
Open & editArctic
lightClean · precise · crisp
Open & editSlate
lightProfessional · measured · corporate
Open & editVibrant
6 palettes
The expressive end: hot magenta, coral, lime, orchid and crimson. These palettes lead with the accent, so they suit music, events, nightlife, gaming, beauty and consumer brands that would rather be remembered than be quiet.
Warm
3 palettes
Cream, terracotta, caramel and espresso. Warm palettes carry a hand-made, editorial feeling that works for food and drink, craft goods, hospitality and cause-led brands — inviting rather than corporate.
Natural
4 palettes
Greens and teals drawn from forest, sage, ocean and lagoon. Calm and organic, and the obvious starting point for wellness, sustainability, outdoor, travel and health brands.
Minimal
3 palettes
Near-neutral systems — white and soft grey, near-black, or a straight monochrome — where the accent is deliberately restrained. Choose one of these when typography, photography or product imagery should carry the whole design.
Choosing
How to choose a colour palette for your product
Start from the job the site has to do, not from the colour you personally like most.
SaaS, B2B and dashboards
Long sessions and dense data. Pick a palette with a calm background, a clearly separated surface and one confident accent so status and actions stand out.
Commerce and retail
Product photography has to look right, so the background should stay neutral and the accent should be reserved for price, cart and checkout.
Health, science and wellness
Credibility first. Cool, clean palettes read as clinical and precise; muted greens read as restorative and unhurried.
Food, hospitality and craft
Warmth sells appetite and welcome. Cream and clay backgrounds photograph well behind menus, rooms and shelves.
Media, gaming and nightlife
Dark grounds make luminous accents glow. These palettes are loud on purpose — use them where energy matters more than restraint.
Editorial, portfolio and studio
When the work is the design, the palette should be a frame. Monochrome and single-accent systems keep attention on the type and the images.
Three questions settle most decisions. First, how much of the screen is content you did not design — photography, video, user-generated posts? The more of it there is, the more neutral your background and surface should be. Second, how long is a session? Something people live in all day argues for a low-drama palette and one loud accent; something people visit for ninety seconds can afford to be striking. Third, what already exists? If you have a logo or a brand colour, treat it as the accent and pick the palette whose neutrals flatter it, rather than fighting for a perfect match.
And if none of the 22 is right, none of this is a cage. Open the closest one, edit the accent to your brand colour and keep the rest — or describe the look you want in chat and let the agent build the design system with you. The templates library is the other starting point when you want the layout decided as well as the colour.
Light and dark
Light mode, dark mode, and what actually changes
The library is deliberately even: 11 light palettes and 11 dark ones.
Light palettes (11)
Dark text on a pale ground. Separation comes from small surface shifts and hairline borders rather than from heavy blocks of colour, which is why the border role matters so much here. Light palettes suit marketing sites, documentation, commerce and anything printed or screenshotted often. Ocean, Sage, Arctic and Boutique are the quietest of them; Citrus and Blossom carry the most colour.
Dark palettes (11)
Pale text on a deep ground, where a single luminous accent carries enormous weight — Midnight’s cyan, Neon’s magenta, Forest’s gold. Dark palettes flatter dashboards, developer tools, media and anything with a cinematic mood. They are less forgiving of low-contrast greys, so the muted role is doing careful work in every one of them.
Each palette is authored for one mode and shown with a light or dark badge on its card above, and that mode drives readable defaults wherever it is previewed. A dark palette is not simply its light counterpart inverted — inverting a light system usually produces muddy greys and accents that glare — which is why they are designed separately.
If your product needs both, the pragmatic route is to choose a light palette and a dark palette from a related accent family — Ocean and Lagoon are both teal-green, Boutique and Mono are both monochrome — then ask in chat for the two to be wired to a theme toggle. Because the colours are roles rather than hex codes, a second theme is a second set of token values, not a second stylesheet.
Recolouring
How a palette propagates through a generated app
Picking a colour here is not a preview trick — it reaches the code.
Colours are roles, not hex codes
Nothing in a generated design references a raw hex. Every fill, border and text colour is bound to a role token, so swapping the palette restyles every token-bound value at once — layout, spacing and content are untouched.
The preview recolours live
Switch palettes in the Studio preview and the whole document restyles immediately. A switch — or a single token edit — is one undoable step, so trying five palettes costs you nothing.
The build inherits your choice
The palette you pick is saved with the project and carried into the build instruction, so the app is generated in those colours from the first file rather than repainted afterwards.
Templates and elements follow
Every template ships its own palette, and the elements library re-themes to whichever palette you have selected — so a button you drop in matches the page it lands on.
Editing
How to edit a palette and make it your own
Every palette page opens an editor. Nothing here is read-only.
- Click any swatch to open your operating system colour picker, or type a hex value straight into the field.
- The live preview beside the swatches re-renders as you go — nav, hero, buttons, cards and muted copy — so you judge the colour in context rather than as a chip.
- Copy CSS variables puts a plain :root block of custom properties on your clipboard, ready to paste into any stylesheet.
- Reset returns the palette to the version published here, so experimenting is never destructive.
- Build with this palette hands the exact colours to the agent and starts a project in them.
:root {
--bg: #ffffff;
--surface: #f6f8fc;
--text: #0d1426;
--muted: #5d6675;
--accent: #5a63f0;
--accent2: #8b5cf6;
--border: #e6e9f1;
}Seven custom properties, no framework, no build step. Map them onto your own components and the palette works anywhere — or hand the same values to the agent and let it build the app in them. Open Aurora in the editor.
A practical way to work: keep the neutrals, change the accents. The background, surface, text, muted and border colours are what make a palette feel resolved, and they are the hardest to get right by eye. Drop your brand colour into accent, find a supporting tone for accent 2, and you have a bespoke system in about a minute that still behaves like a designed one.
The one thing to watch is that the editor trusts you. Any hex you type is accepted, so a heavily customised palette no longer inherits the review the published version had — check your text-on-background and accent-on-surface pairings before you ship.
Accessibility
Colour accessibility basics worth knowing
Six rules that prevent most colour problems, whichever palette you land on.
- Body text wants a strong separation from the background — the widely used floor is a 4.5:1 contrast ratio, and 3:1 for large or bold headings.
- Interface furniture counts too: icons, input outlines and focus rings are usually held to 3:1 against whatever sits behind them.
- Never let colour be the only signal. Pair it with a label, an icon or a shape so the meaning survives colour-blindness and greyscale printing.
- Accent colours are for emphasis, not for paragraphs. A vivid accent that looks superb on a button is often unreadable as running text.
- Test the pairings you actually ship — text on surface, muted on surface, accent on background — not just text on the page background.
- Re-check after you edit. The editor accepts any hex you type, so a palette you have customised is your responsibility, not the library default.
Contrast ratios are a floor, not a target. Two colours can clear the threshold and still be tiring to read for an hour, which is why the palettes here treat text, muted and background as a set rather than as three independent choices. It is also why muted is a first-class role: the most common accessibility failure in real products is secondary copy that has been lightened until it disappears.
Accessibility is a property of the finished page, not of a set of hex codes — font size, weight, imagery behind text and state changes all move the result. Treat these palettes as a good starting point and verify the combinations you actually ship.
The three libraries
Palettes, templates and elements — how they fit together
Colour, layout and components are separate choices on purpose, so you can mix them.
Palettes
Colour only — 22 systems of seven roles each. Choose one when you already know the shape of your product and need the colour direction settled.
Back to the galleryTemplates
Whole design systems — palette, type, radius and component rules — with starter code for a specific kind of site. The fastest route from nothing to something.
Browse templatesElements
Drop-in buttons, cards, inputs, toggles and loaders that re-theme to the palette you have selected, then go straight into your app.
Browse elementsFAQ
Frequently asked questions about colour palettes
Found your colours? Build with them.
Describe your app and apply any palette — the whole design system follows your colours.