# Blue and bronze color palette

The Blue and bronze color palette brings together dark blue, light blue, and orange. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is light blue.

- Also called: Navy, light blue and orange angular swatches
- Seed: `kSOEG37Rm9NLFKq`
- Page: https://grabient.com/kSOEG37Rm9NLFKq?style=angularSwatches&steps=3
- Drawn as: angular swatches, 3 steps, 90 degrees
- Kinds: light center, cool
- Hues: complementary
- Contrast of its darkest and lightest colors: 11.4 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 | `#001840` | `oklch(22.07% 0.0828 258.29)` | Navy | white, 17.4 to 1 |
| 2 | `#a4d9f8` | `oklch(85.83% 0.0703 234.80)` | Shiva Blue | black, 13.8 to 1 |
| 3 | `#d76f00` | `oklch(64.96% 0.1606 55.13)` | Marmalade | black, 6.1 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #001840 0.000% 33.333%, #a4d9f8 33.333% 66.667%, #d76f00 66.667% 100.000%);
background: conic-gradient(from 90deg, oklch(22.07% 0.0828 258.29) 0.000% 33.333%, oklch(85.83% 0.0703 234.80) 33.333% 66.667%, oklch(64.96% 0.1606 55.13) 66.667% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.22 | 0.09 | 258 |
| 2 | 0.858 | 0.07 | 234.8 |
| 3 | 0.65 | 0.19 | 55.2 |

## In these collections

- [Complementary swatches](https://grabient.com/complementary-swatches)
- [Blue and orange swatches](https://grabient.com/blue-and-orange-swatches)

## Other forms

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