NodlumeCool · Linear
Ocean gradient
Ocean runs from a deep navy into a clear cyan, and interpolated in oklab it passes through a true blue on the way rather than the gray-teal that sRGB produces between those two ends. It is the most trusted gradient in the catalog — banks, insurers and infrastructure companies default to it — because blue is the hue people associate with reliability, and a ramp of it reads as depth.
It works at any size, which is rare: as a hero it is a sea, as a card it is a tile, as a button it is a pressable thing. White text holds everywhere except the last few percent of cyan, so end the ramp at 90% if headlines reach the light edge. For a calmer version, pull the cyan stop toward the navy and let the light corner be small.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #0f172a0%
- #1d4ed850%
- #22d3ee100%
CSS
.ocean {
background-image: linear-gradient(135deg in oklab, #0f172a 0%, #1d4ed8 50%, #22d3ee 100%);
}Tailwind
bg-[image:linear-gradient(135deg_in_oklab,_#0f172a_0%,_#1d4ed8_50%,_#22d3ee_100%)]
Token
--gradient-ocean: linear-gradient(135deg in oklab, #0f172a 0%, #1d4ed8 50%, #22d3ee 100%);
Ocean, answered
- What are the CSS colors in the Ocean gradient?
- Ocean uses 3 colors: #0f172a, #1d4ed8, #22d3ee. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(135deg in oklab, #0f172a 0%, #1d4ed8 50%, #22d3ee 100%) — copy the CSS rule, the Tailwind class or the custom property above, or open it in the playground to change any stop.
- How do I use the Ocean gradient in Tailwind CSS?
- Copy the Tailwind tab: it is an arbitrary-value class of the form bg-[image:…], with the spaces in the gradient written as underscores, which Tailwind v3 and v4 both accept for a one-off value. For a value you reuse across the site, register the Token tab's custom property in your theme instead and reference it from a utility.
- Why is the Ocean gradient interpolated in oklab?
- Two colors interpolated in sRGB pass through a grayer, darker middle than either end; in oklab the midpoint is perceptually between them, so the ramp stays clean. Every gradient function accepts an in <space> keyword, and oklab is the right default for a color-to-color ramp.