# Warm Yellow Warm Brown Rings

Muted rainbow from yellow to brown linear gradient with 32 colors: #f2c84b, #e8c64a, #ddc349, #d0bf49, #c1bb4a, #b2b64c, #a1b14f, #8fac53, #7da758, #6aa25f, #569e67, #409970, #24947a, #008e85, #00868d, #007e96, #1e749c, #376b9d, #49629b, #585996, #63538e, #6c4e84, #754b7b, #7c4b71, #834c67, #884e5e, #8b5256, #8d5750, #8e5d4c, #8e624a, #8d6649, #8b6949. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Muted rainbow from yellow to brown linear gradient
- Seed: `kU12pAUCfHb0h0dFl04A`
- Page: https://grabient.com/kU12pAUCfHb0h0dFl04A?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark center, rainbow
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.2 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 | `#f2c84b` | `oklch(84.65% 0.1461 90.00)` | Lauwiliwilinukunuku’oi’oi | black, 13 to 1 |
| 2 | `#e8c64a` | `oklch(83.38% 0.1438 93.26)` | Liberator Gold | black, 12.6 to 1 |
| 3 | `#ddc349` | `oklch(81.72% 0.1409 96.96)` | Yellow Magic Orchestra | black, 11.9 to 1 |
| 4 | `#d0bf49` | `oklch(79.74% 0.1374 101.15)` | Sulphur Yellow | black, 11.2 to 1 |
| 5 | `#c1bb4a` | `oklch(77.53% 0.1334 105.91)` | Humorous Green | black, 10.4 to 1 |
| 6 | `#b2b64c` | `oklch(75.16% 0.1292 111.29)` | Japanese Fern | black, 9.6 to 1 |
| 7 | `#a1b14f` | `oklch(72.71% 0.1249 117.38)` | Pandan Cake | black, 8.9 to 1 |
| 8 | `#8fac53` | `oklch(70.24% 0.1206 124.23)` | Lime It or Leave It | black, 8.1 to 1 |
| 9 | `#7da758` | `oklch(67.86% 0.1166 131.90)` | Grassy Meadow | black, 7.5 to 1 |
| 10 | `#6aa25f` | `oklch(65.62% 0.1129 140.47)` | Astroturf | black, 6.9 to 1 |
| 11 | `#569e67` | `oklch(63.60% 0.1098 150.00)` | Mosaic Green | black, 6.4 to 1 |
| 12 | `#409970` | `oklch(61.80% 0.1072 160.74)` | Ocean Green | black, 6 to 1 |
| 13 | `#24947a` | `oklch(59.96% 0.1052 173.15)` | Illuminating Emerald | black, 5.6 to 1 |
| 14 | `#008e85` | `oklch(58.12% 0.1015 186.95)` | Aqua Experience | black, 5.1 to 1 |
| 15 | `#00868d` | `oklch(56.31% 0.0958 201.84)` | Totally Teal | black, 4.7 to 1 |
| 16 | `#007e96` | `oklch(54.57% 0.0977 217.48)` | Pagoda | white, 4.7 to 1 |
| 17 | `#1e749c` | `oklch(52.94% 0.0995 233.52)` | Bateau | white, 5.1 to 1 |
| 18 | `#376b9d` | `oklch(51.47% 0.0983 249.68)` | Star Sapphire | white, 5.6 to 1 |
| 19 | `#49629b` | `oklch(50.19% 0.0970 265.61)` | Mariner | white, 6 to 1 |
| 20 | `#585996` | `oklch(49.14% 0.0955 280.99)` | Persian Plush | white, 6.3 to 1 |
| 21 | `#63538e` | `oklch(48.37% 0.0937 295.50)` | Fine Purple | white, 6.6 to 1 |
| 22 | `#6c4e84` | `oklch(47.92% 0.0916 308.91)` | Zimidar | white, 6.8 to 1 |
| 23 | `#754b7b` | `oklch(47.88% 0.0890 322.35)` | Cabbage Blossom Violet | white, 6.8 to 1 |
| 24 | `#7c4b71` | `oklch(48.21% 0.0861 335.99)` | Madder Magenta | white, 6.7 to 1 |
| 25 | `#834c67` | `oklch(48.82% 0.0829 349.60)` | Damson | white, 6.6 to 1 |
| 26 | `#884e5e` | `oklch(49.65% 0.0796 2.93)` | Hawthorn Rose | white, 6.3 to 1 |
| 27 | `#8b5256` | `oklch(50.61% 0.0763 15.76)` | Roan Rouge | white, 6 to 1 |
| 28 | `#8d5750` | `oklch(51.63% 0.0731 27.85)` | Carpe Diem | white, 5.7 to 1 |
| 29 | `#8e5d4c` | `oklch(52.62% 0.0700 38.94)` | Spicy Mix | white, 5.5 to 1 |
| 30 | `#8e624a` | `oklch(53.52% 0.0674 48.82)` | Weathered Leather | white, 5.2 to 1 |
| 31 | `#8d6649` | `oklch(54.25% 0.0651 57.23)` | Wild Horses | white, 5.1 to 1 |
| 32 | `#8b6949` | `oklch(54.72% 0.0634 63.93)` | Texas Boots | white, 4.9 to 1 |

