Shark
#cadcde
Soft cool gray for calm, grounded UI bars
About Shark
Look at Shark next to Melting Point and it shows up with a little more presence and a slightly greener-leaning coolness. It's not that barely-there wash, and it doesn't tip into the more obviously tint-forward blue direction of Peek-a-Blue. Against High Sierra, Shark feels less saturated and a touch more neutral, like it's been softened so it won't push the temperature around.
I use Shark when I want a gray that reads clean on first glance, but still feels like a stable surface. It's great for form backgrounds, table gutters, and secondary cards in dashboards and finance apps where the UI needs calm separation without becoming teal or overly icy. In practice, it works well for healthcare portals, insurance admin screens, and document-heavy web layouts that have to stay readable across lots of sections.
Quick pairing note: keep it close to neutral whites or slightly cooler grays, because with warm grays it can start to look a bit washed compared to High Sierra's steadier punch.
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
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
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
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.
