# Bronze blue and orange palette

The Bronze blue and orange palette brings together dark blue, blue, and orange. 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 orange.

- Also called: Navy, blue, tan and brown angular swatches
- Seed: `kWOie1LaA_8EjP1arFRRzc9w`
- Page: https://grabient.com/kWOie1LaA_8EjP1arFRRzc9w?style=angularSwatches&steps=5&angle=45
- Drawn as: angular swatches, 5 steps, 45 degrees
- Kinds: vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 6.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 | `#091d35` | `oklch(22.83% 0.0537 254.53)` | Trapped Darkness | white, 16.9 to 1 |
| 2 | `#183d6a` | `oklch(35.83% 0.0882 254.53)` | Blue Opal | white, 10.9 to 1 |
| 3 | `#366a9b` | `oklch(51.18% 0.0965 249.25)` | Star Sapphire | white, 5.6 to 1 |
| 4 | `#d8904c` | `oklch(71.26% 0.1213 61.50)` | Golden Nugget | black, 8 to 1 |
| 5 | `#ba4f18` | `oklch(55.91% 0.1516 43.53)` | Taisha Brown | white, 4.9 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #091d35 0.000% 20.000%, #183d6a 20.000% 40.000%, #366a9b 40.000% 60.000%, #d8904c 60.000% 80.000%, #ba4f18 80.000% 100.000%);
background: conic-gradient(from 45deg, oklch(22.83% 0.0537 254.53) 0.000% 20.000%, oklch(35.83% 0.0882 254.53) 20.000% 40.000%, oklch(51.18% 0.0965 249.25) 40.000% 60.000%, oklch(71.26% 0.1213 61.50) 60.000% 80.000%, oklch(55.91% 0.1516 43.53) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.228 | 0.054 | 254.5 |
| 2 | 0.358 | 0.088 | 254.5 |
| 3 | 0.512 | 0.096 | 249.2 |
| 4 | 0.713 | 0.121 | 421.5 |
| 5 | 0.559 | 0.152 | 403.5 |

## In these collections

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

## Other forms

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