# Near-black and off-white color palette

The Near-black and off-white color palette brings together dark gray, gray, and light gray. 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 dark gray, and its lightest tone is light gray.

- Also called: Seamless black and gray linear gradient
- Seed: `kcMQSwKgPAMUDPZggj-cYI_82BwCugb_GYDAA`
- Page: https://grabient.com/kcMQSwKgPAMUDPZggj-cYI_82BwCugb_GYDAA?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: light center, neutral, seamless
- Hues: achromatic
- Contrast of its darkest and lightest colors: 13.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 | `#131517` | `oklch(19.29% 0.0055 247.50)` | Dark Void | white, 18.3 to 1 |
| 2 | `#17191c` | `oklch(21.32% 0.0063 248.27)` | Aswad Black | white, 17.5 to 1 |
| 3 | `#1d2023` | `oklch(24.16% 0.0074 249.55)` | Noble Black | white, 16.3 to 1 |
| 4 | `#25282c` | `oklch(27.59% 0.0086 250.50)` | Anthracite | white, 14.7 to 1 |
| 5 | `#2e3236` | `oklch(31.38% 0.0094 250.28)` | Ebony | white, 12.9 to 1 |
| 6 | `#383c41` | `oklch(35.45% 0.0097 247.99)` | Detective Thriller | white, 11 to 1 |
| 7 | `#44484d` | `oklch(40.05% 0.0096 243.44)` | Cyberspace | white, 9.1 to 1 |
| 8 | `#51565a` | `oklch(45.01% 0.0092 237.89)` | Orion Grey | white, 7.4 to 1 |
| 9 | `#5f6468` | `oklch(50.08% 0.0087 232.69)` | Carriage Wheel | white, 5.9 to 1 |
| 10 | `#6d7375` | `oklch(55.03% 0.0082 229.18)` | Improbable | white, 4.8 to 1 |
| 11 | `#7c8184` | `oklch(60.10% 0.0076 227.44)` | Scattered Showers | black, 5.3 to 1 |
| 12 | `#8c9193` | `oklch(65.28% 0.0069 226.72)` | Gotham Grey | black, 6.5 to 1 |
| 13 | `#9ba0a2` | `oklch(70.29% 0.0062 226.55)` | Tank Head | black, 7.9 to 1 |
| 14 | `#aaaeb0` | `oklch(74.82% 0.0056 226.45)` | Grey Timberwolf | black, 9.3 to 1 |
| 15 | `#b7bbbd` | `oklch(79.07% 0.0054 226.16)` | Marseilles | black, 10.9 to 1 |
| 16 | `#c6cacc` | `oklch(83.68% 0.0054 226.04)` | Grey Screen | black, 12.7 to 1 |
| 17 | `#d3d7d9` | `oklch(87.60% 0.0055 226.07)` | Snow Quartz | black, 14.4 to 1 |
| 18 | `#d9dee0` | `oklch(89.67% 0.0056 226.21)` | Cold Water | black, 15.4 to 1 |
| 19 | `#d6dbdc` | `oklch(88.71% 0.0055 226.45)` | Sea Frost | black, 14.9 to 1 |
| 20 | `#c7cbcd` | `oklch(84.07% 0.0052 226.92)` | Porpoise Fin | black, 12.9 to 1 |
| 21 | `#b1b5b7` | `oklch(77.01% 0.0048 227.53)` | Online | black, 10.1 to 1 |
| 22 | `#999c9e` | `oklch(69.09% 0.0044 228.11)` | Pencil Sketch | black, 7.6 to 1 |
| 23 | `#838688` | `oklch(61.90% 0.0042 228.46)` | Magnetic Grey | black, 5.7 to 1 |
| 24 | `#727576` | `oklch(55.93% 0.0041 228.44)` | Sandpiper Cove | white, 4.6 to 1 |
| 25 | `#616465` | `oklch(50.11% 0.0042 228.15)` | Roycroft Pewter | white, 5.9 to 1 |
| 26 | `#525456` | `oklch(44.53% 0.0043 227.77)` | Orion Grey | white, 7.5 to 1 |
| 27 | `#444648` | `oklch(39.35% 0.0043 227.48)` | Black Heron | white, 9.4 to 1 |
| 28 | `#373a3b` | `oklch(34.63% 0.0040 227.44)` | Green Black | white, 11.4 to 1 |
| 29 | `#2c2e2f` | `oklch(30.11% 0.0034 227.64)` | Carbon Fibre | white, 13.5 to 1 |
| 30 | `#232425` | `oklch(25.98% 0.0026 227.95)` | Verified Black | white, 15.5 to 1 |
| 31 | `#1b1c1c` | `oklch(22.54% 0.0019 228.27)` | Eerie Black | white, 17 to 1 |
| 32 | `#161617` | `oklch(20.08% 0.0014 228.48)` | Pot Black | white, 18 to 1 |

