# Cream yellow teal diagonal

Navy, beige and yellow linear gradient with 64 colors: #001354, #001b4f, #00214e, #00274e, #002c50, #003253, #003856, #003f5a, #00465d, #004d62, #005566, #005d6a, #00656e, #006e71, #007774, #008076, #008a77, #009377, #009d74, #0ba76d, #39ae69, #54b564, #6bba5f, #7fc05a, #92c555, #a3c951, #b3cd4d, #c2d14b, #d0d449, #ddd648, #e8d948, #f1db48, #f9dd49, #ffde52, #ffe175, #ffe38a, #ffe599, #ffe7a4, #ffe8ab, #ffe9b1, #ffeab5, #ffebb7, #ffebb8, #ffebb8, #ffebb7, #ffebb4, #ffebb1, #ffebac, #ffeaa6, #ffea9e, #ffe995, #ffe98b, #ffe97d, #ffe86d, #ffe858, #ffe73d, #fce73d, #f9e73c, #f7e73c, #f5e73c, #f3e73b, #f2e83b, #f1e83b, #f0e83b. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Navy, beige and yellow linear gradient
- Seed: `kSO1e7cTqsnPBQM`
- Page: https://grabient.com/kSO1e7cTqsnPBQM?steps=64&angle=225
- Drawn as: linear gradient, 64 steps, 225 degrees
- Kinds: dark to light, vivid, light, multicolor
- Hues: analogous
- Contrast of its darkest and lightest colors: 14.6 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 | `#001354` | `oklch(23.25% 0.1190 263.15)` | Interstellar Blue | white, 17.1 to 1 |
| 2 | `#001b4f` | `oklch(24.38% 0.1011 260.30)` | Subnautical | white, 16.4 to 1 |
| 3 | `#00214e` | `oklch(25.71% 0.0911 256.97)` | Subnautical | white, 15.8 to 1 |
| 4 | `#00274e` | `oklch(27.20% 0.0844 253.20)` | Subnautical | white, 15 to 1 |
| 5 | `#002c50` | `oklch(28.86% 0.0796 249.02)` | Indigo Black | white, 14.1 to 1 |
| 6 | `#003253` | `oklch(30.66% 0.0763 244.47)` | Night Dive | white, 13.2 to 1 |
| 7 | `#003856` | `oklch(32.59% 0.0741 239.57)` | Gibraltar Sea | white, 12.3 to 1 |
| 8 | `#003f5a` | `oklch(34.65% 0.0729 234.37)` | Maniac Mansion | white, 11.3 to 1 |
| 9 | `#00465d` | `oklch(36.82% 0.0725 228.89)` | Loyal Blue | white, 10.3 to 1 |
| 10 | `#004d62` | `oklch(39.09% 0.0729 223.16)` | Raging Thunderstorm | white, 9.3 to 1 |
| 11 | `#005566` | `oklch(41.44% 0.0741 217.23)` | Rainy Morning | white, 8.4 to 1 |
| 12 | `#005d6a` | `oklch(43.86% 0.0762 211.11)` | Hero | white, 7.5 to 1 |
| 13 | `#00656e` | `oklch(46.35% 0.0791 204.85)` | Wakame Green | white, 6.7 to 1 |
| 14 | `#006e71` | `oklch(48.88% 0.0831 198.47)` | Active Turquoise | white, 6 to 1 |
| 15 | `#007774` | `oklch(51.44% 0.0883 192.01)` | Prismarine | white, 5.3 to 1 |
| 16 | `#008076` | `oklch(54.03% 0.0950 185.50)` | Green Garlands | white, 4.8 to 1 |
| 17 | `#008a77` | `oklch(56.63% 0.1035 178.97)` | Emerald Enchantment | black, 4.8 to 1 |
| 18 | `#009377` | `oklch(59.23% 0.1143 172.45)` | Dòu Lǜ Green | black, 5.4 to 1 |
| 19 | `#009d74` | `oklch(61.81% 0.1283 165.98)` | Free Speech Aquamarine | black, 6 to 1 |
| 20 | `#0ba76d` | `oklch(64.37% 0.1445 159.59)` | Banaue Jade | black, 6.7 to 1 |
| 21 | `#39ae69` | `oklch(66.88% 0.1461 153.30)` | Seaweed Green | black, 7.4 to 1 |
| 22 | `#54b564` | `oklch(69.35% 0.1476 147.16)` | Samphire Green | black, 8.1 to 1 |
| 23 | `#6bba5f` | `oklch(71.75% 0.1492 141.18)` | Drop Green | black, 8.8 to 1 |
| 24 | `#7fc05a` | `oklch(74.07% 0.1507 135.41)` | Fierce Mantis | black, 9.5 to 1 |
| 25 | `#92c555` | `oklch(76.31% 0.1521 129.88)` | Cabbage Patch | black, 10.3 to 1 |
| 26 | `#a3c951` | `oklch(78.44% 0.1535 124.61)` | Two Peas in a Pod | black, 11 to 1 |
| 27 | `#b3cd4d` | `oklch(80.46% 0.1549 119.65)` | Young Green Onion | black, 11.7 to 1 |
| 28 | `#c2d14b` | `oklch(82.36% 0.1562 115.02)` | Grunervetliner | black, 12.4 to 1 |
| 29 | `#d0d449` | `oklch(84.11% 0.1574 110.76)` | Southern Platyfish | black, 13.1 to 1 |
| 30 | `#ddd648` | `oklch(85.71% 0.1586 106.89)` | Kowloon | black, 13.8 to 1 |
| 31 | `#e8d948` | `oklch(87.15% 0.1597 103.45)` | Citrus Sugar | black, 14.4 to 1 |
| 32 | `#f1db48` | `oklch(88.41% 0.1607 100.48)` | Gilded | black, 14.9 to 1 |
| 33 | `#f9dd49` | `oklch(89.50% 0.1617 97.97)` | Cheese It Up | black, 15.4 to 1 |
| 34 | `#ffde52` | `oklch(90.45% 0.1577 95.84)` | Royal Star | black, 15.8 to 1 |
| 35 | `#ffe175` | `oklch(91.28% 0.1321 94.03)` | Summer Daffodil | black, 16.2 to 1 |
| 36 | `#ffe38a` | `oklch(92.00% 0.1132 92.53)` | Bicycle Yellow | black, 16.6 to 1 |
| 37 | `#ffe599` | `oklch(92.62% 0.0992 91.32)` | Summer Harvest | black, 16.9 to 1 |
| 38 | `#ffe7a4` | `oklch(93.14% 0.0888 90.38)` | Sun Drenched | black, 17.1 to 1 |
| 39 | `#ffe8ab` | `oklch(93.56% 0.0811 89.71)` | Elote | black, 17.3 to 1 |
| 40 | `#ffe9b1` | `oklch(93.89% 0.0755 89.27)` | Lively Yellow | black, 17.5 to 1 |
| 41 | `#ffeab5` | `oklch(94.15% 0.0718 89.06)` | Lively Yellow | black, 17.6 to 1 |
| 42 | `#ffebb7` | `oklch(94.32% 0.0696 89.06)` | Pale Organza | black, 17.7 to 1 |
| 43 | `#ffebb8` | `oklch(94.43% 0.0687 89.24)` | Pale Organza | black, 17.8 to 1 |
| 44 | `#ffebb8` | `oklch(94.47% 0.0692 89.60)` | Pale Organza | black, 17.8 to 1 |
| 45 | `#ffebb7` | `oklch(94.45% 0.0708 90.11)` | Pale Organza | black, 17.8 to 1 |
| 46 | `#ffebb4` | `oklch(94.39% 0.0736 90.76)` | Dear Melissa | black, 17.8 to 1 |
| 47 | `#ffebb1` | `oklch(94.27% 0.0776 91.53)` | Dear Melissa | black, 17.7 to 1 |
| 48 | `#ffebac` | `oklch(94.11% 0.0828 92.41)` | Yellow Canary | black, 17.7 to 1 |
| 49 | `#ffeaa6` | `oklch(93.92% 0.0893 93.37)` | Rite of Spring | black, 17.6 to 1 |
| 50 | `#ffea9e` | `oklch(93.70% 0.0972 94.40)` | Rise and Shine | black, 17.5 to 1 |
| 51 | `#ffe995` | `oklch(93.46% 0.1066 95.49)` | Pale Daffodil | black, 17.3 to 1 |
| 52 | `#ffe98b` | `oklch(93.20% 0.1175 96.61)` | Quack Quack | black, 17.2 to 1 |
| 53 | `#ffe97d` | `oklch(92.93% 0.1300 97.75)` | Digital Yellow | black, 17.1 to 1 |
| 54 | `#ffe86d` | `oklch(92.66% 0.1443 98.89)` | Fuzzy Duckling | black, 17 to 1 |
| 55 | `#ffe858` | `oklch(92.38% 0.1604 100.01)` | Maizena | black, 16.9 to 1 |
| 56 | `#ffe73d` | `oklch(92.12% 0.1764 101.09)` | Pac-Man | black, 16.7 to 1 |
| 57 | `#fce73d` | `oklch(91.86% 0.1768 102.14)` | Zard Yellow | black, 16.6 to 1 |
| 58 | `#f9e73c` | `oklch(91.63% 0.1772 103.11)` | Zard Yellow | black, 16.5 to 1 |
| 59 | `#f7e73c` | `oklch(91.42% 0.1775 104.00)` | Banana Bombshell | black, 16.4 to 1 |
| 60 | `#f5e73c` | `oklch(91.24% 0.1779 104.78)` | Highlighter Yellow | black, 16.4 to 1 |
| 61 | `#f3e73b` | `oklch(91.10% 0.1782 105.45)` | Highlighter Yellow | black, 16.3 to 1 |
| 62 | `#f2e83b` | `oklch(91.00% 0.1785 105.98)` | Highlighter Yellow | black, 16.3 to 1 |
| 63 | `#f1e83b` | `oklch(90.94% 0.1788 106.36)` | Highlighter Yellow | black, 16.3 to 1 |
| 64 | `#f0e83b` | `oklch(90.94% 0.1791 106.57)` | Highlighter Yellow | black, 16.3 to 1 |

