A cool color palette is built from the green-to-violet half of the color wheel — blues, teals, sea greens, ice and slate — so the set reads as calm, trustworthy and receding.
Cool hues recede: they sit comfortably behind content, which is why blue is the default interface primary and why the cool palettes in the catalog skew toward finance, enterprise, medical and tech. Teal and sea green add life without leaving the family; ice and frost make canvases that are not quite white.
A cool palette's natural accent is warm — orange, gold, coral — and a single warm accent on a cool field is the most reliable emphasis scheme there is. Without one, emphasis has to come from lightness alone.
7 cool palettes below, each with its named colors, the eight roles the palette generator derives from them, and a link that opens the generator on that palette.
Deep, trusting blues scaling up to an active teal — the reliability of banking software with a modern accent for primary actions. (corporate & finance)
As the eight interface roles
Crisp, sterile, and highly professional cool blues and clear teals — cleanliness and precision for healthcare or scientific dashboards. (medical & enterprise)
As the eight interface roles
Calming and breezy coastal tones. Perfect for bed-and-breakfasts, travel blogs, or wellness apps aiming to reduce stress. (hospitality & travel)
As the eight interface roles
A muted, desaturated progression from deep teal to pale foam. A soothing, spa-like environment for health and personal care brands. (spa & wellness)
As the eight interface roles
Cool, professional blues from deep ocean to icy highlights. Excellent for developer tools or modern SaaS dashboards. (tech dark mode)
As the eight interface roles
A cool color scale graduating to sharp, acidic greens and violets seen in polar lights. (modern tech & winter)
As the eight interface roles
Rich emeralds and mints signifying growth, prosperity, and stability. Well-suited for fintech or investment apps. (finance & trust)
As the eight interface roles
Let the deepest blue or teal be the primary, tint the neutrals toward the same hue so the grays belong, and add one warm accent for the single element per screen that must be seen first. The semantic palette guide explains the eight roles, and the guide to choosing colors for an app walks through the order to decide them in.
Every palette here is a starting point in the palette generator: open one, drag any anchor on the wheel or swap the primary for your brand color, and copy the CSS variables. The theme generator takes it the rest of the way to a Tailwind v4 stylesheet with dark mode.
Open the palette generatorWe'd like to use Google cookies to understand how Nodlume is used and to measure our advertising. Nothing loads until you choose, and declining does not affect anything in the app.
Nodlume