# Off-white and near-black black and white palette

The Off-white and near-black black and white palette brings together off-white, gray, dark gray, and black. 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: White, gray and black radial gradient
- Seed: `kW_gAAToA_56AP-KAD_gYA_4`
- Page: https://grabient.com/kW_gAAToA_56AP-KAD_gYA_4?style=radialGradient&steps=32&angle=0
- Drawn as: radial gradient, 32 steps, 0 degrees
- Kinds: light to dark, neutral, dark
- Hues: achromatic
- Contrast of its darkest and lightest colors: 20.9 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 | `#ffffff` | `oklch(100.00% 0.0000 89.88)` | White | black, 21 to 1 |
| 2 | `#f5f5f5` | `oklch(96.94% 0.0000 89.88)` | White Smoke | black, 19.2 to 1 |
| 3 | `#e7e7e7` | `oklch(92.85% 0.0000 89.88)` | Placebo | black, 17 to 1 |
| 4 | `#d7d7d7` | `oklch(87.98% 0.0000 89.88)` | Cape Hope | black, 14.6 to 1 |
| 5 | `#c6c6c6` | `oklch(82.57% 0.0000 89.88)` | Silver Polish | black, 12.2 to 1 |
| 6 | `#b4b4b4` | `oklch(76.88% 0.0000 89.88)` | Brainstem Grey | black, 10 to 1 |
| 7 | `#a2a2a2` | `oklch(71.16% 0.0000 89.88)` | Grey of Darkness | black, 8.2 to 1 |
| 8 | `#919191` | `oklch(65.65% 0.0000 89.88)` | Tin | black, 6.6 to 1 |
| 9 | `#828282` | `oklch(60.57% 0.0000 89.88)` | Squant | black, 5.4 to 1 |
| 10 | `#737373` | `oklch(55.46% 0.0000 89.88)` | Industrial Revolution | white, 4.7 to 1 |
| 11 | `#646464` | `oklch(50.16% 0.0000 89.88)` | Hard Coal | white, 5.9 to 1 |
| 12 | `#555555` | `oklch(44.83% 0.0000 89.88)` | Stone Cold | white, 7.4 to 1 |
| 13 | `#464646` | `oklch(39.59% 0.0000 89.88)` | Wood Charcoal | white, 9.3 to 1 |
| 14 | `#393939` | `oklch(34.59% 0.0000 89.88)` | Boltgun Metal | white, 11.4 to 1 |
| 15 | `#2e2e2e` | `oklch(29.96% 0.0000 89.88)` | Carbon Fibre | white, 13.6 to 1 |
| 16 | `#242424` | `oklch(25.84% 0.0000 89.88)` | Nero | white, 15.6 to 1 |
| 17 | `#1b1b1b` | `oklch(22.34% 0.0000 89.88)` | Eerie Black | white, 17.1 to 1 |
| 18 | `#151515` | `oklch(19.39% 0.0000 89.88)` | Matt Black | white, 18.3 to 1 |
| 19 | `#0f0f0f` | `oklch(16.87% 0.0000 89.88)` | Chaos Black | white, 19.1 to 1 |
| 20 | `#0b0b0b` | `oklch(14.73% 0.0000 89.88)` | Raven | white, 19.7 to 1 |
| 21 | `#070707` | `oklch(12.87% 0.0000 89.88)` | Reversed Grey | white, 20.1 to 1 |
| 22 | `#050505` | `oklch(11.22% 0.0000 89.88)` | Black Metal | white, 20.4 to 1 |
| 23 | `#030303` | `oklch(9.71% 0.0000 89.88)` | Armour Wash | white, 20.6 to 1 |
| 24 | `#020202` | `oklch(8.24% 0.0000 89.88)` | Black Hole | white, 20.7 to 1 |
| 25 | `#010101` | `oklch(6.83% 0.0000 89.88)` | Binary Black | white, 20.8 to 1 |
| 26 | `#010101` | `oklch(5.59% 0.0000 89.88)` | Binary Black | white, 20.9 to 1 |
| 27 | `#000000` | `oklch(4.53% 0.0000 89.88)` | Black | white, 20.9 to 1 |
| 28 | `#000000` | `oklch(3.62% 0.0000 89.88)` | Black | white, 20.9 to 1 |
| 29 | `#000000` | `oklch(2.85% 0.0000 89.88)` | Black | white, 20.9 to 1 |
| 30 | `#000000` | `oklch(2.20% 0.0000 89.88)` | Black | white, 20.9 to 1 |
| 31 | `#000000` | `oklch(1.65% 0.0000 89.88)` | Black | white, 20.9 to 1 |
| 32 | `#000000` | `oklch(1.18% 0.0000 89.88)` | Black | white, 20.9 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #ffffff 0.0%, #f5f5f5 3.2%, #e7e7e7 6.5%, #d7d7d7 9.7%, #c6c6c6 12.9%, #b4b4b4 16.1%, #a2a2a2 19.4%, #919191 22.6%, #828282 25.8%, #737373 29.0%, #646464 32.3%, #555555 35.5%, #464646 38.7%, #393939 41.9%, #2e2e2e 45.2%, #242424 48.4%, #1b1b1b 51.6%, #151515 54.8%, #0f0f0f 58.1%, #0b0b0b 61.3%, #070707 64.5%, #050505 67.7%, #030303 71.0%, #020202 74.2%, #010101 77.4%, #010101 80.6%, #000000 83.9%, #000000 87.1%, #000000 90.3%, #000000 93.5%, #000000 96.8%, #000000 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(100.00% 0.0000 89.88) 0.0%, oklch(96.94% 0.0000 89.88) 3.2%, oklch(92.85% 0.0000 89.88) 6.5%, oklch(87.98% 0.0000 89.88) 9.7%, oklch(82.57% 0.0000 89.88) 12.9%, oklch(76.88% 0.0000 89.88) 16.1%, oklch(71.16% 0.0000 89.88) 19.4%, oklch(65.65% 0.0000 89.88) 22.6%, oklch(60.57% 0.0000 89.88) 25.8%, oklch(55.46% 0.0000 89.88) 29.0%, oklch(50.16% 0.0000 89.88) 32.3%, oklch(44.83% 0.0000 89.88) 35.5%, oklch(39.59% 0.0000 89.88) 38.7%, oklch(34.59% 0.0000 89.88) 41.9%, oklch(29.96% 0.0000 89.88) 45.2%, oklch(25.84% 0.0000 89.88) 48.4%, oklch(22.34% 0.0000 89.88) 51.6%, oklch(19.39% 0.0000 89.88) 54.8%, oklch(16.87% 0.0000 89.88) 58.1%, oklch(14.73% 0.0000 89.88) 61.3%, oklch(12.87% 0.0000 89.88) 64.5%, oklch(11.22% 0.0000 89.88) 67.7%, oklch(9.71% 0.0000 89.88) 71.0%, oklch(8.24% 0.0000 89.88) 74.2%, oklch(6.83% 0.0000 89.88) 77.4%, oklch(5.59% 0.0000 89.88) 80.6%, oklch(4.53% 0.0000 89.88) 83.9%, oklch(3.62% 0.0000 89.88) 87.1%, oklch(2.85% 0.0000 89.88) 90.3%, oklch(2.20% 0.0000 89.88) 93.5%, oklch(1.65% 0.0000 89.88) 96.8%, oklch(1.18% 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 | 1 | 0 | 0 |
| 2 | 0.618 | 0 | 0 |
| 3 | 0.24 | 0 | 0 |
| 4 | 0.079 | 0 | 0 |
| 5 | 0.012 | 0 | 0 |

## In these collections

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

## Other forms

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