Cuttlefish

#7fbbc2

Softer, muted aqua-teal for subdued data panels

Save
Share

About Cuttlefish

Cuttlefish is the blue that actually sits still on screen. It's got real saturation without the green lean that pulls into muted territory, and it lands noticeably darker than without the warmth creeping in like does. This is the shade that reads as blue first, not teal pretending to be blue.

Reach for it in product dashboards, fintech platforms, and health apps where a secondary surface needs weight but not noise. Card backgrounds, form fields, section dividers, button hover states. It's the one I reach for when feels too settled and feels too flat. It pairs clean with charcoal or slate text and holds its own against data without flickering or shifting depending on your display.

The thing: it's got enough depth that you don't need to layer it with another color for it to land. Works best when you're building interfaces that need presence without the clinical edge.

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
2.15:1Fail

On Gray 100 #f5f5f5

Aa
1.97:1Fail

On Gray 900 #18181b

Aa
8.26:1AAA

On Black #000000

Aa
9.79:1AAA

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

#86bebe
#8bb6b8
#6dbac0
#7dc4cd
#8abbd0
#78b1bf

Create a gradient with Cuttlefish

Open the generator with this color pre-loaded.

Start creating