# Tan and teal summer palette

The Tan and teal summer palette brings together light yellow, gold, orange, yellow, light green, and teal. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its light and open character suits seasonal campaigns and event graphics. Its darkest tone is orange, and its lightest tone is gold.

- Also called: Tan, yellow, orange and teal angular gradient
- Seed: `kcxyhLa7S_-g5vnduD21rG_tmnRFiq8T46nDo`
- Page: https://grabient.com/kcxyhLa7S_-g5vnduD21rG_tmnRFiq8T46nDo?style=angularGradient&steps=21&angle=135
- Drawn as: angular gradient, 21 steps, 135 degrees
- Kinds: vivid, warm, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 1.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 | `#bdbb92` | `oklch(78.35% 0.0551 105.47)` | Back to Nature | black, 10.6 to 1 |
| 2 | `#c6c384` | `oklch(80.45% 0.0829 105.97)` | Fiddlehead Fern | black, 11.5 to 1 |
| 3 | `#d2cd6c` | `oklch(83.22% 0.1206 106.40)` | Force of Nature | black, 12.6 to 1 |
| 4 | `#dbd252` | `oklch(84.72% 0.1471 105.13)` | Matcha | black, 13.3 to 1 |
| 5 | `#e1cf40` | `oklch(84.46% 0.1565 101.61)` | Crazy | black, 13.1 to 1 |
| 6 | `#e6c733` | `oklch(83.18% 0.1581 96.70)` | Thai Temple | black, 12.5 to 1 |
| 7 | `#e8bd23` | `oklch(81.27% 0.1588 91.07)` | Gold Ore | black, 11.7 to 1 |
| 8 | `#e8ae10` | `oklch(78.39% 0.1586 83.72)` | Yellow of Izamal | black, 10.5 to 1 |
| 9 | `#e69f08` | `oklch(75.19% 0.1563 76.59)` | Hot Butter | black, 9.2 to 1 |
| 10 | `#e0940f` | `oklch(72.57% 0.1525 72.16)` | Beige Red | black, 8.4 to 1 |
| 11 | `#d98c19` | `oklch(70.20% 0.1469 69.21)` | Turmeric Tea | black, 7.6 to 1 |
| 12 | `#d0881f` | `oklch(68.48% 0.1398 69.69)` | Chicken Masala | black, 7.2 to 1 |
| 13 | `#c58c26` | `oklch(68.00% 0.1307 76.46)` | Auric | black, 7.1 to 1 |
| 14 | `#b79637` | `oklch(68.65% 0.1183 89.46)` | Roti | black, 7.4 to 1 |
| 15 | `#a9a24c` | `oklch(70.01% 0.1087 104.55)` | Desert Locust | black, 7.9 to 1 |
| 16 | `#9dae5e` | `oklch(72.06% 0.1081 119.08)` | Herbal Garden | black, 8.6 to 1 |
| 17 | `#8fbe73` | `oklch(74.95% 0.1142 134.51)` | Laudable Lime | black, 9.7 to 1 |
| 18 | `#7ccb8b` | `oklch(77.34% 0.1196 149.03)` | Serengeti Green | black, 10.7 to 1 |
| 19 | `#68d0a1` | `oklch(78.28% 0.1194 162.20)` | Jocose Jade | black, 11.1 to 1 |
| 20 | `#59d1b3` | `oklch(78.38% 0.1166 174.28)` | Simply Aqua | black, 11.1 to 1 |
| 21 | `#52d0bf` | `oklch(78.35% 0.1144 182.61)` | Peppy Peacock | black, 11.1 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #bdbb92 0.0%, #c6c384 5.0%, #d2cd6c 10.0%, #dbd252 15.0%, #e1cf40 20.0%, #e6c733 25.0%, #e8bd23 30.0%, #e8ae10 35.0%, #e69f08 40.0%, #e0940f 45.0%, #d98c19 50.0%, #d0881f 55.0%, #c58c26 60.0%, #b79637 65.0%, #a9a24c 70.0%, #9dae5e 75.0%, #8fbe73 80.0%, #7ccb8b 85.0%, #68d0a1 90.0%, #59d1b3 95.0%, #52d0bf 100.0%);
background: conic-gradient(from 135deg in oklch, oklch(78.35% 0.0551 105.47) 0.0%, oklch(80.45% 0.0829 105.97) 5.0%, oklch(83.22% 0.1206 106.40) 10.0%, oklch(84.72% 0.1471 105.13) 15.0%, oklch(84.46% 0.1565 101.61) 20.0%, oklch(83.18% 0.1581 96.70) 25.0%, oklch(81.27% 0.1588 91.07) 30.0%, oklch(78.39% 0.1586 83.72) 35.0%, oklch(75.19% 0.1563 76.59) 40.0%, oklch(72.57% 0.1525 72.16) 45.0%, oklch(70.20% 0.1469 69.21) 50.0%, oklch(68.48% 0.1398 69.69) 55.0%, oklch(68.00% 0.1307 76.46) 60.0%, oklch(68.65% 0.1183 89.46) 65.0%, oklch(70.01% 0.1087 104.55) 70.0%, oklch(72.06% 0.1081 119.08) 75.0%, oklch(74.95% 0.1142 134.51) 80.0%, oklch(77.34% 0.1196 149.03) 85.0%, oklch(78.28% 0.1194 162.20) 90.0%, oklch(78.38% 0.1166 174.28) 95.0%, oklch(78.35% 0.1144 182.61) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.783 | 0.055 | 105.5 |
| 2 | 0.846 | 0.145 | 105.5 |
| 3 | 0.819 | 0.158 | 92.8 |
| 4 | 0.736 | 0.154 | 73.8 |
| 5 | 0.681 | 0.136 | 71.7 |
| 6 | 0.705 | 0.107 | 108.6 |
| 7 | 0.776 | 0.12 | 150.9 |
| 8 | 0.783 | 0.114 | 182.6 |

## In these collections

- [Summer gradients](https://grabient.com/summer-gradients)

## Other forms

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