# Teal aqua orange crimson bands

Dark teal, green, orange and brown linear swatches with 13 colors: #00373d, #005261, #05758a, #199b9f, #49b39d, #78ba8a, #a7ad5d, #cb9038, #e26b01, #e24600, #cd3200, #a82f0c, #80351e. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Dark teal, green, orange and brown linear swatches
- Seed: `kcTiaTPh_BVSmPHdI7sWSu3tDGu7Ex78NqhAQ`
- Page: https://grabient.com/kcTiaTPh_BVSmPHdI7sWSu3tDGu7Ex78NqhAQ?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 steps, 90 degrees
- Kinds: light center, vivid, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 5.6 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 | `#00373d` | `oklch(30.71% 0.0524 206.72)` | Natural Indigo | white, 13 to 1 |
| 2 | `#005261` | `oklch(40.39% 0.0717 215.86)` | Sandalwood Grey Blue | white, 8.8 to 1 |
| 3 | `#05758a` | `oklch(51.92% 0.0910 215.93)` | Glamour Green | white, 5.3 to 1 |
| 4 | `#199b9f` | `oklch(62.89% 0.1024 197.93)` | Island Dream | black, 6.2 to 1 |
| 5 | `#49b39d` | `oklch(69.95% 0.1032 176.93)` | Sacred Turquoise | black, 8.2 to 1 |
| 6 | `#78ba8a` | `oklch(73.05% 0.0975 152.01)` | Jade Stone Green | black, 9.1 to 1 |
| 7 | `#a7ad5d` | `oklch(72.49% 0.1038 112.34)` | April Green | black, 8.7 to 1 |
| 8 | `#cb9038` | `oklch(69.65% 0.1245 73.53)` | Alameda Ochre | black, 7.6 to 1 |
| 9 | `#e26b01` | `oklch(65.95% 0.1729 50.48)` | Accent Orange | black, 6.3 to 1 |
| 10 | `#e24600` | `oklch(61.26% 0.2017 37.74)` | Baptism by Fire | black, 5.1 to 1 |
| 11 | `#cd3200` | `oklch(55.64% 0.1965 34.73)` | Pleasant Pomegranate | white, 5.1 to 1 |
| 12 | `#a82f0c` | `oklch(48.90% 0.1628 35.20)` | Enfield Brown | white, 6.8 to 1 |
| 13 | `#80351e` | `oklch(42.91% 0.1102 37.64)` | Warmth of Teamwork | white, 8.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #00373d 0.000% 7.692%, #005261 7.692% 15.385%, #05758a 15.385% 23.077%, #199b9f 23.077% 30.769%, #49b39d 30.769% 38.462%, #78ba8a 38.462% 46.154%, #a7ad5d 46.154% 53.846%, #cb9038 53.846% 61.538%, #e26b01 61.538% 69.231%, #e24600 69.231% 76.923%, #cd3200 76.923% 84.615%, #a82f0c 84.615% 92.308%, #80351e 92.308% 100.000%);
background: linear-gradient(90deg, oklch(30.71% 0.0524 206.72) 0.000% 7.692%, oklch(40.39% 0.0717 215.86) 7.692% 15.385%, oklch(51.92% 0.0910 215.93) 15.385% 23.077%, oklch(62.89% 0.1024 197.93) 23.077% 30.769%, oklch(69.95% 0.1032 176.93) 30.769% 38.462%, oklch(73.05% 0.0975 152.01) 38.462% 46.154%, oklch(72.49% 0.1038 112.34) 46.154% 53.846%, oklch(69.65% 0.1245 73.53) 53.846% 61.538%, oklch(65.95% 0.1729 50.48) 61.538% 69.231%, oklch(61.26% 0.2017 37.74) 69.231% 76.923%, oklch(55.64% 0.1965 34.73) 76.923% 84.615%, oklch(48.90% 0.1628 35.20) 84.615% 92.308%, oklch(42.91% 0.1102 37.64) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.307 | 0.052 | 206.7 |
| 2 | 0.488 | 0.087 | 218.3 |
| 3 | 0.665 | 0.105 | 188.8 |
| 4 | 0.732 | 0.098 | 147.5 |
| 5 | 0.701 | 0.12 | 77.8 |
| 6 | 0.634 | 0.194 | 41.9 |
| 7 | 0.539 | 0.197 | 34.5 |
| 8 | 0.429 | 0.11 | 37.6 |

## In these collections

- [Teal and orange](https://grabient.com/teal-and-orange)
- [Afro bohemian](https://grabient.com/afro-bohemian)

## Other forms

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