Blue color palettes: 11 complete systems, not swatch strips
Blue is the default trust color, which is exactly its risk: an undirected blue interface reads as a template. The blues below avoid that by being specific: cobalt on ticket-stub cream, archival ink on paper, electric blue on dark. Each comes with its full surface, text, and accent system.
Blueprint Manual Grid
A technical-manual layout system: electric blue linework on near-white paper, monospaced labels, hairline rules and a dense multi-column reading grid.
Light
Dark
technical · editorial · blueprint
Full kit & exportsArchival Blue
An institutional editorial system with a soft atmospheric blue gradient bloom, condensed uppercase display type, and deep navy ink on a near-white cool grey ground.
Light
Dark
editorial · institutional · condensed
Full kit & exportsCobalt Ticket System
A bold Swiss-modernist kit anchored on vibrant azure blue, clean whites, and editorial grays, with tight grotesque headings and a poster feel.
Light
Dark
swiss · modernist · azure
Full kit & exportsFiles Archival
A three-zone editorial system that brackets a full-width electric-blue content band between near-black charcoal header and footer shells, with cream and blush paper documents overlapping as a physical collage.
Light
Dark
editorial · archival · dark
Full kit & exportsSand Blue Swiss Grid
A Swiss international-typographic poster translated into a UI kit: bold grotesque display type, alternating cream/blue/sand surface bands, 0rem radius, hairline rules, and a strict left-aligned grid.
Light
Dark
swiss · editorial · grotesque
Full kit & exportsElectric Portfolio
A warm-neutral creative-portfolio kit with a single electric-blue accent, off-white surfaces, flat card elevation, full-pill tag badges, and an alternating dark-panel section rhythm.
Light
Dark
portfolio · editorial · electric-blue
Full kit & exportsTerrain Vivant
A bold two-color institutional editorial system built on vivid green and cobalt blue full-screen surfaces, with monospace type throughout and zero-radius geometry.
Light
Dark
editorial · institutional · flat
Full kit & exportsLimePulse Digital Agency
A clean marketing-agency kit anchored on an acid-lime accent, with alternating dark/light card pairs, filled eyebrow chips, and pill CTAs on a white canvas.
Light
Dark
neutral-surface · acid-lime · alternating-cards
Full kit & exportsSoul Waves Vinyl
Warm-parchment editorial kit with poster-scale condensed display type, dusty periwinkle-navy section bands, flat photo-tile product grids, and monospace metadata throughout.
Light
Dark
vinyl · editorial · poster-type
Full kit & exportsCobalt Ticket Grid
A Swiss-modernist event-ticket system in vivid cobalt blue, built on alternating horizontal surface bands, information-dense and uncompromisingly flat.
Light
Dark
swiss-style · flat · editorial
Full kit & exportsCream Blue Swiss Grid
A bold Swiss-typographic kit pairing electric signal blue with warm cream and ink navy for editorial, type-forward interfaces.
Light
Dark
swiss · editorial · typographic
Full kit & exportsWhy a palette needs roles, not just colors
A strip of five hexes answers the easy question (which blue?) and skips the hard ones: what color is text on it, what surface sits behind it, what happens in dark mode, what do disabled states use. Those unanswered questions are why palettes from generator sites fall apart two screens into a real product. A roled palette answers all of them up front, which is what makes it safe to hand to a teammate or an AI builder.
Deeper reads: semantic color tokens explained, building a dark mode palette and choosing a SaaS color palette.
Looking for a different color?
Blue palette FAQ
What makes these blue color palettes different from a hex list?
Every palette here is a roled system, not a strip of pretty colors: the blue is resolved against its background, text, muted, and border colors in BOTH light and dark mode, so applying it can't produce unreadable text or a broken dark theme. Each palette belongs to a full design kit with fonts, spacing, and rules, exportable as CSS variables, Tailwind themes, DTCG tokens, a shadcn registry item, or an agent-ready DESIGN.md.
Are these blue palettes free to use?
Yes. All 11 palettes on this page come from free kits: copy any hex code directly, or open the kit for the complete token system and exports at no cost, no account needed.
How do I apply one of these palettes to my project?
Click any swatch to copy its hex, or open the full kit and export the whole system in your stack's format: CSS variables, Tailwind v3/v4 theme, DTCG tokens, or a shadcn registry item you install with one command. Building with an AI tool? Each kit also exports as a paste-ready prompt for Lovable, v0, Bolt, and Replit, so the palette survives generation instead of drifting back to defaults.
Why does my blue interface look like every SaaS template?
Because the default blue (a mid-saturation indigo around #2563eb on white) is what every tool reaches for. A blue stops feeling generic when the surrounding system is decided: an off-white or dark surface, a serif or characterful sans, and one non-blue accent. The palettes above make those surrounding decisions explicit.