We're live on Product Hunt!Support us
ColorArchive

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

CollectionsFamiliesBrandsRegionsJournalNotesGuidesFree ResourcesEmbed widgetConvertColorblindAboutSupportUpdatesiOS app
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

Check these colors together: contrast, harmony, color-blind view →Tap a color to copy its HEX

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
:root {
  --cobalt-spectrum-1: #EDEFF2;
  --cobalt-spectrum-2: #92A4C9;
  --cobalt-spectrum-3: #3864BC;
  --cobalt-spectrum-4: #394D74;
  --cobalt-spectrum-5: #1D222A;
}
Dark mode pairs
#EDEFF2
#16191D
#92A4C9
#45587D
#3864BC
#9BB0DA
#394D74
#788CB5
#1D222A
#E2E5E9
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

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%)

More collections like this

Browse collections →
  • Slate and Sage
  • 2026 Cobalt Confidence
  • Institutional Trust
  • Heritage Navy
Go further
Unlock Pro
Pro removes the daily export cap, in every token format.
Learn about Pro
Take this palette further

Ready-made tokens for Cobalt Spectrum

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.

Upgrade to ProBrowse collections
Upgrade path

From collection to Pro

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.

LayerWhat you have hereWhat Pro adds
ScopeOne curated palette of 5 colors.The same palettes, with no daily export cap anywhere on the site.
OutputHEX, 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 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.