# Bright lemon navy canopy

Beige, yellow, teal and light blue linear gradient with 24 colors: #fff3a6, #fff19d, #ffee98, #ffea8e, #ffe575, #fddd42, #eed32c, #d7c51f, #bbb31d, #9da122, #7e9029, #5f8231, #3d793c, #006e4e, #00605c, #005564, #004e72, #0c4c89, #2f5893, #4a72a4, #6b94b9, #94b8ce, #bbd6e2, #d8eaf0. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Beige, yellow, teal and light blue linear gradient
- Seed: `kW80dH7z2_sSpRE1qk4dYe7w`
- Page: https://grabient.com/kW80dH7z2_sSpRE1qk4dYe7w?steps=24&angle=45
- Drawn as: linear gradient, 24 steps, 45 degrees
- Kinds: dark center, vivid, multicolor
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 8 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 | `#fff3a6` | `oklch(95.67% 0.0972 100.55)` | Firefly Glow | black, 18.6 to 1 |
| 2 | `#fff19d` | `oklch(95.04% 0.1052 99.82)` | Yellow Tail | black, 18.2 to 1 |
| 3 | `#ffee98` | `oklch(94.40% 0.1081 98.43)` | Sparkler | black, 17.9 to 1 |
| 4 | `#ffea8e` | `oklch(93.49% 0.1153 97.03)` | Quack Quack | black, 17.4 to 1 |
| 5 | `#ffe575` | `oklch(92.04% 0.1347 96.27)` | Banana Peel | black, 16.6 to 1 |
| 6 | `#fddd42` | `oklch(89.78% 0.1659 96.80)` | Cheese It Up | black, 15.5 to 1 |
| 7 | `#eed32c` | `oklch(86.43% 0.1695 99.19)` | Yellow Mellow | black, 14 to 1 |
| 8 | `#d7c51f` | `oklch(81.40% 0.1646 102.35)` | Barberry Bush | black, 11.9 to 1 |
| 9 | `#bbb31d` | `oklch(75.12% 0.1539 106.23)` | Citronelle | black, 9.6 to 1 |
| 10 | `#9da122` | `oklch(68.33% 0.1403 111.53)` | Forest Lichen | black, 7.5 to 1 |
| 11 | `#7e9029` | `oklch(61.76% 0.1267 118.91)` | Foggy Bog | black, 5.8 to 1 |
| 12 | `#5f8231` | `oklch(56.15% 0.1162 129.08)` | Straken Green | black, 4.7 to 1 |
| 13 | `#3d793c` | `oklch(51.91% 0.1114 143.35)` | Cucumber Queen | white, 5.2 to 1 |
| 14 | `#006e4e` | `oklch(47.75% 0.1010 164.56)` | Natural Watercourse | white, 6.2 to 1 |
| 15 | `#00605c` | `oklch(43.98% 0.0760 189.85)` | Mosque | white, 7.4 to 1 |
| 16 | `#005564` | `oklch(41.23% 0.0730 215.48)` | Rainy Morning | white, 8.5 to 1 |
| 17 | `#004e72` | `oklch(40.16% 0.0886 237.67)` | Sail Maker | white, 9 to 1 |
| 18 | `#0c4c89` | `oklch(41.38% 0.1175 252.63)` | Magnetic Blue | white, 8.7 to 1 |
| 19 | `#2f5893` | `oklch(46.00% 0.1075 257.63)` | B’dazzled Blue | white, 7.1 to 1 |
| 20 | `#4a72a4` | `oklch(54.51% 0.0910 254.46)` | Great Serpent | white, 4.9 to 1 |
| 21 | `#6b94b9` | `oklch(65.19% 0.0710 246.12)` | Lupine Blue | black, 6.5 to 1 |
| 22 | `#94b8ce` | `oklch(76.27% 0.0506 235.60)` | Sea Mark | black, 9.9 to 1 |
| 23 | `#bbd6e2` | `oklch(85.97% 0.0328 225.88)` | Bridgewater Bay | black, 13.8 to 1 |
| 24 | `#d8eaf0` | `oklch(92.52% 0.0207 219.96)` | Frost Wind | black, 16.9 to 1 |

## CSS

```css
background: linear-gradient(45deg, #fff3a6 0.0%, #fff19d 4.3%, #ffee98 8.7%, #ffea8e 13.0%, #ffe575 17.4%, #fddd42 21.7%, #eed32c 26.1%, #d7c51f 30.4%, #bbb31d 34.8%, #9da122 39.1%, #7e9029 43.5%, #5f8231 47.8%, #3d793c 52.2%, #006e4e 56.5%, #00605c 60.9%, #005564 65.2%, #004e72 69.6%, #0c4c89 73.9%, #2f5893 78.3%, #4a72a4 82.6%, #6b94b9 87.0%, #94b8ce 91.3%, #bbd6e2 95.7%, #d8eaf0 100.0%);
background: linear-gradient(45deg in oklch, oklch(95.67% 0.0972 100.55) 0.0%, oklch(95.04% 0.1052 99.82) 4.3%, oklch(94.40% 0.1081 98.43) 8.7%, oklch(93.49% 0.1153 97.03) 13.0%, oklch(92.04% 0.1347 96.27) 17.4%, oklch(89.78% 0.1659 96.80) 21.7%, oklch(86.43% 0.1695 99.19) 26.1%, oklch(81.40% 0.1646 102.35) 30.4%, oklch(75.12% 0.1539 106.23) 34.8%, oklch(68.33% 0.1403 111.53) 39.1%, oklch(61.76% 0.1267 118.91) 43.5%, oklch(56.15% 0.1162 129.08) 47.8%, oklch(51.91% 0.1114 143.35) 52.2%, oklch(47.75% 0.1010 164.56) 56.5%, oklch(43.98% 0.0760 189.85) 60.9%, oklch(41.23% 0.0730 215.48) 65.2%, oklch(40.16% 0.0886 237.67) 69.6%, oklch(41.38% 0.1175 252.63) 73.9%, oklch(46.00% 0.1075 257.63) 78.3%, oklch(54.51% 0.0910 254.46) 82.6%, oklch(65.19% 0.0710 246.12) 87.0%, oklch(76.27% 0.0506 235.60) 91.3%, oklch(85.97% 0.0328 225.88) 95.7%, oklch(92.52% 0.0207 219.96) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.957 | 0.098 | 100.5 |
| 2 | 0.874 | 0.169 | 98.4 |
| 3 | 0.539 | 0.113 | 135.4 |
| 4 | 0.421 | 0.116 | 254.8 |
| 5 | 0.925 | 0.021 | 220 |

## In these collections

- [Lemon blossom veranda](https://grabient.com/lemon-blossom-veranda)

## Other forms

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