## CSS

```css
background: linear-gradient(225deg, #001354 0.0%, #001b4f 1.6%, #00214e 3.2%, #00274e 4.8%, #002c50 6.3%, #003253 7.9%, #003856 9.5%, #003f5a 11.1%, #00465d 12.7%, #004d62 14.3%, #005566 15.9%, #005d6a 17.5%, #00656e 19.0%, #006e71 20.6%, #007774 22.2%, #008076 23.8%, #008a77 25.4%, #009377 27.0%, #009d74 28.6%, #0ba76d 30.2%, #39ae69 31.7%, #54b564 33.3%, #6bba5f 34.9%, #7fc05a 36.5%, #92c555 38.1%, #a3c951 39.7%, #b3cd4d 41.3%, #c2d14b 42.9%, #d0d449 44.4%, #ddd648 46.0%, #e8d948 47.6%, #f1db48 49.2%, #f9dd49 50.8%, #ffde52 52.4%, #ffe175 54.0%, #ffe38a 55.6%, #ffe599 57.1%, #ffe7a4 58.7%, #ffe8ab 60.3%, #ffe9b1 61.9%, #ffeab5 63.5%, #ffebb7 65.1%, #ffebb8 66.7%, #ffebb8 68.3%, #ffebb7 69.8%, #ffebb4 71.4%, #ffebb1 73.0%, #ffebac 74.6%, #ffeaa6 76.2%, #ffea9e 77.8%, #ffe995 79.4%, #ffe98b 81.0%, #ffe97d 82.5%, #ffe86d 84.1%, #ffe858 85.7%, #ffe73d 87.3%, #fce73d 88.9%, #f9e73c 90.5%, #f7e73c 92.1%, #f5e73c 93.7%, #f3e73b 95.2%, #f2e83b 96.8%, #f1e83b 98.4%, #f0e83b 100.0%);
background: linear-gradient(225deg in oklch, oklch(23.25% 0.1190 263.15) 0.0%, oklch(24.38% 0.1011 260.30) 1.6%, oklch(25.71% 0.0911 256.97) 3.2%, oklch(27.20% 0.0844 253.20) 4.8%, oklch(28.86% 0.0796 249.02) 6.3%, oklch(30.66% 0.0763 244.47) 7.9%, oklch(32.59% 0.0741 239.57) 9.5%, oklch(34.65% 0.0729 234.37) 11.1%, oklch(36.82% 0.0725 228.89) 12.7%, oklch(39.09% 0.0729 223.16) 14.3%, oklch(41.44% 0.0741 217.23) 15.9%, oklch(43.86% 0.0762 211.11) 17.5%, oklch(46.35% 0.0791 204.85) 19.0%, oklch(48.88% 0.0831 198.47) 20.6%, oklch(51.44% 0.0883 192.01) 22.2%, oklch(54.03% 0.0950 185.50) 23.8%, oklch(56.63% 0.1035 178.97) 25.4%, oklch(59.23% 0.1143 172.45) 27.0%, oklch(61.81% 0.1283 165.98) 28.6%, oklch(64.37% 0.1445 159.59) 30.2%, oklch(66.88% 0.1461 153.30) 31.7%, oklch(69.35% 0.1476 147.16) 33.3%, oklch(71.75% 0.1492 141.18) 34.9%, oklch(74.07% 0.1507 135.41) 36.5%, oklch(76.31% 0.1521 129.88) 38.1%, oklch(78.44% 0.1535 124.61) 39.7%, oklch(80.46% 0.1549 119.65) 41.3%, oklch(82.36% 0.1562 115.02) 42.9%, oklch(84.11% 0.1574 110.76) 44.4%, oklch(85.71% 0.1586 106.89) 46.0%, oklch(87.15% 0.1597 103.45) 47.6%, oklch(88.41% 0.1607 100.48) 49.2%, oklch(89.50% 0.1617 97.97) 50.8%, oklch(90.45% 0.1577 95.84) 52.4%, oklch(91.28% 0.1321 94.03) 54.0%, oklch(92.00% 0.1132 92.53) 55.6%, oklch(92.62% 0.0992 91.32) 57.1%, oklch(93.14% 0.0888 90.38) 58.7%, oklch(93.56% 0.0811 89.71) 60.3%, oklch(93.89% 0.0755 89.27) 61.9%, oklch(94.15% 0.0718 89.06) 63.5%, oklch(94.32% 0.0696 89.06) 65.1%, oklch(94.43% 0.0687 89.24) 66.7%, oklch(94.47% 0.0692 89.60) 68.3%, oklch(94.45% 0.0708 90.11) 69.8%, oklch(94.39% 0.0736 90.76) 71.4%, oklch(94.27% 0.0776 91.53) 73.0%, oklch(94.11% 0.0828 92.41) 74.6%, oklch(93.92% 0.0893 93.37) 76.2%, oklch(93.70% 0.0972 94.40) 77.8%, oklch(93.46% 0.1066 95.49) 79.4%, oklch(93.20% 0.1175 96.61) 81.0%, oklch(92.93% 0.1300 97.75) 82.5%, oklch(92.66% 0.1443 98.89) 84.1%, oklch(92.38% 0.1604 100.01) 85.7%, oklch(92.12% 0.1764 101.09) 87.3%, oklch(91.86% 0.1768 102.14) 88.9%, oklch(91.63% 0.1772 103.11) 90.5%, oklch(91.42% 0.1775 104.00) 92.1%, oklch(91.24% 0.1779 104.78) 93.7%, oklch(91.10% 0.1782 105.45) 95.2%, oklch(91.00% 0.1785 105.98) 96.8%, oklch(90.94% 0.1788 106.36) 98.4%, oklch(90.94% 0.1791 106.57) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.232 | 0.12 | 263 |
| 2 | 0.89 | 0.161 | 99.2 |
| 3 | 0.909 | 0.179 | 106.6 |

## In these collections

- [Yellow and blue gradients](https://grabient.com/yellow-and-blue-gradients)

## Other forms

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