# Black, green and brown linear swatches

Black, green and brown linear swatches with 13 colors: #002018, #00372b, #004e3c, #005b42, #006743, #00723a, #007d05, #507e00, #727e00, #8f7e00, #aa7a00, #b27d55, #b28477. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcNyx7riS_rdEvw-Yz5xGw9snRvPOqjw0xY7Q`
- Page: https://grabient.com/kcNyx7riS_rdEvw-Yz5xGw9snRvPOqjw0xY7Q?style=linearSwatches&steps=13&angle=15
- Drawn as: linear swatches, 13 steps, 15 degrees
- Kinds: dark to light, vivid
- Hues: wide
- Contrast of its darkest and lightest colors: 5.2 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 | `#002018` | `oklch(21.67% 0.0414 173.52)` | Clock Chimes Thirteen | white, 17.2 to 1 |
| 2 | `#00372b` | `oklch(29.95% 0.0576 172.86)` | Coach Green | white, 13.3 to 1 |
| 3 | `#004e3c` | `oklch(37.86% 0.0744 170.66)` | Raspberry Leaf Green | white, 9.6 to 1 |
| 4 | `#005b42` | `oklch(41.83% 0.0863 166.48)` | Billiard Table | white, 8.1 to 1 |
| 5 | `#006743` | `oklch(45.29% 0.1016 160.54)` | Greens | white, 6.9 to 1 |
| 6 | `#00723a` | `oklch(48.40% 0.1252 152.76)` | Dartmouth Green | white, 6 to 1 |
| 7 | `#007d05` | `oklch(51.26% 0.1730 142.75)` | Ao | white, 5.3 to 1 |
| 8 | `#507e00` | `oklch(53.92% 0.1464 130.60)` | Avocado | white, 4.8 to 1 |
| 9 | `#727e00` | `oklch(56.48% 0.1294 116.26)` | Flag Green | black, 4.7 to 1 |
| 10 | `#8f7e00` | `oklch(58.90% 0.1224 99.78)` | Moscow Papyrus | black, 5.1 to 1 |
| 11 | `#aa7a00` | `oklch(61.18% 0.1263 81.16)` | Bronze | black, 5.4 to 1 |
| 12 | `#b27d55` | `oklch(63.49% 0.0862 57.65)` | Cowboy Hat | black, 5.9 to 1 |
| 13 | `#b28477` | `oklch(65.35% 0.0606 36.29)` | Dusty Duchess | black, 6.4 to 1 |

## CSS

```css
background: linear-gradient(15deg, #002018 0.000% 7.692%, #00372b 7.692% 15.385%, #004e3c 15.385% 23.077%, #005b42 23.077% 30.769%, #006743 30.769% 38.462%, #00723a 38.462% 46.154%, #007d05 46.154% 53.846%, #507e00 53.846% 61.538%, #727e00 61.538% 69.231%, #8f7e00 69.231% 76.923%, #aa7a00 76.923% 84.615%, #b27d55 84.615% 92.308%, #b28477 92.308% 100.000%);
background: linear-gradient(15deg, oklch(21.67% 0.0414 173.52) 0.000% 7.692%, oklch(29.95% 0.0576 172.86) 7.692% 15.385%, oklch(37.86% 0.0744 170.66) 15.385% 23.077%, oklch(41.83% 0.0863 166.48) 23.077% 30.769%, oklch(45.29% 0.1016 160.54) 30.769% 38.462%, oklch(48.40% 0.1252 152.76) 38.462% 46.154%, oklch(51.26% 0.1730 142.75) 46.154% 53.846%, oklch(53.92% 0.1464 130.60) 53.846% 61.538%, oklch(56.48% 0.1294 116.26) 61.538% 69.231%, oklch(58.90% 0.1224 99.78) 69.231% 76.923%, oklch(61.18% 0.1263 81.16) 76.923% 84.615%, oklch(63.49% 0.0862 57.65) 84.615% 92.308%, oklch(65.35% 0.0606 36.29) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.217 | 0.061 | 173.7 |
| 2 | 0.362 | 0.101 | 171.6 |
| 3 | 0.433 | 0.189 | 164.2 |
| 4 | 0.488 | 0.273 | 151.5 |
| 5 | 0.535 | 0.298 | 132.5 |
| 6 | 0.579 | 0.225 | 107.1 |
| 7 | 0.618 | 0.116 | 75.4 |
| 8 | 0.654 | 0.061 | 36.3 |

## Other forms

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