## CSS

```css
background: linear-gradient(90deg, #131517 0.0%, #17191c 3.2%, #1d2023 6.5%, #25282c 9.7%, #2e3236 12.9%, #383c41 16.1%, #44484d 19.4%, #51565a 22.6%, #5f6468 25.8%, #6d7375 29.0%, #7c8184 32.3%, #8c9193 35.5%, #9ba0a2 38.7%, #aaaeb0 41.9%, #b7bbbd 45.2%, #c6cacc 48.4%, #d3d7d9 51.6%, #d9dee0 54.8%, #d6dbdc 58.1%, #c7cbcd 61.3%, #b1b5b7 64.5%, #999c9e 67.7%, #838688 71.0%, #727576 74.2%, #616465 77.4%, #525456 80.6%, #444648 83.9%, #373a3b 87.1%, #2c2e2f 90.3%, #232425 93.5%, #1b1c1c 96.8%, #161617 100.0%);
background: linear-gradient(90deg in oklch, oklch(19.29% 0.0055 247.50) 0.0%, oklch(21.32% 0.0063 248.27) 3.2%, oklch(24.16% 0.0074 249.55) 6.5%, oklch(27.59% 0.0086 250.50) 9.7%, oklch(31.38% 0.0094 250.28) 12.9%, oklch(35.45% 0.0097 247.99) 16.1%, oklch(40.05% 0.0096 243.44) 19.4%, oklch(45.01% 0.0092 237.89) 22.6%, oklch(50.08% 0.0087 232.69) 25.8%, oklch(55.03% 0.0082 229.18) 29.0%, oklch(60.10% 0.0076 227.44) 32.3%, oklch(65.28% 0.0069 226.72) 35.5%, oklch(70.29% 0.0062 226.55) 38.7%, oklch(74.82% 0.0056 226.45) 41.9%, oklch(79.07% 0.0054 226.16) 45.2%, oklch(83.68% 0.0054 226.04) 48.4%, oklch(87.60% 0.0055 226.07) 51.6%, oklch(89.67% 0.0056 226.21) 54.8%, oklch(88.71% 0.0055 226.45) 58.1%, oklch(84.07% 0.0052 226.92) 61.3%, oklch(77.01% 0.0048 227.53) 64.5%, oklch(69.09% 0.0044 228.11) 67.7%, oklch(61.90% 0.0042 228.46) 71.0%, oklch(55.93% 0.0041 228.44) 74.2%, oklch(50.11% 0.0042 228.15) 77.4%, oklch(44.53% 0.0043 227.77) 80.6%, oklch(39.35% 0.0043 227.48) 83.9%, oklch(34.63% 0.0040 227.44) 87.1%, oklch(30.11% 0.0034 227.64) 90.3%, oklch(25.98% 0.0026 227.95) 93.5%, oklch(22.54% 0.0019 228.27) 96.8%, oklch(20.08% 0.0014 228.48) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.193 | 0.006 | 247.5 |
| 2 | 0.331 | 0.01 | 249.6 |
| 3 | 0.543 | 0.008 | 229.5 |
| 4 | 0.76 | 0.006 | 226.4 |
| 5 | 0.894 | 0.006 | 226.4 |
| 6 | 0.61 | 0.004 | 228.5 |
| 7 | 0.366 | 0.004 | 227.4 |
| 8 | 0.201 | 0.001 | 228.5 |

## In these collections

- [Gray gradients](https://grabient.com/gray-gradients)
- [Silver color palette](https://grabient.com/silver-color-palette)

## Other forms

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