# Vivid yellow, tan, teal and blue angular gradient

Vivid yellow, tan, teal and blue angular gradient with 32 colors: #fcffb1, #fffe86, #fffa84, #fff681, #fff17f, #ffeb7c, #ffe67e, #ffdf7d, #ffd97b, #ffd276, #ffca7b, #fec282, #f8bc88, #ecb686, #d6b27c, #b4ac74, #8ba578, #699c81, #539487, #418f8c, #2c8c91, #0b8b96, #00889a, #00869e, #0085a2, #0084a7, #0a84ab, #1084ae, #0e86b2, #0689b6, #008bb9, #008dbb. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kc-WlOd7E-_CtPfmn72z5lM8kmxDJKEITKzAA`
- Page: https://grabient.com/kc-WlOd7E-_CtPfmn72z5lM8kmxDJKEITKzAA?style=angularGradient&steps=32&angle=300
- Drawn as: angular gradient, 32 steps, 300 degrees
- Kinds: light to dark, vivid, multicolor
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 4.1 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 | `#fcffb1` | `oklch(98.03% 0.0977 109.68)` | VIC 20 Creme | black, 20 to 1 |
| 2 | `#fffe86` | `oklch(97.44% 0.1432 108.52)` | Cinque Foil | black, 19.8 to 1 |
| 3 | `#fffa84` | `oklch(96.61% 0.1411 106.92)` | Aged Plastic Casing | black, 19.3 to 1 |
| 4 | `#fff681` | `oklch(95.62% 0.1386 104.88)` | Yellow Salmonberry | black, 18.7 to 1 |
| 5 | `#fff17f` | `oklch(94.55% 0.1361 102.42)` | Golden Aurelia | black, 18 to 1 |
| 6 | `#ffeb7c` | `oklch(93.48% 0.1338 99.49)` | Digital Yellow | black, 17.4 to 1 |
| 7 | `#ffe67e` | `oklch(92.35% 0.1274 95.95)` | Vacherin Cheese | black, 16.8 to 1 |
| 8 | `#ffdf7d` | `oklch(91.14% 0.1228 92.00)` | Banana Biscuit | black, 16.1 to 1 |
| 9 | `#ffd97b` | `oklch(89.82% 0.1209 87.86)` | Pina | black, 15.4 to 1 |
| 10 | `#ffd276` | `oklch(88.37% 0.1217 83.68)` | Yellow Jubilee | black, 14.7 to 1 |
| 11 | `#ffca7b` | `oklch(86.97% 0.1141 76.39)` | Orange Glass | black, 13.9 to 1 |
| 12 | `#fec282` | `oklch(85.54% 0.1065 67.47)` | Buttery | black, 13.2 to 1 |
| 13 | `#f8bc88` | `oklch(83.81% 0.0970 61.46)` | Mango Ice | black, 12.5 to 1 |
| 14 | `#ecb686` | `oklch(81.51% 0.0887 62.90)` | Rusty Sand | black, 11.6 to 1 |
| 15 | `#d6b27c` | `oklch(78.23% 0.0822 76.52)` | Barley | black, 10.4 to 1 |
| 16 | `#b4ac74` | `oklch(73.85% 0.0759 101.87)` | Jalapeño Jelly | black, 9.1 to 1 |
| 17 | `#8ba578` | `oklch(69.13% 0.0709 132.12)` | Succulent Greenhouse | black, 7.7 to 1 |
| 18 | `#699c81` | `oklch(64.89% 0.0684 160.27)` | Scotch Lassie | black, 6.6 to 1 |
| 19 | `#539487` | `oklch(61.89% 0.0698 179.65)` | Thermal Spring | black, 5.9 to 1 |
| 20 | `#418f8c` | `oklch(60.01% 0.0767 191.58)` | Blue Chill | black, 5.5 to 1 |
| 21 | `#2c8c91` | `oklch(58.84% 0.0869 199.38)` | Fish Story | black, 5.2 to 1 |
| 22 | `#0b8b96` | `oklch(58.12% 0.0975 204.97)` | Tempo Teal | black, 5.1 to 1 |
| 23 | `#00889a` | `oklch(57.56% 0.0997 210.29)` | Marker Blue | black, 5 to 1 |
| 24 | `#00869e` | `oklch(57.12% 0.1014 216.01)` | Eastern Blue | black, 4.9 to 1 |
| 25 | `#0085a2` | `oklch(56.98% 0.1043 220.82)` | Blue Arc | black, 4.8 to 1 |
| 26 | `#0084a7` | `oklch(57.07% 0.1079 224.72)` | Tibetan Turquoise | black, 4.8 to 1 |
| 27 | `#0a84ab` | `oklch(57.31% 0.1095 227.74)` | Tusche Blue | black, 4.8 to 1 |
| 28 | `#1084ae` | `oklch(57.65% 0.1112 229.87)` | Tusche Blue | black, 4.9 to 1 |
| 29 | `#0e86b2` | `oklch(58.26% 0.1141 230.73)` | Stomy Shower | black, 5 to 1 |
| 30 | `#0689b6` | `oklch(59.02% 0.1174 230.70)` | Spinnaker Blue | black, 5.2 to 1 |
| 31 | `#008bb9` | `oklch(59.75% 0.1195 230.34)` | Hawaiian Ocean | black, 5.4 to 1 |
| 32 | `#008dbb` | `oklch(60.24% 0.1203 230.17)` | Hawaiian Surf | black, 5.5 to 1 |

