# Near-black, off-white and crimson color palette

The Near-black, off-white and crimson color palette brings together dark gray, gray, light gray, off-white, and red. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits website sections and interface mockups. Its darkest tone is dark gray, and its lightest tone is off-white.

- Also called: Black, gray, white and orange radial swatches
- Seed: `kWNABAOIO-G6Bvf7AMXUDu3o`
- Page: https://grabient.com/kWNABAOIO-G6Bvf7AMXUDu3o?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Kinds: light center, neutral
- Hues: analogous
- Contrast of its darkest and lightest colors: 16.3 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 | `#171717` | `oklch(20.47% 0.0000 89.88)` | Cynical Black | white, 17.9 to 1 |
| 2 | `#57534e` | `oklch(44.49% 0.0096 74.15)` | Thunder Grey | white, 7.6 to 1 |
| 3 | `#d6d3d2` | `oklch(87.01% 0.0041 57.24)` | Balanced | black, 14.1 to 1 |
| 4 | `#f5f5f4` | `oklch(96.85% 0.0014 106.91)` | White Smoke | black, 19.1 to 1 |
| 5 | `#d95e39` | `oklch(62.99% 0.1640 37.16)` | Medium Vermilion | black, 5.5 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #171717 0.000% 20.000%, #57534e 20.000% 40.000%, #d6d3d2 40.000% 60.000%, #f5f5f4 60.000% 80.000%, #d95e39 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(20.47% 0.0000 89.88) 0.000% 20.000%, oklch(44.49% 0.0096 74.15) 20.000% 40.000%, oklch(87.01% 0.0041 57.24) 40.000% 60.000%, oklch(96.85% 0.0014 106.91) 60.000% 80.000%, oklch(62.99% 0.1640 37.16) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.205 | 0 | 90 |
| 2 | 0.445 | 0.01 | 74.1 |
| 3 | 0.87 | 0.004 | 57.2 |
| 4 | 0.969 | 0.001 | 106.9 |
| 5 | 0.63 | 0.164 | 37.2 |

## In these collections

- [Modern swatches](https://grabient.com/modern-swatches)
- [UI swatches](https://grabient.com/ui-swatches)

## Other forms

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