# Citrus Berry Color Wheel

Rainbow from yellow to light green angular swatches with 34 colors: #f5f682, #f9ea78, #fbdb70, #fbc869, #f7b565, #f2a062, #e98861, #dc6f64, #cb576b, #b54272, #9c3277, #812378, #671575, #4f0771, #3c006d, #2e0069, #250364, #1d0b60, #161660, #052464, #00395f, #004e66, #006670, #067e77, #2a927a, #38a97b, #47bf76, #5ed46a, #7ce45c, #9bee55, #b4f55e, #c6fb6f, #d3ff7f, #e0ffa1. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Rainbow from yellow to light green angular swatches
- Seed: `kc8WVN5C06MM5N8lOTmpCu70iitfqyTr-bc-Q`
- Page: https://grabient.com/kc8WVN5C06MM5N8lOTmpCu70iitfqyTr-bc-Q?style=angularSwatches&steps=34&angle=0
- Drawn as: angular swatches, 34 steps, 0 degrees
- Kinds: dark center, vivid, rainbow
- Hues: complementary
- Contrast of its darkest and lightest colors: 14.9 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 | `#f5f682` | `oklch(94.88% 0.1392 108.98)` | Hyper Beam | black, 18.3 to 1 |
| 2 | `#f9ea78` | `oklch(92.70% 0.1361 102.23)` | Canola Oil | black, 17.1 to 1 |
| 3 | `#fbdb70` | `oklch(89.68% 0.1313 92.82)` | Hawkbit | black, 15.4 to 1 |
| 4 | `#fbc869` | `oklch(86.01% 0.1266 81.57)` | Sunspark | black, 13.6 to 1 |
| 5 | `#f7b565` | `oklch(81.88% 0.1238 69.31)` | Peanut Butter Biscuit | black, 11.7 to 1 |
| 6 | `#f2a062` | `oklch(77.42% 0.1248 56.72)` | Bergamot Orange | black, 9.9 to 1 |
| 7 | `#e98861` | `oklch(72.30% 0.1305 42.66)` | Indiana Clay | black, 8.1 to 1 |
| 8 | `#dc6f64` | `oklch(66.63% 0.1389 27.40)` | Mettwurst | black, 6.5 to 1 |
| 9 | `#cb576b` | `oklch(60.77% 0.1480 11.98)` | Imayou Pink | black, 5 to 1 |
| 10 | `#b54272` | `oklch(55.07% 0.1551 357.41)` | Valentino | white, 5.2 to 1 |
| 11 | `#9c3277` | `oklch(49.63% 0.1589 344.42)` | Purple Wine | white, 6.6 to 1 |
| 12 | `#812378` | `oklch(43.86% 0.1609 332.23)` | Noble Plum | white, 8.5 to 1 |
| 13 | `#671575` | `oklch(38.19% 0.1615 320.76)` | Deep Daitoku Purple | white, 10.8 to 1 |
| 14 | `#4f0771` | `oklch(33.22% 0.1604 310.05)` | Royal Purple | white, 13.1 to 1 |
| 15 | `#3c006d` | `oklch(29.54% 0.1575 300.17)` | Deep Violet | white, 14.8 to 1 |
| 16 | `#2e0069` | `oklch(27.23% 0.1522 292.05)` | Deep Violet | white, 15.9 to 1 |
| 17 | `#250364` | `oklch(25.78% 0.1445 286.15)` | Blackmail | white, 16.4 to 1 |
| 18 | `#1d0b60` | `oklch(25.45% 0.1354 280.46)` | Darth Torus | white, 16.5 to 1 |
| 19 | `#161660` | `oklch(26.38% 0.1264 273.09)` | Dying Storm Blue | white, 15.8 to 1 |
| 20 | `#052464` | `oklch(28.80% 0.1189 262.10)` | Black Sea Night | white, 14.5 to 1 |
| 21 | `#00395f` | `oklch(33.31% 0.0858 246.08)` | Poseidon | white, 12 to 1 |
| 22 | `#004e66` | `oklch(39.53% 0.0760 226.57)` | Hanada Blue | white, 9.2 to 1 |
| 23 | `#006670` | `oklch(46.56% 0.0797 206.34)` | Wakame Green | white, 6.7 to 1 |
| 24 | `#067e77` | `oklch(53.50% 0.0919 188.02)` | Coelia Greenshade | white, 4.9 to 1 |
| 25 | `#2a927a` | `oklch(59.65% 0.1004 173.90)` | Illuminating Emerald | black, 5.5 to 1 |
| 26 | `#38a97b` | `oklch(65.82% 0.1226 162.60)` | Cosmic Green | black, 7.1 to 1 |
| 27 | `#47bf76` | `oklch(71.96% 0.1518 153.26)` | Esmeralda | black, 9 to 1 |
| 28 | `#5ed46a` | `oklch(77.69% 0.1799 145.49)` | UFO Green | black, 11 to 1 |
| 29 | `#7ce45c` | `oklch(82.64% 0.1987 138.89)` | Amazon Parrot | black, 13 to 1 |
| 30 | `#9bee55` | `oklch(86.58% 0.2017 133.39)` | Kiwi Pulp | black, 14.7 to 1 |
| 31 | `#b4f55e` | `oklch(89.75% 0.1925 129.49)` | Lima | black, 16.1 to 1 |
| 32 | `#c6fb6f` | `oklch(92.26% 0.1772 126.81)` | Lime Lightning | black, 17.3 to 1 |
| 33 | `#d3ff7f` | `oklch(94.21% 0.1616 124.93)` | Honeydew Peel | black, 18.3 to 1 |
| 34 | `#e0ffa1` | `oklch(95.67% 0.1233 123.42)` | Lime Mist | black, 18.9 to 1 |