## CSS

```css
background: conic-gradient(from 300deg, #fcffb1 0.0%, #fffe86 3.2%, #fffa84 6.5%, #fff681 9.7%, #fff17f 12.9%, #ffeb7c 16.1%, #ffe67e 19.4%, #ffdf7d 22.6%, #ffd97b 25.8%, #ffd276 29.0%, #ffca7b 32.3%, #fec282 35.5%, #f8bc88 38.7%, #ecb686 41.9%, #d6b27c 45.2%, #b4ac74 48.4%, #8ba578 51.6%, #699c81 54.8%, #539487 58.1%, #418f8c 61.3%, #2c8c91 64.5%, #0b8b96 67.7%, #00889a 71.0%, #00869e 74.2%, #0085a2 77.4%, #0084a7 80.6%, #0a84ab 83.9%, #1084ae 87.1%, #0e86b2 90.3%, #0689b6 93.5%, #008bb9 96.8%, #008dbb 100.0%);
background: conic-gradient(from 300deg in oklch, oklch(98.03% 0.0977 109.68) 0.0%, oklch(97.44% 0.1432 108.52) 3.2%, oklch(96.61% 0.1411 106.92) 6.5%, oklch(95.62% 0.1386 104.88) 9.7%, oklch(94.55% 0.1361 102.42) 12.9%, oklch(93.48% 0.1338 99.49) 16.1%, oklch(92.35% 0.1274 95.95) 19.4%, oklch(91.14% 0.1228 92.00) 22.6%, oklch(89.82% 0.1209 87.86) 25.8%, oklch(88.37% 0.1217 83.68) 29.0%, oklch(86.97% 0.1141 76.39) 32.3%, oklch(85.54% 0.1065 67.47) 35.5%, oklch(83.81% 0.0970 61.46) 38.7%, oklch(81.51% 0.0887 62.90) 41.9%, oklch(78.23% 0.0822 76.52) 45.2%, oklch(73.85% 0.0759 101.87) 48.4%, oklch(69.13% 0.0709 132.12) 51.6%, oklch(64.89% 0.0684 160.27) 54.8%, oklch(61.89% 0.0698 179.65) 58.1%, oklch(60.01% 0.0767 191.58) 61.3%, oklch(58.84% 0.0869 199.38) 64.5%, oklch(58.12% 0.0975 204.97) 67.7%, oklch(57.56% 0.0997 210.29) 71.0%, oklch(57.12% 0.1014 216.01) 74.2%, oklch(56.98% 0.1043 220.82) 77.4%, oklch(57.07% 0.1079 224.72) 80.6%, oklch(57.31% 0.1095 227.74) 83.9%, oklch(57.65% 0.1112 229.87) 87.1%, oklch(58.26% 0.1141 230.73) 90.3%, oklch(59.02% 0.1174 230.70) 93.5%, oklch(59.75% 0.1195 230.34) 96.8%, oklch(60.24% 0.1203 230.17) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.98 | 0.145 | 109.7 |
| 2 | 0.941 | 0.135 | 101.2 |
| 3 | 0.886 | 0.124 | 84.3 |
| 4 | 0.807 | 0.087 | 65.3 |
| 5 | 0.626 | 0.069 | 175.2 |
| 6 | 0.575 | 0.106 | 211.1 |
| 7 | 0.575 | 0.11 | 229.1 |
| 8 | 0.602 | 0.123 | 230.2 |

## In these collections

- [Lemon blossom veranda](https://grabient.com/lemon-blossom-veranda)
- [Yellow and blue gradients](https://grabient.com/yellow-and-blue-gradients)

## Other forms

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