# Near-black, gray and navy color palette

The Near-black, gray and navy color palette brings together dark gray, dark purple, purple, magenta, gray, blue, and dark blue. The colors span a moderate lightness range, combining restrained color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark gray, and its lightest tone is gray.

- Also called: Black, dark purple, gray and navy linear gradient
- Seed: `kcKw3eng7AKqUwI8kMBzos-r6PvMrET7HAs_o`
- Page: https://grabient.com/kcKw3eng7AKqUwI8kMBzos-r6PvMrET7HAs_o?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: light center, muted, dark
- Hues: analogous
- Contrast of its darkest and lightest colors: 5.1 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 | `#120d15` | `oklch(16.93% 0.0179 312.89)` | Midnight Oil | white, 19.1 to 1 |
| 2 | `#150f18` | `oklch(17.93% 0.0215 313.16)` | Back in Black | white, 18.9 to 1 |
| 3 | `#19111d` | `oklch(19.32% 0.0267 313.52)` | Back in Black | white, 18.4 to 1 |
| 4 | `#1e1423` | `oklch(20.99% 0.0325 314.01)` | Inside | white, 17.8 to 1 |
| 5 | `#231729` | `oklch(22.82% 0.0380 314.67)` | Inside | white, 17.1 to 1 |
| 6 | `#291a2f` | `oklch(24.71% 0.0426 315.54)` | Bleached Cedar | white, 16.3 to 1 |
| 7 | `#2f1e35` | `oklch(26.71% 0.0474 316.69)` | Bleached Cedar | white, 15.4 to 1 |
| 8 | `#36223c` | `oklch(28.87% 0.0518 317.98)` | Kokimurasaki Purple | white, 14.4 to 1 |
| 9 | `#3d2743` | `oklch(31.24% 0.0551 319.28)` | Aubergine Mauve | white, 13.3 to 1 |
| 10 | `#452e4a` | `oklch(33.86% 0.0566 320.45)` | Purple Pennant | white, 12.1 to 1 |
| 11 | `#4d3551` | `oklch(36.81% 0.0557 321.82)` | Chive Bloom | white, 10.7 to 1 |
| 12 | `#563e58` | `oklch(40.04% 0.0532 323.30)` | Bella | white, 9.4 to 1 |
| 13 | `#5f4860` | `oklch(43.39% 0.0498 324.40)` | Plush Purple | white, 8.1 to 1 |
| 14 | `#675169` | `oklch(46.71% 0.0464 324.66)` | Vintner | white, 7 to 1 |
| 15 | `#705c72` | `oklch(50.22% 0.0430 323.82)` | Banished Brown | white, 6 to 1 |
| 16 | `#7b687d` | `oklch(54.35% 0.0386 322.23)` | Purplish Grey | white, 5 to 1 |
| 17 | `#847588` | `oklch(58.27% 0.0344 319.87)` | Hyacinth Dream | black, 4.8 to 1 |
| 18 | `#8b7e90` | `oklch(61.04% 0.0312 316.71)` | Dusky Grape | black, 5.4 to 1 |
| 19 | `#8c8093` | `oklch(61.76% 0.0304 312.66)` | Violet Vibes | black, 5.6 to 1 |
| 20 | `#867c90` | `oklch(60.19% 0.0321 306.93)` | Purpletone | black, 5.2 to 1 |
| 21 | `#7b738a` | `oklch(57.10% 0.0356 300.18)` | Dancing in the Spring | black, 4.6 to 1 |
| 22 | `#6d6982` | `oklch(53.32% 0.0394 293.54)` | Hyacinth Arbour | white, 5.2 to 1 |
| 23 | `#615f7a` | `oklch(49.67% 0.0424 288.13)` | Twilight Dusk | white, 6.1 to 1 |
| 24 | `#565671` | `oklch(46.36% 0.0443 284.51)` | Majestic Magic | white, 7 to 1 |
| 25 | `#4b4c68` | `oklch(42.79% 0.0461 281.97)` | Crown Blue | white, 8.2 to 1 |
| 26 | `#40435f` | `oklch(39.16% 0.0472 280.16)` | Majestic Blue | white, 9.6 to 1 |
| 27 | `#373a55` | `oklch(35.69% 0.0474 278.76)` | Magic Night | white, 11.1 to 1 |
| 28 | `#2e324c` | `oklch(32.53% 0.0460 277.51)` | Blue Regal | white, 12.5 to 1 |
| 29 | `#272a41` | `oklch(29.37% 0.0425 276.71)` | Valhalla | white, 14 to 1 |
| 30 | `#202337` | `oklch(26.38% 0.0378 276.30)` | Black Velvet | white, 15.4 to 1 |
| 31 | `#1b1d2f` | `oklch(23.85% 0.0333 276.09)` | Sombre Night | white, 16.5 to 1 |
| 32 | `#171929` | `oklch(22.05% 0.0303 275.90)` | Sambucus | white, 17.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #120d15 0.0%, #150f18 3.2%, #19111d 6.5%, #1e1423 9.7%, #231729 12.9%, #291a2f 16.1%, #2f1e35 19.4%, #36223c 22.6%, #3d2743 25.8%, #452e4a 29.0%, #4d3551 32.3%, #563e58 35.5%, #5f4860 38.7%, #675169 41.9%, #705c72 45.2%, #7b687d 48.4%, #847588 51.6%, #8b7e90 54.8%, #8c8093 58.1%, #867c90 61.3%, #7b738a 64.5%, #6d6982 67.7%, #615f7a 71.0%, #565671 74.2%, #4b4c68 77.4%, #40435f 80.6%, #373a55 83.9%, #2e324c 87.1%, #272a41 90.3%, #202337 93.5%, #1b1d2f 96.8%, #171929 100.0%);
background: linear-gradient(90deg in oklch, oklch(16.93% 0.0179 312.89) 0.0%, oklch(17.93% 0.0215 313.16) 3.2%, oklch(19.32% 0.0267 313.52) 6.5%, oklch(20.99% 0.0325 314.01) 9.7%, oklch(22.82% 0.0380 314.67) 12.9%, oklch(24.71% 0.0426 315.54) 16.1%, oklch(26.71% 0.0474 316.69) 19.4%, oklch(28.87% 0.0518 317.98) 22.6%, oklch(31.24% 0.0551 319.28) 25.8%, oklch(33.86% 0.0566 320.45) 29.0%, oklch(36.81% 0.0557 321.82) 32.3%, oklch(40.04% 0.0532 323.30) 35.5%, oklch(43.39% 0.0498 324.40) 38.7%, oklch(46.71% 0.0464 324.66) 41.9%, oklch(50.22% 0.0430 323.82) 45.2%, oklch(54.35% 0.0386 322.23) 48.4%, oklch(58.27% 0.0344 319.87) 51.6%, oklch(61.04% 0.0312 316.71) 54.8%, oklch(61.76% 0.0304 312.66) 58.1%, oklch(60.19% 0.0321 306.93) 61.3%, oklch(57.10% 0.0356 300.18) 64.5%, oklch(53.32% 0.0394 293.54) 67.7%, oklch(49.67% 0.0424 288.13) 71.0%, oklch(46.36% 0.0443 284.51) 74.2%, oklch(42.79% 0.0461 281.97) 77.4%, oklch(39.16% 0.0472 280.16) 80.6%, oklch(35.69% 0.0474 278.76) 83.9%, oklch(32.53% 0.0460 277.51) 87.1%, oklch(29.37% 0.0425 276.71) 90.3%, oklch(26.38% 0.0378 276.30) 93.5%, oklch(23.85% 0.0333 276.09) 96.8%, oklch(22.05% 0.0303 275.90) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.169 | 0.018 | 312.9 |
| 2 | 0.236 | 0.04 | 315 |
| 3 | 0.335 | 0.056 | 320.3 |
| 4 | 0.476 | 0.045 | 324.5 |
| 5 | 0.618 | 0.03 | 313.9 |
| 6 | 0.492 | 0.043 | 287.5 |
| 7 | 0.339 | 0.047 | 278 |
| 8 | 0.22 | 0.03 | 275.9 |

## In these collections

- [Charcoal plum tailoring](https://grabient.com/charcoal-plum-tailoring)
- [Plum noir](https://grabient.com/plum-noir)

## Other forms

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