# Navy and bronze blue and yellow

The Navy and bronze blue and yellow brings together dark blue, blue, light blue, pale yellow, and gold. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is pale yellow.

- Also called: Navy, blue, yellow and brown linear swatches
- Seed: `kYOEm8vVq_20ZvR3nS_7T2_EIoPk`
- Page: https://grabient.com/kYOEm8vVq_20ZvR3nS_7T2_EIoPk?style=linearSwatches&steps=6
- Drawn as: linear swatches, 6 steps, 90 degrees
- Kinds: light center, vivid
- 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 | `#041348` | `oklch(22.05% 0.1006 265.08)` | Kantor Blue | white, 17.5 to 1 |
| 2 | `#0b43e7` | `oklch(48.03% 0.2494 264.02)` | Scuff Blue | white, 7 to 1 |
| 3 | `#a7d7fa` | `oklch(85.83% 0.0703 239.72)` | Malmö FF | black, 13.7 to 1 |
| 4 | `#f3efb1` | `oklch(94.09% 0.0799 104.45)` | Fanlight | black, 17.8 to 1 |
| 5 | `#f0cf26` | `oklch(85.83% 0.1695 97.05)` | Golden Kiwi | black, 13.7 to 1 |
| 6 | `#866200` | `oklch(51.97% 0.1068 83.29)` | Rat Brown | white, 5.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #041348 0.000% 16.667%, #0b43e7 16.667% 33.333%, #a7d7fa 33.333% 50.000%, #f3efb1 50.000% 66.667%, #f0cf26 66.667% 83.333%, #866200 83.333% 100.000%);
background: linear-gradient(90deg, oklch(22.05% 0.1006 265.08) 0.000% 16.667%, oklch(48.03% 0.2494 264.02) 16.667% 33.333%, oklch(85.83% 0.0703 239.72) 33.333% 50.000%, oklch(94.09% 0.0799 104.45) 50.000% 66.667%, oklch(85.83% 0.1695 97.05) 66.667% 83.333%, oklch(51.97% 0.1068 83.29) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.22 | 0.101 | 265.1 |
| 2 | 0.48 | 0.249 | 264 |
| 3 | 0.858 | 0.07 | 239.7 |
| 4 | 0.941 | 0.08 | 104.5 |
| 5 | 0.858 | 0.169 | 97.1 |
| 6 | 0.52 | 0.11 | 83.3 |

## In these collections

- [Blue and yellow swatches](https://grabient.com/blue-and-yellow-swatches)

## Other forms

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