paletta
PALETTE GALLERY

Cool color palette

Cool palettes run from blue through teal and read as calm, technical, and trustworthy. This set holds a deep teal primary against a near-white frost background, with azure and sky as the accent range, so the palette stays legible at both high and low saturation.

Updated 2026-07-15

  • Deep TealPrimary
    #0B4F6C
  • AzureAccent
    #1E88E5
  • SkyHighlight
    #5BC0EB
  • IceSurface
    #C8E9F0
  • Midnight InkText
    #12232E
  • FrostBackground
    #F4FAFC

Where this palette works

SaaS dashboards and analytics tools

Deep teal and azure are the default hue range for data-heavy interfaces because they recede rather than compete with charts.

Healthcare and finance products

Cool, desaturated blues carry the calm and trustworthy signal both categories default to.

Developer tools and technical docs

A cool palette with a near-black midnight ink text color reads as precise rather than playful.

Accessible pairings

Midnight ink is the only text color needed here. It clears AAA against every light surface in the set, including the sky accent, so there is no scenario in this palette that requires pure black.

Aa
Midnight ink on frost
Contrast 15.26 : 1AAA
Aa
Deep teal on ice
Contrast 6.97 : 1AA
Aa
Sky on midnight ink
Contrast 7.80 : 1AAA
EXPORT

Use these tokens

Copy as CSS custom properties or a Tailwind v4 @theme block.

:root {
  --palette-primary: #0B4F6C; /* Deep Teal */
  --palette-accent: #1E88E5; /* Azure */
  --palette-highlight: #5BC0EB; /* Sky */
  --palette-surface: #C8E9F0; /* Ice */
  --palette-text: #12232E; /* Midnight Ink */
  --palette-background: #F4FAFC; /* Frost */
}

Frequently asked questions

Related palettes

Ocean palette

An ocean color palette built from deep sea blue, lagoon, and seafoam, with hex codes, accessible text pairings, and export-ready CSS variables.

Forest green palette

A forest green color palette built from pine, spruce, and moss, with hex codes, accessible text pairings, and export-ready CSS variables.

Jewel tone palette

A jewel tone color palette built from emerald, sapphire, ruby, and amethyst, with hex codes, accessible text pairings, and export-ready CSS variables.

Build on this palette

Generate a full shade scale and export to Tailwind, shadcn, or Figma Variables.

Generate a palette