# Near-black and off-white color palette

The Near-black and off-white color palette brings together black, dark gray, gray, and off-white. The colors span a very broad lightness range, combining near-neutral color with high contrast. Its quiet and understated character suits brand mood boards and editorial graphics. Its darkest tone is black, and its lightest tone is off-white.

- Also called: Black, gray and white linear gradient
- Seed: `kWAwAAC4A_5mAP-1gD__IA_4`
- Page: https://grabient.com/kWAwAAC4A_5mAP-1gD__IA_4?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: dark to light, neutral, dark
- Hues: achromatic
- Contrast of its darkest and lightest colors: 19.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 | `#000000` | `oklch(1.18% 0.0000 89.88)` | Black | white, 20.9 to 1 |
| 2 | `#000000` | `oklch(1.79% 0.0000 89.88)` | Black | white, 20.9 to 1 |
| 3 | `#000000` | `oklch(2.58% 0.0000 89.88)` | Black | white, 20.9 to 1 |
| 4 | `#000000` | `oklch(3.51% 0.0000 89.88)` | Black | white, 20.9 to 1 |
| 5 | `#000000` | `oklch(4.57% 0.0000 89.88)` | Black | white, 20.9 to 1 |
| 6 | `#010101` | `oklch(5.71% 0.0000 89.88)` | Binary Black | white, 20.9 to 1 |
| 7 | `#010101` | `oklch(6.91% 0.0000 89.88)` | Binary Black | white, 20.8 to 1 |
| 8 | `#020202` | `oklch(8.14% 0.0000 89.88)` | Black Hole | white, 20.7 to 1 |
| 9 | `#030303` | `oklch(9.36% 0.0000 89.88)` | Armour Wash | white, 20.6 to 1 |
| 10 | `#040404` | `oklch(10.53% 0.0000 89.88)` | Armour Wash | white, 20.5 to 1 |
| 11 | `#050505` | `oklch(11.70% 0.0000 89.88)` | Black Metal | white, 20.3 to 1 |
| 12 | `#070707` | `oklch(12.89% 0.0000 89.88)` | Reversed Grey | white, 20.1 to 1 |
| 13 | `#090909` | `oklch(14.18% 0.0000 89.88)` | Badab Black Wash | white, 19.8 to 1 |
| 14 | `#0c0c0c` | `oklch(15.60% 0.0000 89.88)` | Black Wash | white, 19.5 to 1 |
| 15 | `#101010` | `oklch(17.20% 0.0000 89.88)` | Ruined Smores | white, 19 to 1 |
| 16 | `#141414` | `oklch(19.05% 0.0000 89.88)` | Sooty | white, 18.4 to 1 |
| 17 | `#191919` | `oklch(21.12% 0.0000 89.88)` | Thamar Black | white, 17.6 to 1 |
| 18 | `#1d1d1d` | `oklch(23.14% 0.0000 89.88)` | Dynamic Black | white, 16.8 to 1 |
| 19 | `#222222` | `oklch(25.18% 0.0000 89.88)` | Eye Patch | white, 15.9 to 1 |
| 20 | `#272727` | `oklch(27.39% 0.0000 89.88)` | Dire Wolf | white, 14.8 to 1 |
| 21 | `#2e2e2e` | `oklch(29.92% 0.0000 89.88)` | Carbon Fibre | white, 13.6 to 1 |
| 22 | `#353535` | `oklch(32.92% 0.0000 89.88)` | Jet | white, 12.2 to 1 |
| 23 | `#3e3e3e` | `oklch(36.53% 0.0000 89.88)` | Madison Avenue | white, 10.6 to 1 |
| 24 | `#4a4a4a` | `oklch(40.90% 0.0000 89.88)` | Shadowed Steel | white, 8.8 to 1 |
| 25 | `#595959` | `oklch(46.44% 0.0000 89.88)` | Shadow Mountain | white, 6.9 to 1 |
| 26 | `#6d6d6d` | `oklch(53.56% 0.0000 89.88)` | Dove Grey | white, 5.1 to 1 |
| 27 | `#858585` | `oklch(61.73% 0.0000 89.88)` | Black Mana | black, 5.7 to 1 |
| 28 | `#9f9f9f` | `oklch(70.37% 0.0000 89.88)` | Cold Grey | black, 7.9 to 1 |
| 29 | `#bababa` | `oklch(78.90% 0.0000 89.88)` | Baby Talk Grey | black, 10.8 to 1 |
| 30 | `#d3d3d3` | `oklch(86.74% 0.0000 89.88)` | Pinball | black, 14 to 1 |
| 31 | `#e9e9e9` | `oklch(93.31% 0.0000 89.88)` | Snowbank | black, 17.2 to 1 |
| 32 | `#f8f8f8` | `oklch(98.03% 0.0000 89.88)` | Zhēn Zhū Bái Pearl | black, 19.8 to 1 |

