We're live on Product Hunt!Support us
ColorArchive

A curated color library with 5,000+ algorithmically generated colors. Browse, search, save favorites, and export palette tokens — no account required.

CollectionsFamiliesNotesGuidesFree ResourcesConvertColorblindAboutSupportUpdates
Ready for static export
Privacy·Terms·Refunds·Cookies·Commerce Disclosure
colorarchive.org · © 2026 ColorArchive
Skip to content
ColorArchive
ProLog in
ArchiveAll ColorsCollections
Collection detail

Cobalt Spectrum

The cobalt spectrum is a functional monochromatic system palette built for serious digital products. Rather than curating hue variety, it commits fully to cobalt blue across five perceptually spaced lightness levels: a near-white pale for backgrounds, a soft mid for surfaces and containers, the saturated core for interactive elements and brand moments, a deep velvet for text and secondary actions, and ink for maximum contrast. This palette architecture reflects how professional design systems actually work — most colors in a UI are the same hue at different intensities, with rare accent interventions from the broader palette. Cobalt-whisper-muted functions as the warm white substitute for surfaces and backgrounds, light enough to feel clean without reading as stark; cobalt-silk-soft provides the medium-light card and container surface, visually anchored in the hue family without competing with the interactive tier; cobalt-core-clear is the system's action color — saturated enough to attract attention, light enough to carry white text at AA compliance; cobalt-dusk-soft enters the darker register for secondary UI elements, navigation items, and supporting text; cobalt-ink-muted provides maximum contrast for primary typographic elements and the darkest surface in a dark-mode configuration.

Cobalt spectrum is a design system architect's palette, not an editorial or brand palette. It assumes that most layout decisions — color management, hierarchy, attention direction — will be made within the cobalt hue family, with external colors (error red, success green, warning amber) appearing as exception states only. Before implementing this as a full system, audit your product for color use: if your UI needs more than 4-5 distinct hue families to function, a monochromatic system will feel constraining. But for products that currently use 15+ ad-hoc colors, reducing to a disciplined cobalt spectrum often dramatically improves visual coherence. Photography and illustration direction should lean toward complementary warmth (amber, terracotta, cream tones) as the cobalt system's natural environmental contrast partner.

MonochromaticSystemProfessional
Why this set works

A five-step monochromatic cobalt scale — from whisper pale through deep ink — the complete system blue for professional digital products.

Enterprise SaaS products
Fintech and banking applications
Design system documentation
Corporate digital products
Professional web applications
Prompt words
professional web application dashboard in cobalt blueSaaS product interface with monochromatic navy systemfintech app design in deep cobalt with light blue backgroundsdesign system documentation in blue monochromatic palettecorporate intranet in professional cobalt blue scale
Export ready
1. Cobalt Whisper Muted #EDEFF2
2. Cobalt Silk Soft #92A4C9
3. Cobalt Core Clear #3864BC
4. Cobalt Dusk Soft #394D74
5. Cobalt Ink Muted #1D222A
--cobalt-spectrum-1: #EDEFF2;
--cobalt-spectrum-2: #92A4C9;
--cobalt-spectrum-3: #3864BC;
--cobalt-spectrum-4: #394D74;
--cobalt-spectrum-5: #1D222A;

3/3 free exports remaining today

Dark mode pairs
#EDEFF2
#16191D
#92A4C9
#45587D
#3864BC
#9BB0DA
#394D74
#788CB5
#1D222A
#E2E5E9

3/3 free exports remaining today

WCAG contrast audit

WCAG contrast ratios for all palette color pairs against white and black text.

#EDEFF2
1.2:1 Fail
18.2:1 AAA
#92A4C9
2.5:1 Fail
8.4:1 AAA
#3864BC
5.6:1 AA
3.7:1 AA Large
#394D74
8.4:1 AAA
2.5:1 Fail
#1D222A
16:1 AAA
1.3:1 Fail

Color-on-color pairs:

+
2.2:1 Fail
+
4.9:1 AA
+
7.3:1 AAA
+
13.9:1 AAA
+
2.3:1 Fail
+
3.4:1 AA Large
+
6.4:1 AA
+
1.5:1 Fail
+
2.8:1 Fail
+
1.9:1 Fail

3/3 free exports remaining today

Palette

Each swatch links back to its individual archive detail page.

Back to collections
1
Cobalt Whisper Muted
#EDEFF2
Blue · hsl(220, 18%, 94%)
2
Cobalt Silk Soft
#92A4C9
Blue · hsl(220, 34%, 68%)
3
Cobalt Core Clear
#3864BC
Blue · hsl(220, 54%, 48%)
4
Cobalt Dusk Soft
#394D74
Blue · hsl(220, 34%, 34%)
5
Cobalt Ink Muted
#1D222A
Blue · hsl(220, 18%, 14%)
Editorial direction

Collections should do more than group swatches. Each one should read like a usable design direction with a clear emotional lane and a real application surface.

This detail route is the missing layer between a generic palette gallery and a convincing design reference. It gives the set a specific point of view.

Go further
Unlock Pro
Pro members get unlimited exports, advanced token formats, and priority access to new collections.
Learn about Pro
Take this palette further

Ready-made tokens for Cobalt Spectrum

Pro members can export these colors as Figma tokens, CSS variables, Tailwind config, and Procreate swatches — structured to drop directly into your project.

Upgrade to ProBrowse collections
Upgrade path

From collection to Pro

This collection proves the taste and color direction. Pro members get advanced token exports, usage guidance, and downloadable assets so the palette can move from reference to implementation.

LayerWhat you have hereWhat Pro adds
ScopeOne curated five-color editorial direction.Unlimited access to all collections, broader token coverage, and advanced exports.
OutputVisual palette, copyable CSS preview, and per-color archive pages.Downloadable CSS, JSON, Tailwind, Figma tokens, and Procreate swatches.
Use caseDirection finding, inspiration, and public proof.Real project handoff, implementation, and reusable production assets.
Related guides
How to Choose Color Combinations That Work
The practical framework for choosing 2-5 color combinations for design projects — covering harmony types, proportion, and the common mistakes that make palettes feel off.
Monochromatic Color Palettes: A Designer's Complete Guide
How to build effective monochromatic palettes using a single hue — covering scale construction, contrast management, and when monochromatic design is the right choice.
Crypto Website Colors That Balance Tech and Trust
Find website color inspiration for crypto projects that communicates technical credibility without alienating mainstream users or looking like a scam.