# Near-black, navy and stone color palette

The Near-black, navy and stone color palette brings together black, dark blue, teal, and light blue. The colors span a very broad lightness range, combining moderate color with high contrast. Its balanced and composed character suits game interface concepts and stream graphics. Its darkest tone is black, and its lightest tone is teal.

- Also called: Monochrome black, navy and gray linear swatches
- Seed: `kWHAm5FoxAiESvnnL7qYovCo`
- Page: https://grabient.com/kWHAm5FoxAiESvnnL7qYovCo?style=linearSwatches&steps=5&angle=270
- Drawn as: linear swatches, 5 steps, 270 degrees
- Kinds: dark center, dark, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 11.8 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 | `#030408` | `oklch(11.02% 0.0124 260.16)` | Eight Ball | white, 20.4 to 1 |
| 2 | `#0a1020` | `oklch(17.72% 0.0331 265.44)` | Nyctophobia | white, 18.9 to 1 |
| 3 | `#10253c` | `oklch(25.98% 0.0510 252.76)` | Celestial Canvas | white, 15.5 to 1 |
| 4 | `#30d8ec` | `oklch(81.10% 0.1309 207.32)` | Thousand Sons Blue | black, 12.2 to 1 |
| 5 | `#a2bac7` | `oklch(77.56% 0.0317 230.57)` | Always Blue | black, 10.4 to 1 |

## CSS

```css
background: linear-gradient(270deg, #030408 0.000% 20.000%, #0a1020 20.000% 40.000%, #10253c 40.000% 60.000%, #30d8ec 60.000% 80.000%, #a2bac7 80.000% 100.000%);
background: linear-gradient(270deg, oklch(11.02% 0.0124 260.16) 0.000% 20.000%, oklch(17.72% 0.0331 265.44) 20.000% 40.000%, oklch(25.98% 0.0510 252.76) 40.000% 60.000%, oklch(81.10% 0.1309 207.32) 60.000% 80.000%, oklch(77.56% 0.0317 230.57) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.11 | 0.012 | 260.2 |
| 2 | 0.177 | 0.033 | 265.4 |
| 3 | 0.26 | 0.051 | 252.8 |
| 4 | 0.811 | 0.131 | 207.3 |
| 5 | 0.776 | 0.032 | 230.6 |

## In these collections

- [Cyberpunk swatches](https://grabient.com/cyberpunk-swatches)
- [Vaporwave color palette](https://grabient.com/vaporwave-color-palette)

## Other forms

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