# Analogous yellow, orange and brown linear swatches

Analogous yellow, orange and brown linear swatches with 32 colors: #ffcb60, #fec85e, #fdc35b, #fcbe57, #fab854, #f8b151, #f6ab4e, #f4a44a, #f19f47, #ef9943, #ed933f, #eb8d3a, #e98735, #e68131, #e27a2d, #de7429, #d86e27, #d16725, #c96123, #c05a21, #b7531f, #ae4d1d, #a5481b, #9c4219, #933d18, #8a3916, #803414, #773012, #6e2c10, #66290f, #5f260e, #5a240d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kGf_LYHyoEgdtxKBmkEZFaJA0`
- Page: https://grabient.com/kGf_LYHyoEgdtxKBmkEZFaJA0?style=linearSwatches&steps=32&angle=180
- Drawn as: linear swatches, 32 steps, 180 degrees
- Kinds: light to dark, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.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 | `#ffcb60` | `oklch(86.81% 0.1368 83.13)` | Nacho | black, 13.9 to 1 |
| 2 | `#fec85e` | `oklch(86.05% 0.1371 81.62)` | Grilled Cheese | black, 13.6 to 1 |
| 3 | `#fdc35b` | `oklch(85.05% 0.1373 79.57)` | Orange Delight | black, 13.1 to 1 |
| 4 | `#fcbe57` | `oklch(83.85% 0.1376 77.12)` | Saffron Mango | black, 12.6 to 1 |
| 5 | `#fab854` | `oklch(82.52% 0.1380 74.43)` | Amber Yellow | black, 12 to 1 |
| 6 | `#f8b151` | `oklch(81.10% 0.1385 71.63)` | Flare | black, 11.4 to 1 |
| 7 | `#f6ab4e` | `oklch(79.65% 0.1391 68.89)` | Pani Puri | black, 10.8 to 1 |
| 8 | `#f4a44a` | `oklch(78.22% 0.1400 66.33)` | Troll Slayer Orange | black, 10.2 to 1 |
| 9 | `#f19f47` | `oklch(76.85% 0.1412 64.11)` | Osage Orange | black, 9.7 to 1 |
| 10 | `#ef9943` | `oklch(75.54% 0.1430 62.04)` | Mandarin Essence | black, 9.3 to 1 |
| 11 | `#ed933f` | `oklch(74.24% 0.1455 60.03)` | Furry Lion | black, 8.8 to 1 |
| 12 | `#eb8d3a` | `oklch(72.92% 0.1483 58.08)` | California | black, 8.4 to 1 |
| 13 | `#e98735` | `oklch(71.56% 0.1510 56.22)` | Kid’s Stuff | black, 7.9 to 1 |
| 14 | `#e68131` | `oklch(70.13% 0.1534 54.44)` | West Side | black, 7.5 to 1 |
| 15 | `#e27a2d` | `oklch(68.59% 0.1550 52.76)` | Sandy Peppers | black, 7 to 1 |
| 16 | `#de7429` | `oklch(66.92% 0.1557 51.19)` | Tahiti Gold | black, 6.6 to 1 |
| 17 | `#d86e27` | `oklch(65.08% 0.1550 49.73)` | Christmas Orange | black, 6.1 to 1 |
| 18 | `#d16725` | `oklch(63.05% 0.1533 48.34)` | Chocolate | black, 5.6 to 1 |
| 19 | `#c96123` | `oklch(60.86% 0.1508 47.03)` | Golden Lion Tamarin | black, 5.2 to 1 |
| 20 | `#c05a21` | `oklch(58.56% 0.1476 45.82)` | Grieving Daylily | black, 4.7 to 1 |
| 21 | `#b7531f` | `oklch(56.22% 0.1439 44.72)` | Taisha Brown | white, 4.8 to 1 |
| 22 | `#ae4d1d` | `oklch(53.86% 0.1398 43.75)` | Funky Monkey | white, 5.3 to 1 |
| 23 | `#a5481b` | `oklch(51.56% 0.1354 42.91)` | Potter’s Clay | white, 5.9 to 1 |
| 24 | `#9c4219` | `oklch(49.35% 0.1309 42.22)` | Autumn Red | white, 6.5 to 1 |
| 25 | `#933d18` | `oklch(47.20% 0.1261 41.72)` | Citrine Brown | white, 7.1 to 1 |
| 26 | `#8a3916` | `oklch(44.93% 0.1204 41.43)` | Dusky Orange | white, 7.8 to 1 |
| 27 | `#803414` | `oklch(42.62% 0.1140 41.32)` | Rogan Josh | white, 8.6 to 1 |
| 28 | `#773012` | `oklch(40.35% 0.1074 41.34)` | Beer Glazed Bacon | white, 9.5 to 1 |
| 29 | `#6e2c10` | `oklch(38.22% 0.1009 41.43)` | Moussaka | white, 10.3 to 1 |
| 30 | `#66290f` | `oklch(36.30% 0.0950 41.54)` | Roastery | white, 11.1 to 1 |
| 31 | `#5f260e` | `oklch(34.69% 0.0901 41.64)` | Hot Fudge | white, 11.8 to 1 |
| 32 | `#5a240d` | `oklch(33.48% 0.0865 41.66)` | Peaty Brown | white, 12.4 to 1 |