## CSS

```css
background: linear-gradient(135deg, #f2c84b 0.0%, #e8c64a 3.2%, #ddc349 6.5%, #d0bf49 9.7%, #c1bb4a 12.9%, #b2b64c 16.1%, #a1b14f 19.4%, #8fac53 22.6%, #7da758 25.8%, #6aa25f 29.0%, #569e67 32.3%, #409970 35.5%, #24947a 38.7%, #008e85 41.9%, #00868d 45.2%, #007e96 48.4%, #1e749c 51.6%, #376b9d 54.8%, #49629b 58.1%, #585996 61.3%, #63538e 64.5%, #6c4e84 67.7%, #754b7b 71.0%, #7c4b71 74.2%, #834c67 77.4%, #884e5e 80.6%, #8b5256 83.9%, #8d5750 87.1%, #8e5d4c 90.3%, #8e624a 93.5%, #8d6649 96.8%, #8b6949 100.0%);
background: linear-gradient(135deg in oklch, oklch(84.65% 0.1461 90.00) 0.0%, oklch(83.38% 0.1438 93.26) 3.2%, oklch(81.72% 0.1409 96.96) 6.5%, oklch(79.74% 0.1374 101.15) 9.7%, oklch(77.53% 0.1334 105.91) 12.9%, oklch(75.16% 0.1292 111.29) 16.1%, oklch(72.71% 0.1249 117.38) 19.4%, oklch(70.24% 0.1206 124.23) 22.6%, oklch(67.86% 0.1166 131.90) 25.8%, oklch(65.62% 0.1129 140.47) 29.0%, oklch(63.60% 0.1098 150.00) 32.3%, oklch(61.80% 0.1072 160.74) 35.5%, oklch(59.96% 0.1052 173.15) 38.7%, oklch(58.12% 0.1015 186.95) 41.9%, oklch(56.31% 0.0958 201.84) 45.2%, oklch(54.57% 0.0977 217.48) 48.4%, oklch(52.94% 0.0995 233.52) 51.6%, oklch(51.47% 0.0983 249.68) 54.8%, oklch(50.19% 0.0970 265.61) 58.1%, oklch(49.14% 0.0955 280.99) 61.3%, oklch(48.37% 0.0937 295.50) 64.5%, oklch(47.92% 0.0916 308.91) 67.7%, oklch(47.88% 0.0890 322.35) 71.0%, oklch(48.21% 0.0861 335.99) 74.2%, oklch(48.82% 0.0829 349.60) 77.4%, oklch(49.65% 0.0796 2.93) 80.6%, oklch(50.61% 0.0763 15.76) 83.9%, oklch(51.63% 0.0731 27.85) 87.1%, oklch(52.62% 0.0700 38.94) 90.3%, oklch(53.52% 0.0674 48.82) 93.5%, oklch(54.25% 0.0651 57.23) 96.8%, oklch(54.72% 0.0634 63.93) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.846 | 0.146 | 90 |
| 2 | 0.63 | 0.109 | 153.4 |
| 3 | 0.48 | 0.092 | 304.5 |
| 4 | 0.547 | 0.063 | 423.9 |

## In these collections

- [Throwback kid](https://grabient.com/throwback-kid)

## Other forms

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