# Blue yellow and blue palette

The Blue yellow and blue palette brings together dark blue, yellow, and blue. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is yellow.

- Also called: Navy, green, yellow and light blue linear gradient
- Seed: `kSSkK7eLktOSlzw`
- Page: https://grabient.com/kSSkK7eLktOSlzw?steps=48&angle=180
- Drawn as: linear gradient, 48 steps, 180 degrees
- Kinds: light center, pastel, light, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 13.2 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 | `#122858` | `oklch(29.13% 0.0909 262.97)` | Fibonacci Blue | white, 14.2 to 1 |
| 2 | `#0f2e5d` | `oklch(30.72% 0.0926 259.07)` | Ambassador Blue | white, 13.4 to 1 |
| 3 | `#083463` | `oklch(32.66% 0.0946 254.18)` | Prussian Blue | white, 12.4 to 1 |
| 4 | `#003c69` | `oklch(34.92% 0.0951 248.47)` | Ateneo Blue | white, 11.3 to 1 |
| 5 | `#00456b` | `oklch(37.46% 0.0887 241.90)` | Lush Aqua | white, 10.1 to 1 |
| 6 | `#004f6f` | `oklch(40.25% 0.0850 234.64)` | Gemstone Blue | white, 8.9 to 1 |
| 7 | `#005974` | `oklch(43.25% 0.0833 226.80)` | Ink Blue | white, 7.8 to 1 |
| 8 | `#006479` | `oklch(46.43% 0.0837 218.49)` | Atlantis Myth | white, 6.7 to 1 |
| 9 | `#006f7d` | `oklch(49.77% 0.0860 209.81)` | Iridescent Peacock | white, 5.8 to 1 |
| 10 | `#007c82` | `oklch(53.21% 0.0905 200.86)` | Macquarie | white, 5 to 1 |
| 11 | `#008885` | `oklch(56.74% 0.0975 191.75)` | Green Moblin | black, 4.8 to 1 |
| 12 | `#009687` | `oklch(60.31% 0.1077 182.58)` | Approval Green | black, 5.6 to 1 |
| 13 | `#00a385` | `oklch(63.89% 0.1222 173.44)` | Congo Green | black, 6.6 to 1 |
| 14 | `#29b081` | `oklch(67.45% 0.1321 164.46)` | Dark Mountain Meadow | black, 7.5 to 1 |
| 15 | `#4dba7c` | `oklch(70.95% 0.1357 155.71)` | Aragon Green | black, 8.6 to 1 |
| 16 | `#6ac377` | `oklch(74.36% 0.1392 147.31)` | Soft Green | black, 9.7 to 1 |
| 17 | `#84cc72` | `oklch(77.65% 0.1426 139.36)` | Emerald Rain | black, 10.8 to 1 |
| 18 | `#9dd46d` | `oklch(80.78% 0.1456 131.96)` | Tropical Light | black, 12 to 1 |
| 19 | `#b3da68` | `oklch(83.71% 0.1484 125.22)` | Melissa | black, 13.1 to 1 |
| 20 | `#c7e066` | `oklch(86.42% 0.1509 119.24)` | Dry Seedlings | black, 14.3 to 1 |
| 21 | `#d9e564` | `oklch(88.86% 0.1531 114.11)` | Green Glitter | black, 15.3 to 1 |
| 22 | `#e8ea65` | `oklch(91.02% 0.1548 109.96)` | Honeysuckle | black, 16.3 to 1 |
| 23 | `#f4ee66` | `oklch(92.84% 0.1561 106.87)` | Lemon Verbena | black, 17.2 to 1 |
| 24 | `#fcf268` | `oklch(94.30% 0.1569 104.95)` | Kihada Yellow | black, 18 to 1 |
| 25 | `#fff57d` | `oklch(95.37% 0.1413 104.29)` | Yellow Salmonberry | black, 18.5 to 1 |
| 26 | `#fff78e` | `oklch(96.13% 0.1273 104.86)` | Aged Plastic Casing | black, 18.9 to 1 |
| 27 | `#fffa87` | `oklch(96.59% 0.1378 106.55)` | Aged Plastic Casing | black, 19.2 to 1 |
| 28 | `#fcfd78` | `oklch(96.78% 0.1550 109.26)` | Old Laser Lemon | black, 19.4 to 1 |
| 29 | `#f5ff81` | `oklch(96.73% 0.1505 112.91)` | Yellowish Tan | black, 19.5 to 1 |
| 30 | `#edff9b` | `oklch(96.46% 0.1254 117.40)` | Metal Spark | black, 19.3 to 1 |
| 31 | `#e3ffa6` | `oklch(95.99% 0.1160 122.63)` | Lime Mist | black, 19.1 to 1 |
| 32 | `#d9ffac` | `oklch(95.34% 0.1141 128.51)` | Lime Mist | black, 18.8 to 1 |
| 33 | `#cbffaf` | `oklch(94.53% 0.1166 134.94)` | Sour Green Cherry | black, 18.4 to 1 |
| 34 | `#bbffb2` | `oklch(93.59% 0.1223 141.83)` | Glow in the Dark | black, 18 to 1 |
| 35 | `#a6ffb6` | `oklch(92.55% 0.1307 149.07)` | Light Seafoam Green | black, 17.6 to 1 |
| 36 | `#91febe` | `oklch(91.41% 0.1352 156.58)` | Lemon Gate | black, 17 to 1 |
| 37 | `#81fac8` | `oklch(90.21% 0.1319 164.25)` | Olo | black, 16.4 to 1 |
| 38 | `#73f6d1` | `oklch(88.97% 0.1287 171.99)` | Light Turquoise | black, 15.8 to 1 |
| 39 | `#68f2d9` | `oklch(87.70% 0.1254 179.72)` | Tiffany Blue | black, 15.2 to 1 |
| 40 | `#60ece0` | `oklch(86.44% 0.1222 187.32)` | Blue Crystal Landscape | black, 14.6 to 1 |
| 41 | `#5ce7e6` | `oklch(85.21% 0.1191 194.70)` | Near Moon | black, 13.9 to 1 |
| 42 | `#5be1eb` | `oklch(84.02% 0.1162 201.78)` | Electric Lemonade | black, 13.4 to 1 |
| 43 | `#5ddbee` | `oklch(82.90% 0.1134 208.44)` | Electric Lemonade | black, 12.8 to 1 |
| 44 | `#61d6f0` | `oklch(81.87% 0.1108 214.61)` | Electric Lemonade | black, 12.3 to 1 |
| 45 | `#65d1f1` | `oklch(80.96% 0.1084 220.17)` | Heisenberg Blue | black, 11.9 to 1 |
| 46 | `#6acdf2` | `oklch(80.18% 0.1064 225.05)` | Skyan | black, 11.6 to 1 |
| 47 | `#6ec9f2` | `oklch(79.57% 0.1047 229.13)` | Nevermind Nirvana | black, 11.3 to 1 |
| 48 | `#71c7f2` | `oklch(79.13% 0.1033 232.32)` | Nevermind Nirvana | black, 11.1 to 1 |

