# Prismatic spectrum conic gradient

Rainbow from orange to purple angular gradient with 32 colors: #fd3858, #ff4b4d, #ff6242, #ff7837, #ff8c2d, #fe9e2a, #fead2a, #ffbd29, #ffcd28, #fbdb2b, #efe636, #dceb46, #c2e951, #a4e35b, #82dc67, #5cd677, #27d48d, #00d2aa, #00d0c3, #00cfd8, #1dc9e8, #2bbfef, #21aef0, #0f99ee, #1582eb, #2b6be8, #425ae7, #594ee8, #7047e9, #8543e9, #9740e8, #a33ee6. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Rainbow from orange to purple angular gradient
- Seed: `kapqYNY7tFnNBxRivkU4LBIETNRXKV8SA`
- Page: https://grabient.com/kapqYNY7tFnNBxRivkU4LBIETNRXKV8SA?style=angularGradient&steps=32
- Drawn as: angular gradient, 32 steps, 90 degrees
- Kinds: light center, vivid, rainbow
- Hues: two-hue
- Contrast of its darkest and lightest colors: 4.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 | `#fd3858` | `oklch(65.35% 0.2287 18.28)` | Sizzling Red | black, 5.8 to 1 |
| 2 | `#ff4b4d` | `oklch(67.06% 0.2167 24.56)` | Blood Burst | black, 6.3 to 1 |
| 3 | `#ff6242` | `oklch(69.47% 0.1973 33.43)` | Sweet Pimento | black, 7 to 1 |
| 4 | `#ff7837` | `oklch(72.29% 0.1812 43.77)` | Temptatious Tangerine | black, 8 to 1 |
| 5 | `#ff8c2d` | `oklch(75.21% 0.1709 54.45)` | Instant Orange | black, 9 to 1 |
| 6 | `#fe9e2a` | `oklch(77.93% 0.1635 64.34)` | Radiant Yellow | black, 10 to 1 |
| 7 | `#fead2a` | `oklch(80.63% 0.1610 73.05)` | Honey Wax | black, 11.2 to 1 |
| 8 | `#ffbd29` | `oklch(83.76% 0.1637 81.48)` | Brimstone | black, 12.5 to 1 |
| 9 | `#ffcd28` | `oklch(86.79% 0.1693 89.76)` | Golden Buddha Belly | black, 14 to 1 |
| 10 | `#fbdb2b` | `oklch(89.21% 0.1758 98.01)` | Golden Period | black, 15.2 to 1 |
| 11 | `#efe636` | `oklch(90.48% 0.1800 106.34)` | Lime Time | black, 16 to 1 |
| 12 | `#dceb46` | `oklch(90.03% 0.1808 114.66)` | Yellow Duranta | black, 16 to 1 |
| 13 | `#c2e951` | `oklch(87.82% 0.1805 122.54)` | Energos | black, 15 to 1 |
| 14 | `#a4e35b` | `oklch(84.63% 0.1791 130.44)` | Dynamic Green | black, 13.7 to 1 |
| 15 | `#82dc67` | `oklch(81.25% 0.1766 138.85)` | Pastel Green | black, 12.3 to 1 |
| 16 | `#5cd677` | `oklch(78.47% 0.1731 148.29)` | Drunken Dragonfly | black, 11.3 to 1 |
| 17 | `#27d48d` | `oklch(77.04% 0.1678 159.33)` | Envy’s Love | black, 10.8 to 1 |
| 18 | `#00d2aa` | `oklch(76.88% 0.1485 172.37)` | Wild Caribbean Green | black, 10.7 to 1 |
| 19 | `#00d0c3` | `oklch(77.30% 0.1352 186.56)` | Exquisite Turquoise | black, 10.8 to 1 |
| 20 | `#00cfd8` | `oklch(77.61% 0.1320 200.86)` | Jade Glass | black, 10.8 to 1 |
| 21 | `#1dc9e8` | `oklch(77.11% 0.1317 214.28)` | Picnic Day Sky | black, 10.5 to 1 |
| 22 | `#2bbfef` | `oklch(75.09% 0.1342 225.87)` | Blue Raspberry | black, 9.7 to 1 |
| 23 | `#21aef0` | `oklch(71.10% 0.1458 235.99)` | Democrat | black, 8.3 to 1 |
| 24 | `#0f99ee` | `oklch(65.94% 0.1632 245.15)` | Out of the Blue | black, 6.7 to 1 |
| 25 | `#1582eb` | `oklch(60.64% 0.1828 253.68)` | Bubble Bobble P2 | black, 5.4 to 1 |
| 26 | `#2b6be8` | `oklch(56.22% 0.2009 261.89)` | Bluetiful | white, 4.7 to 1 |
| 27 | `#425ae7` | `oklch(53.68% 0.2139 270.12)` | Qing Dynasty Dragon | white, 5.4 to 1 |
| 28 | `#594ee8` | `oklch(53.22% 0.2228 278.83)` | Majorelle Blue | white, 5.7 to 1 |
| 29 | `#7047e9` | `oklch(54.11% 0.2294 287.65)` | Bluish Purple | white, 5.5 to 1 |
| 30 | `#8543e9` | `oklch(55.69% 0.2344 295.88)` | Thick Purple | white, 5.2 to 1 |
| 31 | `#9740e8` | `oklch(57.30% 0.2381 302.84)` | Chaste Blossoms | white, 4.9 to 1 |
| 32 | `#a33ee6` | `oklch(58.27% 0.2411 307.83)` | Sweet Desire | white, 4.8 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #fd3858 0.0%, #ff4b4d 3.2%, #ff6242 6.5%, #ff7837 9.7%, #ff8c2d 12.9%, #fe9e2a 16.1%, #fead2a 19.4%, #ffbd29 22.6%, #ffcd28 25.8%, #fbdb2b 29.0%, #efe636 32.3%, #dceb46 35.5%, #c2e951 38.7%, #a4e35b 41.9%, #82dc67 45.2%, #5cd677 48.4%, #27d48d 51.6%, #00d2aa 54.8%, #00d0c3 58.1%, #00cfd8 61.3%, #1dc9e8 64.5%, #2bbfef 67.7%, #21aef0 71.0%, #0f99ee 74.2%, #1582eb 77.4%, #2b6be8 80.6%, #425ae7 83.9%, #594ee8 87.1%, #7047e9 90.3%, #8543e9 93.5%, #9740e8 96.8%, #a33ee6 100.0%);
background: conic-gradient(from 90deg in oklch, oklch(65.35% 0.2287 18.28) 0.0%, oklch(67.06% 0.2167 24.56) 3.2%, oklch(69.47% 0.1973 33.43) 6.5%, oklch(72.29% 0.1812 43.77) 9.7%, oklch(75.21% 0.1709 54.45) 12.9%, oklch(77.93% 0.1635 64.34) 16.1%, oklch(80.63% 0.1610 73.05) 19.4%, oklch(83.76% 0.1637 81.48) 22.6%, oklch(86.79% 0.1693 89.76) 25.8%, oklch(89.21% 0.1758 98.01) 29.0%, oklch(90.48% 0.1800 106.34) 32.3%, oklch(90.03% 0.1808 114.66) 35.5%, oklch(87.82% 0.1805 122.54) 38.7%, oklch(84.63% 0.1791 130.44) 41.9%, oklch(81.25% 0.1766 138.85) 45.2%, oklch(78.47% 0.1731 148.29) 48.4%, oklch(77.04% 0.1678 159.33) 51.6%, oklch(76.88% 0.1485 172.37) 54.8%, oklch(77.30% 0.1352 186.56) 58.1%, oklch(77.61% 0.1320 200.86) 61.3%, oklch(77.11% 0.1317 214.28) 64.5%, oklch(75.09% 0.1342 225.87) 67.7%, oklch(71.10% 0.1458 235.99) 71.0%, oklch(65.94% 0.1632 245.15) 74.2%, oklch(60.64% 0.1828 253.68) 77.4%, oklch(56.22% 0.2009 261.89) 80.6%, oklch(53.68% 0.2139 270.12) 83.9%, oklch(53.22% 0.2228 278.83) 87.1%, oklch(54.11% 0.2294 287.65) 90.3%, oklch(55.69% 0.2344 295.88) 93.5%, oklch(57.30% 0.2381 302.84) 96.8%, oklch(58.27% 0.2411 307.83) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.654 | 0.229 | 18.3 |
| 2 | 0.783 | 0.163 | 65.8 |
| 3 | 0.906 | 0.181 | 109.2 |
| 4 | 0.776 | 0.171 | 153.5 |
| 5 | 0.76 | 0.132 | 222.2 |
| 6 | 0.539 | 0.212 | 268.7 |
| 7 | 0.583 | 0.241 | 307.8 |

## In these collections

- [Conic gradients](https://grabient.com/conic-gradients)

## Other forms

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