# Complementary brown, black and teal linear gradient

Complementary brown, black and teal linear gradient with 14 colors: #3a0004, #2c0300, #1c0100, #050002, #000000, #000000, #00000c, #000f28, #003648, #08575f, #036c6d, #007573, #016c6e, #076167. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaOEERkZPAgAAMkOlj7MZg5kCgPa5G0Eg`
- Page: https://grabient.com/kaOEERkZPAgAAMkOlj7MZg5kCgPa5G0Eg?steps=14
- Drawn as: linear gradient, 14 steps, 90 degrees
- Kinds: dark center, vivid, dark
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.8 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 | `#3a0004` | `oklch(22.06% 0.0894 24.70)` | Dark Maroon | white, 17.7 to 1 |
| 2 | `#2c0300` | `oklch(19.11% 0.0707 32.89)` | Sepia Black | white, 18.7 to 1 |
| 3 | `#1c0100` | `oklch(14.63% 0.0557 31.86)` | Dwarf Fortress | white, 19.9 to 1 |
| 4 | `#050002` | `oklch(7.73% 0.0292 349.55)` | Raven’s Coat | white, 20.8 to 1 |
| 5 | `#000000` | `oklch(0.79% 0.0021 287.81)` | Black | white, 20.9 to 1 |
| 6 | `#000000` | `oklch(1.47% 0.0097 269.72)` | Black | white, 20.9 to 1 |
| 7 | `#00000c` | `oklch(7.19% 0.0479 268.25)` | Benthic Black | white, 20.8 to 1 |
| 8 | `#000f28` | `oklch(17.03% 0.0574 255.65)` | Void | white, 19.1 to 1 |
| 9 | `#003648` | `oklch(31.14% 0.0600 226.86)` | Crowberry Blue | white, 12.9 to 1 |
| 10 | `#08575f` | `oklch(41.84% 0.0690 206.16)` | Baltic Trench | white, 8.2 to 1 |
| 11 | `#036c6d` | `oklch(48.25% 0.0816 195.85)` | Byzantine Blue | white, 6.2 to 1 |
| 12 | `#007573` | `oklch(50.90% 0.0874 192.15)` | Skobeloff | white, 5.5 to 1 |
| 13 | `#016c6e` | `oklch(48.23% 0.0819 196.98)` | Byzantine Blue | white, 6.2 to 1 |
| 14 | `#076167` | `oklch(44.88% 0.0744 202.85)` | Turkish Aqua | white, 7.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #3a0004 0.0%, #2c0300 7.7%, #1c0100 15.4%, #050002 23.1%, #000000 30.8%, #000000 38.5%, #00000c 46.2%, #000f28 53.8%, #003648 61.5%, #08575f 69.2%, #036c6d 76.9%, #007573 84.6%, #016c6e 92.3%, #076167 100.0%);
background: linear-gradient(90deg in oklch, oklch(22.06% 0.0894 24.70) 0.0%, oklch(19.11% 0.0707 32.89) 7.7%, oklch(14.63% 0.0557 31.86) 15.4%, oklch(7.73% 0.0292 349.55) 23.1%, oklch(0.79% 0.0021 287.81) 30.8%, oklch(1.47% 0.0097 269.72) 38.5%, oklch(7.19% 0.0479 268.25) 46.2%, oklch(17.03% 0.0574 255.65) 53.8%, oklch(31.14% 0.0600 226.86) 61.5%, oklch(41.84% 0.0690 206.16) 69.2%, oklch(48.25% 0.0816 195.85) 76.9%, oklch(50.90% 0.0874 192.15) 84.6%, oklch(48.23% 0.0819 196.98) 92.3%, oklch(44.88% 0.0744 202.85) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.22 | 0.09 | 24.6 |
| 2 | 0.138 | 0.054 | 29.9 |
| 3 | 0 | 0 | -85.3 |
| 4 | 0.114 | 0.061 | -94.8 |
| 5 | 0.39 | 0.066 | -148.7 |
| 6 | 0.508 | 0.088 | -167.7 |
| 7 | 0.449 | 0.074 | -157.2 |

## In these collections

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

## Other forms

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