A blue-dominant palette spanning from near-white cool blues to a deep cobalt velvet, with enough tonal variation to build a complete interface hierarchy from a single hue family. The cobalt-mist-muted is the palette entry point: an airy, barely-blue surface color that reads as a refreshed white alternative for application backgrounds. The azure-pearl-soft provides the next step down — visible but still light, appropriate for card surfaces, sidebar fills, or secondary containers. The cerulean-tone-soft is the palette's mid-value workhorse: saturated enough to read as deliberate blue without being heavy, suited to navigation elements, selected states, and section headings. The cobalt-velvet-clear is the concentrated payload of the palette — a rich, mid-dark blue with enough chroma to function as a primary action color or brand identifier without requiring the full saturation of a vivid. The sapphire-shadow-soft anchors the dark end: deep, slightly desaturated, useful for text, dark headers, or near-neutral dark fills. This palette avoids the cold, corporate feeling of a generic blue system by ranging from warm-white entry tones to blue-dominant but not harsh midpoints. Use it for productivity software, professional service dashboards, or technology products where calm focus and quiet authority are the primary emotional goals.
This palette works because it builds a complete tonal range from a single blue-cobalt region of the spectrum rather than mixing multiple hue families. The result is cohesive without being monotonous — each entry is distinguishable by lightness while the family relationship is always evident. Assign roles clearly: cobalt-mist-muted for backgrounds, azure-pearl-soft for cards, cerulean-tone-soft for interactive elements, cobalt-velvet-clear for primary CTAs, sapphire-shadow-soft for body text and deep fills. In dark mode, reverse the weight: sapphire-shadow-soft becomes the background, cobalt-velvet-clear the elevated surface, and cerulean-tone-soft the interactive accent.
Cool cobalt and sapphire blues in a range from pale mist to deep velvet — for productivity tools, SaaS dashboards, and focus-oriented product UI.
Each swatch links back to its individual archive detail page.
Ready-made tokens for Cobalt Morning
Copy the HEX, CSS and Tailwind on this page any time. The ZIP and dark-mode tokens count toward the free 3 exports a day (10 when signed in); Pro removes that cap on every export, including Figma tokens and Procreate swatches in the palette builder.
This collection proves the taste and color direction. Pro removes the daily export cap on every token format, so the palette can move from reference to implementation without rationing.
| Layer | What you have here | What Pro adds |
|---|---|---|
| Scope | One curated palette of 5 colors. | The same palettes, with no daily export cap anywhere on the site. |
| Output | HEX, CSS and Tailwind to copy any time. The ZIP and dark-mode tokens count toward the site's free exports: 3 a day, 10 when signed in. | No daily limit on any export: this ZIP (CSS, Tailwind, JSON, SCSS), the dark-mode tokens, and Figma tokens and Procreate swatches in the palette builder. |
| Use case | Direction finding, inspiration, and public proof. | Real project handoff, implementation, and reusable production assets. |