NodlumeCool · Linear
Deep ocean gradient
Deep ocean is Ocean with the light removed: a ramp between two navies, the second barely lighter than the first. It is the gradient for a dark surface that should not be flat — a dashboard background, a footer, a full-bleed section — where a solid reads as a void and a bright gradient would compete with the content on top.
Its whole value is subtlety, so resist adding a third, brighter stop; the moment a cyan appears it becomes Ocean and wants a hero. Text of any lightness above muted-foreground holds across it. It makes a good base color for a mesh: set it as the base and lay two dim cyan pools over it and you have Aurora without the noise.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #0206170%
- #1e3a8a100%
CSS
.deep-ocean {
background-image: linear-gradient(160deg in oklab, #020617 0%, #1e3a8a 100%);
}Tailwind
bg-[image:linear-gradient(160deg_in_oklab,_#020617_0%,_#1e3a8a_100%)]
Token
--gradient-deep-ocean: linear-gradient(160deg in oklab, #020617 0%, #1e3a8a 100%);
Deep ocean, answered
- What are the CSS colors in the Deep ocean gradient?
- Deep ocean uses 2 colors: #020617, #1e3a8a. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(160deg in oklab, #020617 0%, #1e3a8a 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 Deep 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 Deep 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.