# Orange, gray and blue angular gradient

Orange, gray and blue angular gradient with 32 colors: #ab4d04, #b15202, #ba5b00, #c46500, #cd6f00, #d57800, #d9800b, #dd8718, #df8e24, #df9430, #de9a3c, #daa04a, #d4a55c, #ceaa6d, #c6ad7c, #bdaf87, #b4b18e, #a8b394, #9ab49b, #8db3a3, #82b1ab, #78adb1, #6daab4, #5fa6b7, #4ea2b8, #3b9eb8, #2c98b7, #2191b3, #1989ad, #1281a6, #0d7aa0, #09759b. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kah2ci1LhBd4vwVgE0LWxPL1ElwrDJcEA`
- Page: https://grabient.com/kah2ci1LhBd4vwVgE0LWxPL1ElwrDJcEA?style=angularGradient&steps=32
- Drawn as: angular gradient, 32 steps, 90 degrees
- Kinds: vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 2.5 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 | `#ab4d04` | `oklch(53.15% 0.1419 48.52)` | Cinnamon Bun | white, 5.5 to 1 |
| 2 | `#b15202` | `oklch(54.99% 0.1441 50.19)` | Skrag Brown | white, 5.1 to 1 |
| 3 | `#ba5b00` | `oklch(57.63% 0.1472 52.52)` | Dry Clay | white, 4.5 to 1 |
| 4 | `#c46500` | `oklch(60.66% 0.1497 55.28)` | Hawaiian Sunset | black, 5.1 to 1 |
| 5 | `#cd6f00` | `oklch(63.65% 0.1521 58.13)` | Sludge | black, 5.8 to 1 |
| 6 | `#d57800` | `oklch(66.19% 0.1541 60.78)` | Autumn Leaf Orange | black, 6.5 to 1 |
| 7 | `#d9800b` | `oklch(68.14% 0.1532 62.99)` | Orange Pepper | black, 7 to 1 |
| 8 | `#dd8718` | `oklch(69.87% 0.1509 64.88)` | Non-Stop Orange | black, 7.5 to 1 |
| 9 | `#df8e24` | `oklch(71.37% 0.1472 66.77)` | Soft Pumpkin | black, 8 to 1 |
| 10 | `#df9430` | `oklch(72.65% 0.1418 68.95)` | Treacle Fudge | black, 8.4 to 1 |
| 11 | `#de9a3c` | `oklch(73.71% 0.1340 71.72)` | Gold Crest | black, 8.8 to 1 |
| 12 | `#daa04a` | `oklch(74.55% 0.1229 74.78)` | Solar Fusion | black, 9.1 to 1 |
| 13 | `#d4a55c` | `oklch(75.16% 0.1068 77.04)` | Cat’s Eye Marble | black, 9.3 to 1 |
| 14 | `#ceaa6d` | `oklch(75.54% 0.0885 79.70)` | More Maple | black, 9.5 to 1 |
| 15 | `#c6ad7c` | `oklch(75.71% 0.0710 84.13)` | Butterbrot | black, 9.6 to 1 |
| 16 | `#bdaf87` | `oklch(75.68% 0.0570 91.72)` | Owl Manner Malt | black, 9.6 to 1 |
| 17 | `#b4b18e` | `oklch(75.44% 0.0491 104.16)` | That’s Atomic | black, 9.6 to 1 |
| 18 | `#a8b394` | `oklch(74.97% 0.0455 123.02)` | Family Tree | black, 9.5 to 1 |
| 19 | `#9ab49b` | `oklch(74.28% 0.0450 145.46)` | Copper Patina | black, 9.3 to 1 |
| 20 | `#8db3a3` | `oklch(73.41% 0.0469 168.16)` | Chrysopal Light Green | black, 9.1 to 1 |
| 21 | `#82b1ab` | `oklch(72.39% 0.0506 187.79)` | Silicate Green | black, 8.7 to 1 |
| 22 | `#78adb1` | `oklch(71.26% 0.0557 201.22)` | Venice Escape | black, 8.4 to 1 |
| 23 | `#6daab4` | `oklch(69.98% 0.0643 209.34)` | Summer Sea | black, 8 to 1 |
| 24 | `#5fa6b7` | `oklch(68.54% 0.0756 214.02)` | Blue Calypso | black, 7.6 to 1 |
| 25 | `#4ea2b8` | `oklch(66.97% 0.0874 216.66)` | Maui Blue | black, 7.2 to 1 |
| 26 | `#3b9eb8` | `oklch(65.27% 0.0976 218.64)` | Sports Blue | black, 6.7 to 1 |
| 27 | `#2c98b7` | `oklch(63.47% 0.1041 221.29)` | Butterfly Blue | black, 6.3 to 1 |
| 28 | `#2191b3` | `oklch(61.29% 0.1067 224.03)` | Cool Tide | black, 5.7 to 1 |
| 29 | `#1989ad` | `oklch(58.82% 0.1069 226.21)` | Corfu Waters | black, 5.2 to 1 |
| 30 | `#1281a6` | `oklch(56.37% 0.1056 227.92)` | Advertising Blue | black, 4.7 to 1 |
| 31 | `#0d7aa0` | `oklch(54.24% 0.1041 229.24)` | Bleu Ciel | white, 4.8 to 1 |
| 32 | `#09759b` | `oklch(52.76% 0.1033 230.28)` | Bateau | white, 5.2 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #ab4d04 0.0%, #b15202 3.2%, #ba5b00 6.5%, #c46500 9.7%, #cd6f00 12.9%, #d57800 16.1%, #d9800b 19.4%, #dd8718 22.6%, #df8e24 25.8%, #df9430 29.0%, #de9a3c 32.3%, #daa04a 35.5%, #d4a55c 38.7%, #ceaa6d 41.9%, #c6ad7c 45.2%, #bdaf87 48.4%, #b4b18e 51.6%, #a8b394 54.8%, #9ab49b 58.1%, #8db3a3 61.3%, #82b1ab 64.5%, #78adb1 67.7%, #6daab4 71.0%, #5fa6b7 74.2%, #4ea2b8 77.4%, #3b9eb8 80.6%, #2c98b7 83.9%, #2191b3 87.1%, #1989ad 90.3%, #1281a6 93.5%, #0d7aa0 96.8%, #09759b 100.0%);
background: conic-gradient(from 90deg in oklch, oklch(53.15% 0.1419 48.52) 0.0%, oklch(54.99% 0.1441 50.19) 3.2%, oklch(57.63% 0.1472 52.52) 6.5%, oklch(60.66% 0.1497 55.28) 9.7%, oklch(63.65% 0.1521 58.13) 12.9%, oklch(66.19% 0.1541 60.78) 16.1%, oklch(68.14% 0.1532 62.99) 19.4%, oklch(69.87% 0.1509 64.88) 22.6%, oklch(71.37% 0.1472 66.77) 25.8%, oklch(72.65% 0.1418 68.95) 29.0%, oklch(73.71% 0.1340 71.72) 32.3%, oklch(74.55% 0.1229 74.78) 35.5%, oklch(75.16% 0.1068 77.04) 38.7%, oklch(75.54% 0.0885 79.70) 41.9%, oklch(75.71% 0.0710 84.13) 45.2%, oklch(75.68% 0.0570 91.72) 48.4%, oklch(75.44% 0.0491 104.16) 51.6%, oklch(74.97% 0.0455 123.02) 54.8%, oklch(74.28% 0.0450 145.46) 58.1%, oklch(73.41% 0.0469 168.16) 61.3%, oklch(72.39% 0.0506 187.79) 64.5%, oklch(71.26% 0.0557 201.22) 67.7%, oklch(69.98% 0.0643 209.34) 71.0%, oklch(68.54% 0.0756 214.02) 74.2%, oklch(66.97% 0.0874 216.66) 77.4%, oklch(65.27% 0.0976 218.64) 80.6%, oklch(63.47% 0.1041 221.29) 83.9%, oklch(61.29% 0.1067 224.03) 87.1%, oklch(58.82% 0.1069 226.21) 90.3%, oklch(56.37% 0.1056 227.92) 93.5%, oklch(54.24% 0.1041 229.24) 96.8%, oklch(52.76% 0.1033 230.28) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.531 | 0.142 | 48.5 |
| 2 | 0.665 | 0.154 | 61.2 |
| 3 | 0.74 | 0.131 | 72.8 |
| 4 | 0.756 | 0.052 | 97.1 |
| 5 | 0.717 | 0.054 | 197.5 |
| 6 | 0.638 | 0.103 | 220.8 |
| 7 | 0.528 | 0.103 | 230.3 |

## In these collections

- [Orange and blue gradients](https://grabient.com/orange-and-blue-gradients)
- [WGSN 2027 swatches](https://grabient.com/wgsn-2027-swatches)

## Other forms

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