# Crimson, tan and teal hero section palette

The Crimson, tan and teal hero section palette brings together red, orange, green, and teal. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is red, and its lightest tone is teal.

- Also called: Complementary pink, gray and teal linear swatches
- Seed: `kYmlwRTidAVEQQbWi02XRzDF-gQQ`
- Page: https://grabient.com/kYmlwRTidAVEQQbWi02XRzDF-gQQ?style=linearSwatches&steps=13&angle=45
- Drawn as: linear swatches, 13 steps, 45 degrees
- Kinds: muted
- Hues: complementary
- Contrast of its darkest and lightest colors: 1.9 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 | `#c2605c` | `oklch(60.63% 0.1268 23.91)` | Barbecue | black, 5.1 to 1 |
| 2 | `#c1625d` | `oklch(60.82% 0.1223 24.41)` | Barbecue | black, 5.1 to 1 |
| 3 | `#be675f` | `oklch(61.19% 0.1135 25.84)` | Tapestry Red | black, 5.2 to 1 |
| 4 | `#b76f66` | `oklch(61.85% 0.0936 27.60)` | Hacienda Tile | black, 5.4 to 1 |
| 5 | `#ac7a73` | `oklch(62.79% 0.0632 29.07)` | Cranberry Foule | black, 5.7 to 1 |
| 6 | `#a28577` | `oklch(64.07% 0.0410 48.24)` | Undercooked Bacon | black, 6.1 to 1 |
| 7 | `#96927d` | `oklch(65.77% 0.0302 98.74)` | Stonegate | black, 6.7 to 1 |
| 8 | `#8b9d8e` | `oklch(67.72% 0.0291 150.25)` | Mossleaf | black, 7.3 to 1 |
| 9 | `#83a79b` | `oklch(69.87% 0.0432 173.06)` | Beckett | black, 7.9 to 1 |
| 10 | `#74b3a7` | `oklch(72.15% 0.0677 180.14)` | Lenticular Ore | black, 8.7 to 1 |
| 11 | `#68bbb2` | `oklch(73.76% 0.0825 186.15)` | Pool Blue | black, 9.3 to 1 |
| 12 | `#65bfba` | `oklch(74.68% 0.0868 190.55)` | Tropic Tide | black, 9.6 to 1 |
| 13 | `#64c0be` | `oklch(75.20% 0.0882 192.99)` | Tropic Tide | black, 9.8 to 1 |

## CSS

```css
background: linear-gradient(45deg, #c2605c 0.000% 7.692%, #c1625d 7.692% 15.385%, #be675f 15.385% 23.077%, #b76f66 23.077% 30.769%, #ac7a73 30.769% 38.462%, #a28577 38.462% 46.154%, #96927d 46.154% 53.846%, #8b9d8e 53.846% 61.538%, #83a79b 61.538% 69.231%, #74b3a7 69.231% 76.923%, #68bbb2 76.923% 84.615%, #65bfba 84.615% 92.308%, #64c0be 92.308% 100.000%);
background: linear-gradient(45deg, oklch(60.63% 0.1268 23.91) 0.000% 7.692%, oklch(60.82% 0.1223 24.41) 7.692% 15.385%, oklch(61.19% 0.1135 25.84) 15.385% 23.077%, oklch(61.85% 0.0936 27.60) 23.077% 30.769%, oklch(62.79% 0.0632 29.07) 30.769% 38.462%, oklch(64.07% 0.0410 48.24) 38.462% 46.154%, oklch(65.77% 0.0302 98.74) 46.154% 53.846%, oklch(67.72% 0.0291 150.25) 53.846% 61.538%, oklch(69.87% 0.0432 173.06) 61.538% 69.231%, oklch(72.15% 0.0677 180.14) 69.231% 76.923%, oklch(73.76% 0.0825 186.15) 76.923% 84.615%, oklch(74.68% 0.0868 190.55) 84.615% 92.308%, oklch(75.20% 0.0882 192.99) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.606 | 0.127 | 23.9 |
| 2 | 0.614 | 0.107 | 27.1 |
| 3 | 0.638 | 0.044 | 41.9 |
| 4 | 0.681 | 0.03 | 157.1 |
| 5 | 0.732 | 0.079 | 183.5 |
| 6 | 0.752 | 0.088 | 193 |

## In these collections

- [Hero section gradients](https://grabient.com/hero-section-gradients)

## Other forms

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