color palettesCobalt & citrus
Bold
A sharp blue, a little zest, and room to breathe.
Color / A considered starting point
Blue color palettes.
Compare inky navigation, pale-blue surfaces and bright cobalt actions without giving every blue the same job.
The collection
Original sRGB combinations. Each detail page includes website roles, CSS and measured pairs.
After hours
Dark
A midnight base with a soft electric pulse.
Poolside
Bold
Clean turquoise meets a sun-warmed peach.
Butter & blue
Soft
A pale yellow morning with a blue horizon.
Blueprint
Minimal
Composed blues with a clear sense of structure.
An inky blue with a bright rose edge.
Pacific orange
Bold
Deep ocean color, lit by apricot.
Museum vermilion
Bold
A warm red set against gallery neutrals.
Klein mint
Bold
A crisp blue against mint paper.
Blue lacquer
Bold
Polished blue and a soft gold flash.
Cobalt lilac
Bold
Two cool hues with different responsibilities.
Blue hydrangea
Soft
Powder blue and pale violet in balance.
Lemon linen
Soft
Pale lemon, softened by blue-gray.
Powder ink
Soft
Blue powder with an ink-like anchor.
Cream periwinkle
Soft
Warm cream and a calm blue vocabulary.
Wisteria milk
Soft
Milky whites with a wisteria edge.
Ochre slate
Earthy
Warm ochre and cool architectural slate.
Earthen sky
Earthy
Soft earth below a pale open sky.
Graphite ice
Dark
Graphite panels with an icy blue action.
Night porcelain
Dark
Blue-black pages with porcelain type.
Ink apricot
Dark
Inky blue with warm apricot light.
Navy paprika
Dark
Navy structure with a paprika highlight.
Storm lemon
Dark
Storm blue with a clear lemon marker.
Atlantic rose
Dark
Atlantic depth with a pale rose highlight.
Caramel denim
Warm
Caramel-colored paper and worn denim.
Maple frost
Warm
Maple warmth with a frosted blue detail.
Warm walnut blue
Warm
Walnut neutrals with a cool blue interval.
Silver blue
Minimal
A silver base with quiet blue structure.
Ink milk
Minimal
Milk-white margins and blue-black type.
Quiet indigo
Minimal
A restrained indigo without the noise.
Porcelain navy
Minimal
Porcelain surfaces with navy precision.
Frost steel
Minimal
Frosted whites with a steel-blue spine.
Make the colors work
More than a set of swatches.
Separate structure from emphasis
Blueprint is a starting point for documentation, with a pale panel and a deeper interactive blue. Cobalt & Citrus uses a stronger primary color and a contrasting accent. Neither is inherently more trustworthy: choose between them by the density of your content and the emphasis the primary action needs.
Make links recognizable
Keep body text and links distinct through underlines or another visible treatment, not only hue. A lighter blue that works against a dark page may disappear on a white card. Check both surfaces before reusing the same token.
Build a companion theme deliberately
Do not invert every channel to create dark mode. Start with dark page and surface roles, then choose a lighter blue for interaction and a label color that still works inside the button. The studio keeps your exact original brand as a separate reference.