# Near-black and blue color palette

The Near-black and blue color palette brings together dark blue and blue. The colors span a moderate lightness range, combining strong color with clear contrast. Its dark and grounded character suits website sections and interface mockups. Its darkest tone is dark blue, and its lightest tone is blue.

- Also called: Monochrome black to blue linear gradient
- Seed: `kUFCe7lq0_6dBv-3Vb_g`
- Page: https://grabient.com/kUFCe7lq0_6dBv-3Vb_g?steps=5&angle=180
- Drawn as: linear gradient, 5 steps, 180 degrees
- Kinds: dark to light, vivid, dark, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 2.4 to 1

## Colors

The name most people give each color, and the text color that reads on it with its contrast.

| Stop | Hex | OKLCH | Name | Text on it |
| --- | --- | --- | --- | --- |
| 1 | `#000010` | `oklch(7.89% 0.0536 264.12)` | Benthic Black | white, 20.8 to 1 |
| 2 | `#000035` | `oklch(14.92% 0.1034 264.05)` | Abyssopelagic Water | white, 19.9 to 1 |
| 3 | `#00115e` | `oklch(24.06% 0.1347 263.83)` | Atlantic Depths | white, 16.9 to 1 |
| 4 | `#002497` | `oklch(34.19% 0.1883 263.73)` | Imperial Blue | white, 12.3 to 1 |
| 5 | `#0036cf` | `oklch(43.31% 0.2356 263.67)` | Sapphire Glitter | white, 8.6 to 1 |

## CSS

```css
background: linear-gradient(180deg, #000010 0.0%, #000035 25.0%, #00115e 50.0%, #002497 75.0%, #0036cf 100.0%);
background: linear-gradient(180deg in oklch, oklch(7.89% 0.0536 264.12) 0.0%, oklch(14.92% 0.1034 264.05) 25.0%, oklch(24.06% 0.1347 263.83) 50.0%, oklch(34.19% 0.1883 263.73) 75.0%, oklch(43.31% 0.2356 263.67) 100.0%);
```

## Keyframes

4 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees.

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.079 | 0.054 | 263.7 |
| 2 | 0.177 | 0.124 | 263.7 |
| 3 | 0.307 | 0.181 | 263.7 |
| 4 | 0.433 | 0.236 | 263.7 |

## In these collections

- [Ocean gradients](https://grabient.com/ocean-gradients)
- [Dark gradients](https://grabient.com/dark-gradients)
- [Text gradients](https://grabient.com/text-gradients)
- [Deep sea gradients](https://grabient.com/deep-sea-gradients)

## Other forms

- [JSON](https://grabient.com/kUFCe7lq0_6dBv-3Vb_g.json?steps=5&angle=180)
- [PNG](https://grabient.com/kUFCe7lq0_6dBv-3Vb_g.png?steps=5&angle=180)
- [SVG](https://grabient.com/kUFCe7lq0_6dBv-3Vb_g.svg?steps=5&angle=180)
- [CSS](https://grabient.com/kUFCe7lq0_6dBv-3Vb_g.css?steps=5&angle=180)
- [ASE](https://grabient.com/kUFCe7lq0_6dBv-3Vb_g.ase?steps=5&angle=180)
- [GPL](https://grabient.com/kUFCe7lq0_6dBv-3Vb_g.gpl?steps=5&angle=180)
- [GRD](https://grabient.com/kUFCe7lq0_6dBv-3Vb_g.grd?steps=5&angle=180)
- [Design tokens](https://grabient.com/kUFCe7lq0_6dBv-3Vb_g.tokens.json?steps=5&angle=180)
- [Social card](https://grabient.com/api/og?seed=kUFCe7lq0_6dBv-3Vb_g&steps=5&angle=180)
- [Palettes like this one](https://grabient.com/palettes?q=kUFCe7lq0_6dBv-3Vb_g)
- [Guide for agents](https://grabient.com/llms.txt)