# Near-black, tan and deep cyan color palette

The Near-black, tan and deep cyan color palette brings together dark gray, orange, teal, and dark teal. The colors span a moderate lightness range, combining restrained color with gentle contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is dark gray, and its lightest tone is orange.

- Also called: Black, brown, gray and navy linear swatches
- Seed: `kYOANctBC2MOYQBDC8EtQpOqKVxC`
- Page: https://grabient.com/kYOANctBC2MOYQBDC8EtQpOqKVxC?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 steps, 90 degrees
- Kinds: light center, muted
- Hues: complementary
- Contrast of its darkest and lightest colors: 3.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 | `#1a1b19` | `oklch(22.05% 0.0041 130.08)` | Siyâh Black | white, 17.2 to 1 |
| 2 | `#2e2b20` | `oklch(28.92% 0.0195 97.35)` | Karaka | white, 14.1 to 1 |
| 3 | `#523d2d` | `oklch(37.96% 0.0393 57.51)` | Fresh Roe | white, 10.1 to 1 |
| 4 | `#6e4b3d` | `oklch(44.76% 0.0534 41.82)` | Fondue Fudge | white, 7.6 to 1 |
| 5 | `#835845` | `oklch(50.26% 0.0641 44.56)` | October Leaves | white, 6 to 1 |
| 6 | `#8d624c` | `oklch(53.59% 0.0651 48.89)` | Tamarind Tart | white, 5.2 to 1 |
| 7 | `#896757` | `oklch(54.40% 0.0505 46.26)` | Suede Leather | white, 5 to 1 |
| 8 | `#7c685a` | `oklch(53.20% 0.0337 54.37)` | Warrior | white, 5.2 to 1 |
| 9 | `#686352` | `oklch(50.00% 0.0267 95.67)` | Ivy Topiary | white, 5.9 to 1 |
| 10 | `#4a5a4f` | `oklch(44.99% 0.0254 156.36)` | Grubenwald | white, 7.3 to 1 |
| 11 | `#324b4b` | `oklch(39.34% 0.0311 195.51)` | Tree Bark Green | white, 9.3 to 1 |
| 12 | `#113a42` | `oklch(32.38% 0.0465 211.97)` | Ghostlands Coal | white, 12.3 to 1 |
| 13 | `#002c38` | `oklch(27.18% 0.0495 220.02)` | Black Chasm | white, 14.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #1a1b19 0.000% 7.692%, #2e2b20 7.692% 15.385%, #523d2d 15.385% 23.077%, #6e4b3d 23.077% 30.769%, #835845 30.769% 38.462%, #8d624c 38.462% 46.154%, #896757 46.154% 53.846%, #7c685a 53.846% 61.538%, #686352 61.538% 69.231%, #4a5a4f 69.231% 76.923%, #324b4b 76.923% 84.615%, #113a42 84.615% 92.308%, #002c38 92.308% 100.000%);
background: linear-gradient(90deg, oklch(22.05% 0.0041 130.08) 0.000% 7.692%, oklch(28.92% 0.0195 97.35) 7.692% 15.385%, oklch(37.96% 0.0393 57.51) 15.385% 23.077%, oklch(44.76% 0.0534 41.82) 23.077% 30.769%, oklch(50.26% 0.0641 44.56) 30.769% 38.462%, oklch(53.59% 0.0651 48.89) 38.462% 46.154%, oklch(54.40% 0.0505 46.26) 46.154% 53.846%, oklch(53.20% 0.0337 54.37) 53.846% 61.538%, oklch(50.00% 0.0267 95.67) 61.538% 69.231%, oklch(44.99% 0.0254 156.36) 69.231% 76.923%, oklch(39.34% 0.0311 195.51) 76.923% 84.615%, oklch(32.38% 0.0465 211.97) 84.615% 92.308%, oklch(27.18% 0.0495 220.02) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.22 | 0.004 | 130.1 |
| 2 | 0.409 | 0.045 | 47.7 |
| 3 | 0.531 | 0.066 | 48.7 |
| 4 | 0.528 | 0.032 | 59.3 |
| 5 | 0.417 | 0.028 | 184 |
| 6 | 0.272 | 0.059 | 219.9 |

## In these collections

- [Natural swatches](https://grabient.com/natural-swatches)

## Other forms

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