Pacific

#24646b

Deep cooler Pacific tone for crisp, confident UI

Save
Share

About Pacific

I keep catching Pacific on the edge of a split-second glance, like the ocean after twilight has settled in. It's not the stormier, heavier press of After the , and it doesn't have 's ink-soft calm. Pacific sits a touch lighter and steadier, with cleaner blue undertones and less of that condensed, pre-break tension.

For UI work, it's the one I reach for when you need a primary state that feels solid and considered without turning cold or sterile. It plays well across dashboards and finance apps, plus healthcare screens where active buttons, selected tabs, and key navigation states have to read clearly on white. Compared to the greener pull of , Pacific stays more purely blue, so it doesn't wander into blue-green surprises on different displays.

Pair it with crisp neutrals and light grays, and watch your supporting blues. On some warmer monitors, Pacific holds its clarity, but nearby teals can start competing for attention.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

Code snippets

Copy this color into your project.

Contrast checker

WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.

On White #ffffff

Aa
6.75:1AAAAA Large

On Gray 100 #f5f5f5

Aa
6.19:1AAAAA Large

On Gray 900 #18181b

Aa
2.62:1Fail

On Black #000000

Aa
3.11:1FailAA Large

Variations

Shades

Darker variations, created by mixing toward black.

Tints

Lighter variations, created by mixing toward white.

Tones

Muted variations, created by reducing saturation.

Hues

Hue rotations around the color wheel.

Temperatures

Warm and cool shifts of this color.

Color harmonies

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Pacific

Open the generator with this color pre-loaded.

Start creating