# Blue, tan and orange angular gradient

Blue, tan and orange angular gradient with 32 colors: #5f86c4, #6988c7, #778bc9, #858fcb, #9494cc, #a299cd, #ae9dcd, #b9a2cd, #c2a4cc, #caa6ca, #d2a6c7, #d9a6c2, #dfa6bb, #e5a5b4, #eba6ac, #efa7a4, #f3a99c, #f7ad94, #fab18c, #fcb785, #fcbc7e, #fcc178, #fac472, #f7c66c, #f5c465, #f3be5d, #f1b654, #f0ad4b, #eea344, #ed993f, #eb913c, #e98c3a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWnUy44BfGmWgSFsLMZ3DW9I`
- Page: https://grabient.com/kWnUy44BfGmWgSFsLMZ3DW9I?style=angularGradient&steps=32&angle=225
- Drawn as: angular gradient, 32 steps, 225 degrees
- Kinds: pastel, multicolor
- Hues: multi-hue
- Contrast of its darkest and lightest colors: 2.3 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 | `#5f86c4` | `oklch(61.81% 0.1047 259.45)` | Marina | black, 5.6 to 1 |
| 2 | `#6988c7` | `oklch(62.98% 0.1011 263.83)` | Royal Regatta | black, 5.9 to 1 |
| 3 | `#778bc9` | `oklch(64.62% 0.0957 269.56)` | Hydrangea | black, 6.3 to 1 |
| 4 | `#858fcb` | `oklch(66.58% 0.0893 276.38)` | Bailey Bells | black, 6.7 to 1 |
| 5 | `#9494cc` | `oklch(68.70% 0.0824 284.02)` | Litmus | black, 7.3 to 1 |
| 6 | `#a299cd` | `oklch(70.84% 0.0759 292.22)` | Grape Arbour | black, 7.9 to 1 |
| 7 | `#ae9dcd` | `oklch(72.85% 0.0703 300.71)` | Purple Rose | black, 8.5 to 1 |
| 8 | `#b9a2cd` | `oklch(74.57% 0.0663 309.22)` | Lucius Lilac | black, 9 to 1 |
| 9 | `#c2a4cc` | `oklch(75.87% 0.0646 317.53)` | Pale Grape | black, 9.4 to 1 |
| 10 | `#caa6ca` | `oklch(76.82% 0.0648 326.21)` | Catmint | black, 9.8 to 1 |
| 11 | `#d2a6c7` | `oklch(77.52% 0.0666 335.41)` | Heart to Heart | black, 10 to 1 |
| 12 | `#d9a6c2` | `oklch(78.03% 0.0695 344.92)` | Rhubarb Gin | black, 10.1 to 1 |
| 13 | `#dfa6bb` | `oklch(78.44% 0.0733 354.54)` | Pink Gin | black, 10.3 to 1 |
| 14 | `#e5a5b4` | `oklch(78.80% 0.0776 4.08)` | Love at First Sight | black, 10.4 to 1 |
| 15 | `#eba6ac` | `oklch(79.18% 0.0820 13.33)` | Perennial Phlox | black, 10.5 to 1 |
| 16 | `#efa7a4` | `oklch(79.64% 0.0862 22.11)` | Calabrese | black, 10.7 to 1 |
| 17 | `#f3a99c` | `oklch(80.26% 0.0901 30.41)` | Rosy Outlook | black, 10.9 to 1 |
| 18 | `#f7ad94` | `oklch(81.13% 0.0943 39.08)` | Simply Coral | black, 11.3 to 1 |
| 19 | `#fab18c` | `oklch(82.14% 0.0988 47.92)` | Peach Velour | black, 11.7 to 1 |
| 20 | `#fcb785` | `oklch(83.17% 0.1035 56.53)` | Baltic Amber | black, 12.2 to 1 |
| 21 | `#fcbc7e` | `oklch(84.11% 0.1083 64.51)` | Buff Orange | black, 12.6 to 1 |
| 22 | `#fcc178` | `oklch(84.83% 0.1130 71.45)` | Zing | black, 13 to 1 |
| 23 | `#fac472` | `oklch(85.21% 0.1175 76.96)` | Liquid Gold | black, 13.2 to 1 |
| 24 | `#f7c66c` | `oklch(85.14% 0.1217 80.63)` | Yellow Currant | black, 13.2 to 1 |
| 25 | `#f5c465` | `oklch(84.47% 0.1255 81.95)` | Sunset Gold | black, 12.9 to 1 |
| 26 | `#f3be5d` | `oklch(83.14% 0.1294 80.80)` | Butterfield | black, 12.3 to 1 |
| 27 | `#f1b654` | `oklch(81.37% 0.1332 77.80)` | Golden Hour | black, 11.6 to 1 |
| 28 | `#f0ad4b` | `oklch(79.32% 0.1368 73.60)` | Artisans Gold | black, 10.7 to 1 |
| 29 | `#eea344` | `oklch(77.22% 0.1401 68.87)` | Yáng Chéng Orange | black, 9.9 to 1 |
| 30 | `#ed993f` | `oklch(75.24% 0.1430 64.25)` | Sacral Chakra | black, 9.2 to 1 |
| 31 | `#eb913c` | `oklch(73.58% 0.1455 60.39)` | Sun | black, 8.6 to 1 |
| 32 | `#e98c3a` | `oklch(72.44% 0.1474 57.97)` | California | black, 8.2 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #5f86c4 0.0%, #6988c7 3.2%, #778bc9 6.5%, #858fcb 9.7%, #9494cc 12.9%, #a299cd 16.1%, #ae9dcd 19.4%, #b9a2cd 22.6%, #c2a4cc 25.8%, #caa6ca 29.0%, #d2a6c7 32.3%, #d9a6c2 35.5%, #dfa6bb 38.7%, #e5a5b4 41.9%, #eba6ac 45.2%, #efa7a4 48.4%, #f3a99c 51.6%, #f7ad94 54.8%, #fab18c 58.1%, #fcb785 61.3%, #fcbc7e 64.5%, #fcc178 67.7%, #fac472 71.0%, #f7c66c 74.2%, #f5c465 77.4%, #f3be5d 80.6%, #f1b654 83.9%, #f0ad4b 87.1%, #eea344 90.3%, #ed993f 93.5%, #eb913c 96.8%, #e98c3a 100.0%);
background: conic-gradient(from 225deg in oklch, oklch(61.81% 0.1047 259.45) 0.0%, oklch(62.98% 0.1011 263.83) 3.2%, oklch(64.62% 0.0957 269.56) 6.5%, oklch(66.58% 0.0893 276.38) 9.7%, oklch(68.70% 0.0824 284.02) 12.9%, oklch(70.84% 0.0759 292.22) 16.1%, oklch(72.85% 0.0703 300.71) 19.4%, oklch(74.57% 0.0663 309.22) 22.6%, oklch(75.87% 0.0646 317.53) 25.8%, oklch(76.82% 0.0648 326.21) 29.0%, oklch(77.52% 0.0666 335.41) 32.3%, oklch(78.03% 0.0695 344.92) 35.5%, oklch(78.44% 0.0733 354.54) 38.7%, oklch(78.80% 0.0776 4.08) 41.9%, oklch(79.18% 0.0820 13.33) 45.2%, oklch(79.64% 0.0862 22.11) 48.4%, oklch(80.26% 0.0901 30.41) 51.6%, oklch(81.13% 0.0943 39.08) 54.8%, oklch(82.14% 0.0988 47.92) 58.1%, oklch(83.17% 0.1035 56.53) 61.3%, oklch(84.11% 0.1083 64.51) 64.5%, oklch(84.83% 0.1130 71.45) 67.7%, oklch(85.21% 0.1175 76.96) 71.0%, oklch(85.14% 0.1217 80.63) 74.2%, oklch(84.47% 0.1255 81.95) 77.4%, oklch(83.14% 0.1294 80.80) 80.6%, oklch(81.37% 0.1332 77.80) 83.9%, oklch(79.32% 0.1368 73.60) 87.1%, oklch(77.22% 0.1401 68.87) 90.3%, oklch(75.24% 0.1430 64.25) 93.5%, oklch(73.58% 0.1455 60.39) 96.8%, oklch(72.44% 0.1474 57.97) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.618 | 0.105 | 259.5 |
| 2 | 0.756 | 0.065 | 315.5 |
| 3 | 0.799 | 0.088 | 386.3 |
| 4 | 0.85 | 0.123 | 441.2 |
| 5 | 0.724 | 0.147 | 418 |

## Other forms

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