# Yellow and Blue: Navy and emerald

The "Yellow and Blue: Navy and emerald" palette brings together dark blue, blue, gold, and yellow. The colors span a very broad lightness range, combining moderate color with high 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, orange and yellow linear gradient
- Seed: `kUNCe45KW8uU2Lx4uUGg`
- Page: https://grabient.com/kUNCe45KW8uU2Lx4uUGg?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: dark to light, vivid, light
- Hues: complementary
- Contrast of its darkest and lightest colors: 15.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 | `#07162f` | `oklch(20.47% 0.0537 259.45)` | Liberty Blue | white, 17.9 to 1 |
| 2 | `#0d1f3a` | `oklch(24.08% 0.0566 258.37)` | Nightwalker | white, 16.4 to 1 |
| 3 | `#172b49` | `oklch(29.01% 0.0603 257.60)` | Rurikon Blue | white, 14.1 to 1 |
| 4 | `#243b5c` | `oklch(34.96% 0.0646 256.93)` | Midnight Sleigh | white, 11.3 to 1 |
| 5 | `#324d71` | `oklch(41.59% 0.0695 256.10)` | Airforce | white, 8.6 to 1 |
| 6 | `#416189` | `oklch(48.60% 0.0748 254.89)` | Federal Blue | white, 6.3 to 1 |
| 7 | `#5176a2` | `oklch(55.66% 0.0803 253.05)` | Pacifica | white, 4.7 to 1 |
| 8 | `#5f8bba` | `oklch(62.46% 0.0859 250.33)` | Faded Blue | black, 5.9 to 1 |
| 9 | `#6aa0d0` | `oklch(68.67% 0.0914 246.52)` | Blue Electress | black, 7.5 to 1 |
| 10 | `#71b3e2` | `oklch(73.99% 0.0968 241.36)` | Xavier Blue | black, 9.2 to 1 |
| 11 | `#72c2ef` | `oklch(78.09% 0.1018 234.62)` | Blue Mana | black, 10.7 to 1 |
| 12 | `#6ccff4` | `oklch(80.78% 0.1065 225.72)` | Heisenberg Blue | black, 11.8 to 1 |
| 13 | `#61d8f1` | `oklch(82.34% 0.1113 213.78)` | Electric Lemonade | black, 12.5 to 1 |
| 14 | `#57dee4` | `oklch(83.00% 0.1163 199.45)` | Neon Nazar | black, 12.9 to 1 |
| 15 | `#57e1cf` | `oklch(82.97% 0.1213 183.47)` | Jazzy Jade | black, 13 to 1 |
| 16 | `#68e0b4` | `oklch(82.43% 0.1262 166.57)` | Ocean in a Bowl | black, 12.8 to 1 |
| 17 | `#82da94` | `oklch(81.59% 0.1310 149.49)` | Enchanted Emerald | black, 12.4 to 1 |
| 18 | `#9dd275` | `oklch(80.65% 0.1356 132.99)` | Tropical Light | black, 11.9 to 1 |
| 19 | `#b6c958` | `oklch(79.80% 0.1398 117.79)` | Asparagus Fern | black, 11.4 to 1 |
| 20 | `#cac042` | `oklch(79.25% 0.1436 104.65)` | Anime | black, 11 to 1 |
| 21 | `#dab934` | `oklch(79.19% 0.1469 94.30)` | Eye Catching | black, 10.9 to 1 |
| 22 | `#e6b631` | `oklch(79.80% 0.1497 87.42)` | Last Sunlight | black, 11 to 1 |
| 23 | `#efb733` | `oklch(80.89% 0.1518 83.63)` | Sneezeweeds | black, 11.4 to 1 |
| 24 | `#f6ba37` | `oklch(82.29% 0.1534 82.29)` | Yellow Groove | black, 11.9 to 1 |
| 25 | `#fbc03c` | `oklch(83.91% 0.1545 82.96)` | Sweet Lemon | black, 12.6 to 1 |
| 26 | `#fec741` | `oklch(85.69% 0.1553 85.14)` | Sunny Festival | black, 13.4 to 1 |
| 27 | `#ffd04e` | `oklch(87.54% 0.1519 88.40)` | Flame Yellow | black, 14.3 to 1 |
| 28 | `#ffd959` | `oklch(89.37% 0.1491 92.23)` | Lemon Twist | black, 15.2 to 1 |
| 29 | `#ffe160` | `oklch(91.10% 0.1498 96.19)` | Primrose Path | black, 16.1 to 1 |
| 30 | `#ffe963` | `oklch(92.65% 0.1531 99.80)` | Fuzzy Duckling | black, 17 to 1 |
| 31 | `#ffef66` | `oklch(93.94% 0.1560 102.60)` | Caduceus Gold | black, 17.7 to 1 |
| 32 | `#fff36f` | `oklch(94.88% 0.1522 104.12)` | Pale Ale | black, 18.3 to 1 |