## CSS

```css
background: linear-gradient(180deg, #122858 0.0%, #0f2e5d 2.1%, #083463 4.3%, #003c69 6.4%, #00456b 8.5%, #004f6f 10.6%, #005974 12.8%, #006479 14.9%, #006f7d 17.0%, #007c82 19.1%, #008885 21.3%, #009687 23.4%, #00a385 25.5%, #29b081 27.7%, #4dba7c 29.8%, #6ac377 31.9%, #84cc72 34.0%, #9dd46d 36.2%, #b3da68 38.3%, #c7e066 40.4%, #d9e564 42.6%, #e8ea65 44.7%, #f4ee66 46.8%, #fcf268 48.9%, #fff57d 51.1%, #fff78e 53.2%, #fffa87 55.3%, #fcfd78 57.4%, #f5ff81 59.6%, #edff9b 61.7%, #e3ffa6 63.8%, #d9ffac 66.0%, #cbffaf 68.1%, #bbffb2 70.2%, #a6ffb6 72.3%, #91febe 74.5%, #81fac8 76.6%, #73f6d1 78.7%, #68f2d9 80.9%, #60ece0 83.0%, #5ce7e6 85.1%, #5be1eb 87.2%, #5ddbee 89.4%, #61d6f0 91.5%, #65d1f1 93.6%, #6acdf2 95.7%, #6ec9f2 97.9%, #71c7f2 100.0%);
background: linear-gradient(180deg in oklch, oklch(29.13% 0.0909 262.97) 0.0%, oklch(30.72% 0.0926 259.07) 2.1%, oklch(32.66% 0.0946 254.18) 4.3%, oklch(34.92% 0.0951 248.47) 6.4%, oklch(37.46% 0.0887 241.90) 8.5%, oklch(40.25% 0.0850 234.64) 10.6%, oklch(43.25% 0.0833 226.80) 12.8%, oklch(46.43% 0.0837 218.49) 14.9%, oklch(49.77% 0.0860 209.81) 17.0%, oklch(53.21% 0.0905 200.86) 19.1%, oklch(56.74% 0.0975 191.75) 21.3%, oklch(60.31% 0.1077 182.58) 23.4%, oklch(63.89% 0.1222 173.44) 25.5%, oklch(67.45% 0.1321 164.46) 27.7%, oklch(70.95% 0.1357 155.71) 29.8%, oklch(74.36% 0.1392 147.31) 31.9%, oklch(77.65% 0.1426 139.36) 34.0%, oklch(80.78% 0.1456 131.96) 36.2%, oklch(83.71% 0.1484 125.22) 38.3%, oklch(86.42% 0.1509 119.24) 40.4%, oklch(88.86% 0.1531 114.11) 42.6%, oklch(91.02% 0.1548 109.96) 44.7%, oklch(92.84% 0.1561 106.87) 46.8%, oklch(94.30% 0.1569 104.95) 48.9%, oklch(95.37% 0.1413 104.29) 51.1%, oklch(96.13% 0.1273 104.86) 53.2%, oklch(96.59% 0.1378 106.55) 55.3%, oklch(96.78% 0.1550 109.26) 57.4%, oklch(96.73% 0.1505 112.91) 59.6%, oklch(96.46% 0.1254 117.40) 61.7%, oklch(95.99% 0.1160 122.63) 63.8%, oklch(95.34% 0.1141 128.51) 66.0%, oklch(94.53% 0.1166 134.94) 68.1%, oklch(93.59% 0.1223 141.83) 70.2%, oklch(92.55% 0.1307 149.07) 72.3%, oklch(91.41% 0.1352 156.58) 74.5%, oklch(90.21% 0.1319 164.25) 76.6%, oklch(88.97% 0.1287 171.99) 78.7%, oklch(87.70% 0.1254 179.72) 80.9%, oklch(86.44% 0.1222 187.32) 83.0%, oklch(85.21% 0.1191 194.70) 85.1%, oklch(84.02% 0.1162 201.78) 87.2%, oklch(82.90% 0.1134 208.44) 89.4%, oklch(81.87% 0.1108 214.61) 91.5%, oklch(80.96% 0.1084 220.17) 93.6%, oklch(80.18% 0.1064 225.05) 95.7%, oklch(79.57% 0.1047 229.13) 97.9%, oklch(79.13% 0.1033 232.32) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.291 | 0.091 | 263 |
| 2 | 0.949 | 0.157 | 104.5 |
| 3 | 0.791 | 0.103 | 232.3 |

## In these collections

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

## Other forms

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