## CSS

```css
background: linear-gradient(180deg, #ffcb60 0.000% 3.125%, #fec85e 3.125% 6.250%, #fdc35b 6.250% 9.375%, #fcbe57 9.375% 12.500%, #fab854 12.500% 15.625%, #f8b151 15.625% 18.750%, #f6ab4e 18.750% 21.875%, #f4a44a 21.875% 25.000%, #f19f47 25.000% 28.125%, #ef9943 28.125% 31.250%, #ed933f 31.250% 34.375%, #eb8d3a 34.375% 37.500%, #e98735 37.500% 40.625%, #e68131 40.625% 43.750%, #e27a2d 43.750% 46.875%, #de7429 46.875% 50.000%, #d86e27 50.000% 53.125%, #d16725 53.125% 56.250%, #c96123 56.250% 59.375%, #c05a21 59.375% 62.500%, #b7531f 62.500% 65.625%, #ae4d1d 65.625% 68.750%, #a5481b 68.750% 71.875%, #9c4219 71.875% 75.000%, #933d18 75.000% 78.125%, #8a3916 78.125% 81.250%, #803414 81.250% 84.375%, #773012 84.375% 87.500%, #6e2c10 87.500% 90.625%, #66290f 90.625% 93.750%, #5f260e 93.750% 96.875%, #5a240d 96.875% 100.000%);
background: linear-gradient(180deg, oklch(86.81% 0.1368 83.13) 0.000% 3.125%, oklch(86.05% 0.1371 81.62) 3.125% 6.250%, oklch(85.05% 0.1373 79.57) 6.250% 9.375%, oklch(83.85% 0.1376 77.12) 9.375% 12.500%, oklch(82.52% 0.1380 74.43) 12.500% 15.625%, oklch(81.10% 0.1385 71.63) 15.625% 18.750%, oklch(79.65% 0.1391 68.89) 18.750% 21.875%, oklch(78.22% 0.1400 66.33) 21.875% 25.000%, oklch(76.85% 0.1412 64.11) 25.000% 28.125%, oklch(75.54% 0.1430 62.04) 28.125% 31.250%, oklch(74.24% 0.1455 60.03) 31.250% 34.375%, oklch(72.92% 0.1483 58.08) 34.375% 37.500%, oklch(71.56% 0.1510 56.22) 37.500% 40.625%, oklch(70.13% 0.1534 54.44) 40.625% 43.750%, oklch(68.59% 0.1550 52.76) 43.750% 46.875%, oklch(66.92% 0.1557 51.19) 46.875% 50.000%, oklch(65.08% 0.1550 49.73) 50.000% 53.125%, oklch(63.05% 0.1533 48.34) 53.125% 56.250%, oklch(60.86% 0.1508 47.03) 56.250% 59.375%, oklch(58.56% 0.1476 45.82) 59.375% 62.500%, oklch(56.22% 0.1439 44.72) 62.500% 65.625%, oklch(53.86% 0.1398 43.75) 65.625% 68.750%, oklch(51.56% 0.1354 42.91) 68.750% 71.875%, oklch(49.35% 0.1309 42.22) 71.875% 75.000%, oklch(47.20% 0.1261 41.72) 75.000% 78.125%, oklch(44.93% 0.1204 41.43) 78.125% 81.250%, oklch(42.62% 0.1140 41.32) 81.250% 84.375%, oklch(40.35% 0.1074 41.34) 84.375% 87.500%, oklch(38.22% 0.1009 41.43) 87.500% 90.625%, oklch(36.30% 0.0950 41.54) 90.625% 93.750%, oklch(34.69% 0.0901 41.64) 93.750% 96.875%, oklch(33.48% 0.0865 41.66) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.868 | 0.137 | 83.1 |
| 2 | 0.772 | 0.141 | 64.6 |
| 3 | 0.66 | 0.155 | 50.4 |
| 4 | 0.488 | 0.13 | 42.1 |
| 5 | 0.335 | 0.086 | 41.7 |

## In these collections

- [GTA 6 gradients](https://grabient.com/gta-6-gradients)

## Other forms

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