## CSS

```css
background: linear-gradient(45deg, #07162f 0.0%, #0d1f3a 3.2%, #172b49 6.5%, #243b5c 9.7%, #324d71 12.9%, #416189 16.1%, #5176a2 19.4%, #5f8bba 22.6%, #6aa0d0 25.8%, #71b3e2 29.0%, #72c2ef 32.3%, #6ccff4 35.5%, #61d8f1 38.7%, #57dee4 41.9%, #57e1cf 45.2%, #68e0b4 48.4%, #82da94 51.6%, #9dd275 54.8%, #b6c958 58.1%, #cac042 61.3%, #dab934 64.5%, #e6b631 67.7%, #efb733 71.0%, #f6ba37 74.2%, #fbc03c 77.4%, #fec741 80.6%, #ffd04e 83.9%, #ffd959 87.1%, #ffe160 90.3%, #ffe963 93.5%, #ffef66 96.8%, #fff36f 100.0%);
background: linear-gradient(45deg in oklch, oklch(20.47% 0.0537 259.45) 0.0%, oklch(24.08% 0.0566 258.37) 3.2%, oklch(29.01% 0.0603 257.60) 6.5%, oklch(34.96% 0.0646 256.93) 9.7%, oklch(41.59% 0.0695 256.10) 12.9%, oklch(48.60% 0.0748 254.89) 16.1%, oklch(55.66% 0.0803 253.05) 19.4%, oklch(62.46% 0.0859 250.33) 22.6%, oklch(68.67% 0.0914 246.52) 25.8%, oklch(73.99% 0.0968 241.36) 29.0%, oklch(78.09% 0.1018 234.62) 32.3%, oklch(80.78% 0.1065 225.72) 35.5%, oklch(82.34% 0.1113 213.78) 38.7%, oklch(83.00% 0.1163 199.45) 41.9%, oklch(82.97% 0.1213 183.47) 45.2%, oklch(82.43% 0.1262 166.57) 48.4%, oklch(81.59% 0.1310 149.49) 51.6%, oklch(80.65% 0.1356 132.99) 54.8%, oklch(79.80% 0.1398 117.79) 58.1%, oklch(79.25% 0.1436 104.65) 61.3%, oklch(79.19% 0.1469 94.30) 64.5%, oklch(79.80% 0.1497 87.42) 67.7%, oklch(80.89% 0.1518 83.63) 71.0%, oklch(82.29% 0.1534 82.29) 74.2%, oklch(83.91% 0.1545 82.96) 77.4%, oklch(85.69% 0.1553 85.14) 80.6%, oklch(87.54% 0.1519 88.40) 83.9%, oklch(89.37% 0.1491 92.23) 87.1%, oklch(91.10% 0.1498 96.19) 90.3%, oklch(92.65% 0.1531 99.80) 93.5%, oklch(93.94% 0.1560 102.60) 96.8%, oklch(94.88% 0.1522 104.12) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.205 | 0.054 | 259.5 |
| 2 | 0.791 | 0.103 | 232 |
| 3 | 0.795 | 0.149 | 89.3 |
| 4 | 0.949 | 0.157 | 104.1 |

## In these collections

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

## Other forms

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