# Gray, yellow, orange and teal angular swatches

Gray, yellow, orange and teal angular swatches with 21 colors: #bdbb92, #c6c384, #d2cd6c, #dbd252, #e1cf40, #e6c733, #e8bd23, #e8ae10, #e69f08, #e0940f, #d98c19, #d0881f, #c58c26, #b79637, #a9a24c, #9dae5e, #8fbe73, #7ccb8b, #68d0a1, #59d1b3, #52d0bf. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcxyhLa7S_-g5vnduD21rG_tmnRFiq8T46nDo`
- Page: https://grabient.com/kcxyhLa7S_-g5vnduD21rG_tmnRFiq8T46nDo?style=angularSwatches&steps=21&angle=135
- Drawn as: angular swatches, 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.000% 4.762%, #c6c384 4.762% 9.524%, #d2cd6c 9.524% 14.286%, #dbd252 14.286% 19.048%, #e1cf40 19.048% 23.810%, #e6c733 23.810% 28.571%, #e8bd23 28.571% 33.333%, #e8ae10 33.333% 38.095%, #e69f08 38.095% 42.857%, #e0940f 42.857% 47.619%, #d98c19 47.619% 52.381%, #d0881f 52.381% 57.143%, #c58c26 57.143% 61.905%, #b79637 61.905% 66.667%, #a9a24c 66.667% 71.429%, #9dae5e 71.429% 76.190%, #8fbe73 76.190% 80.952%, #7ccb8b 80.952% 85.714%, #68d0a1 85.714% 90.476%, #59d1b3 90.476% 95.238%, #52d0bf 95.238% 100.000%);
background: conic-gradient(from 135deg, oklch(78.35% 0.0551 105.47) 0.000% 4.762%, oklch(80.45% 0.0829 105.97) 4.762% 9.524%, oklch(83.22% 0.1206 106.40) 9.524% 14.286%, oklch(84.72% 0.1471 105.13) 14.286% 19.048%, oklch(84.46% 0.1565 101.61) 19.048% 23.810%, oklch(83.18% 0.1581 96.70) 23.810% 28.571%, oklch(81.27% 0.1588 91.07) 28.571% 33.333%, oklch(78.39% 0.1586 83.72) 33.333% 38.095%, oklch(75.19% 0.1563 76.59) 38.095% 42.857%, oklch(72.57% 0.1525 72.16) 42.857% 47.619%, oklch(70.20% 0.1469 69.21) 47.619% 52.381%, oklch(68.48% 0.1398 69.69) 52.381% 57.143%, oklch(68.00% 0.1307 76.46) 57.143% 61.905%, oklch(68.65% 0.1183 89.46) 61.905% 66.667%, oklch(70.01% 0.1087 104.55) 66.667% 71.429%, oklch(72.06% 0.1081 119.08) 71.429% 76.190%, oklch(74.95% 0.1142 134.51) 76.190% 80.952%, oklch(77.34% 0.1196 149.03) 80.952% 85.714%, oklch(78.28% 0.1194 162.20) 85.714% 90.476%, oklch(78.38% 0.1166 174.28) 90.476% 95.238%, oklch(78.35% 0.1144 182.61) 95.238% 100.000%);
```

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