## CSS

```css
background: linear-gradient(180deg, #000000 0.0%, #000000 3.2%, #000000 6.5%, #000000 9.7%, #000000 12.9%, #010101 16.1%, #010101 19.4%, #020202 22.6%, #030303 25.8%, #040404 29.0%, #050505 32.3%, #070707 35.5%, #090909 38.7%, #0c0c0c 41.9%, #101010 45.2%, #141414 48.4%, #191919 51.6%, #1d1d1d 54.8%, #222222 58.1%, #272727 61.3%, #2e2e2e 64.5%, #353535 67.7%, #3e3e3e 71.0%, #4a4a4a 74.2%, #595959 77.4%, #6d6d6d 80.6%, #858585 83.9%, #9f9f9f 87.1%, #bababa 90.3%, #d3d3d3 93.5%, #e9e9e9 96.8%, #f8f8f8 100.0%);
background: linear-gradient(180deg in oklch, oklch(1.18% 0.0000 89.88) 0.0%, oklch(1.79% 0.0000 89.88) 3.2%, oklch(2.58% 0.0000 89.88) 6.5%, oklch(3.51% 0.0000 89.88) 9.7%, oklch(4.57% 0.0000 89.88) 12.9%, oklch(5.71% 0.0000 89.88) 16.1%, oklch(6.91% 0.0000 89.88) 19.4%, oklch(8.14% 0.0000 89.88) 22.6%, oklch(9.36% 0.0000 89.88) 25.8%, oklch(10.53% 0.0000 89.88) 29.0%, oklch(11.70% 0.0000 89.88) 32.3%, oklch(12.89% 0.0000 89.88) 35.5%, oklch(14.18% 0.0000 89.88) 38.7%, oklch(15.60% 0.0000 89.88) 41.9%, oklch(17.20% 0.0000 89.88) 45.2%, oklch(19.05% 0.0000 89.88) 48.4%, oklch(21.12% 0.0000 89.88) 51.6%, oklch(23.14% 0.0000 89.88) 54.8%, oklch(25.18% 0.0000 89.88) 58.1%, oklch(27.39% 0.0000 89.88) 61.3%, oklch(29.92% 0.0000 89.88) 64.5%, oklch(32.92% 0.0000 89.88) 67.7%, oklch(36.53% 0.0000 89.88) 71.0%, oklch(40.90% 0.0000 89.88) 74.2%, oklch(46.44% 0.0000 89.88) 77.4%, oklch(53.56% 0.0000 89.88) 80.6%, oklch(61.73% 0.0000 89.88) 83.9%, oklch(70.37% 0.0000 89.88) 87.1%, oklch(78.90% 0.0000 89.88) 90.3%, oklch(86.74% 0.0000 89.88) 93.5%, oklch(93.31% 0.0000 89.88) 96.8%, oklch(98.03% 0.0000 89.88) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.012 | 0 | 0 |
| 2 | 0.091 | 0 | 0 |
| 3 | 0.201 | 0 | 0 |
| 4 | 0.421 | 0 | 0 |
| 5 | 0.98 | 0 | 0 |

## In these collections

- [Black and white gradients](https://grabient.com/black-and-white-gradients)
- [Chrome gradients](https://grabient.com/chrome-gradients)

## Other forms

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