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.96 : 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 */
}

FAQ

Frequently asked questions

A blue palette can lean warm (violet-blue) or cool (teal-blue). This set stays on the cool side of blue, closer to teal, which is why it pairs cleanly with the near-white frost background instead of needing a warmer neutral.

Yes. Deep Teal (#0B4F6C) reaches 8.94:1 against white, well past the 4.5:1 floor for normal text and the 3:1 floor for UI components, so it holds up as both a text color and a filled button background.

Feed the Deep Teal hex into a shade scale generator to get 50 to 950 steps in OKLCH. The lighter steps land close to Ice and Frost above; the darker steps extend past Midnight Ink.

Related palettes

Build on this palette

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