## CSS

```css
background: conic-gradient(from 0deg, #f5f682 0.000% 2.941%, #f9ea78 2.941% 5.882%, #fbdb70 5.882% 8.824%, #fbc869 8.824% 11.765%, #f7b565 11.765% 14.706%, #f2a062 14.706% 17.647%, #e98861 17.647% 20.588%, #dc6f64 20.588% 23.529%, #cb576b 23.529% 26.471%, #b54272 26.471% 29.412%, #9c3277 29.412% 32.353%, #812378 32.353% 35.294%, #671575 35.294% 38.235%, #4f0771 38.235% 41.176%, #3c006d 41.176% 44.118%, #2e0069 44.118% 47.059%, #250364 47.059% 50.000%, #1d0b60 50.000% 52.941%, #161660 52.941% 55.882%, #052464 55.882% 58.824%, #00395f 58.824% 61.765%, #004e66 61.765% 64.706%, #006670 64.706% 67.647%, #067e77 67.647% 70.588%, #2a927a 70.588% 73.529%, #38a97b 73.529% 76.471%, #47bf76 76.471% 79.412%, #5ed46a 79.412% 82.353%, #7ce45c 82.353% 85.294%, #9bee55 85.294% 88.235%, #b4f55e 88.235% 91.176%, #c6fb6f 91.176% 94.118%, #d3ff7f 94.118% 97.059%, #e0ffa1 97.059% 100.000%);
background: conic-gradient(from 0deg, oklch(94.88% 0.1392 108.98) 0.000% 2.941%, oklch(92.70% 0.1361 102.23) 2.941% 5.882%, oklch(89.68% 0.1313 92.82) 5.882% 8.824%, oklch(86.01% 0.1266 81.57) 8.824% 11.765%, oklch(81.88% 0.1238 69.31) 11.765% 14.706%, oklch(77.42% 0.1248 56.72) 14.706% 17.647%, oklch(72.30% 0.1305 42.66) 17.647% 20.588%, oklch(66.63% 0.1389 27.40) 20.588% 23.529%, oklch(60.77% 0.1480 11.98) 23.529% 26.471%, oklch(55.07% 0.1551 357.41) 26.471% 29.412%, oklch(49.63% 0.1589 344.42) 29.412% 32.353%, oklch(43.86% 0.1609 332.23) 32.353% 35.294%, oklch(38.19% 0.1615 320.76) 35.294% 38.235%, oklch(33.22% 0.1604 310.05) 38.235% 41.176%, oklch(29.54% 0.1575 300.17) 41.176% 44.118%, oklch(27.23% 0.1522 292.05) 44.118% 47.059%, oklch(25.78% 0.1445 286.15) 47.059% 50.000%, oklch(25.45% 0.1354 280.46) 50.000% 52.941%, oklch(26.38% 0.1264 273.09) 52.941% 55.882%, oklch(28.80% 0.1189 262.10) 55.882% 58.824%, oklch(33.31% 0.0858 246.08) 58.824% 61.765%, oklch(39.53% 0.0760 226.57) 61.765% 64.706%, oklch(46.56% 0.0797 206.34) 64.706% 67.647%, oklch(53.50% 0.0919 188.02) 67.647% 70.588%, oklch(59.65% 0.1004 173.90) 70.588% 73.529%, oklch(65.82% 0.1226 162.60) 73.529% 76.471%, oklch(71.96% 0.1518 153.26) 76.471% 79.412%, oklch(77.69% 0.1799 145.49) 79.412% 82.353%, oklch(82.64% 0.1987 138.89) 82.353% 85.294%, oklch(86.58% 0.2017 133.39) 85.294% 88.235%, oklch(89.75% 0.1925 129.49) 88.235% 91.176%, oklch(92.26% 0.1772 126.81) 91.176% 94.118%, oklch(94.21% 0.1616 124.93) 94.118% 97.059%, oklch(95.67% 0.1233 123.42) 97.059% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.949 | 0.139 | 109 |
| 2 | 0.787 | 0.124 | 60.4 |
| 3 | 0.528 | 0.157 | -8.3 |
| 4 | 0.291 | 0.157 | -61.2 |
| 5 | 0.283 | 0.12 | -96 |
| 6 | 0.571 | 0.095 | -180.6 |
| 7 | 0.839 | 0.201 | -222.8 |
| 8 | 0.957 | 0.152 | -236.6 |

## In these collections

- [Color wheel swatches](https://grabient.com/color-wheel-swatches)

## Other forms

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