# Orange and Blue: Bronze and tan

The "Orange and Blue: Bronze and tan" palette brings together orange, light yellow, teal, and blue. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is light yellow.

- Also called: Brown, orange, gray and blue angular swatches
- Seed: `kah2ci1LhBd4vwVgE0LWxPL1ElwrDJcEA`
- Page: https://grabient.com/kah2ci1LhBd4vwVgE0LWxPL1ElwrDJcEA?style=angularSwatches&steps=13
- Drawn as: angular swatches, 13 steps, 90 degrees
- Kinds: vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 2.5 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 | `#ab4d04` | `oklch(53.15% 0.1419 48.52)` | Cinnamon Bun | white, 5.5 to 1 |
| 2 | `#c06100` | `oklch(59.38% 0.1486 54.10)` | Crema | black, 4.9 to 1 |
| 3 | `#d67900` | `oklch(66.54% 0.1543 61.18)` | Autumn Leaf Orange | black, 6.6 to 1 |
| 4 | `#df8c21` | `oklch(71.01% 0.1483 66.28)` | Sumac Dyed | black, 7.8 to 1 |
| 5 | `#dd9c40` | `oklch(74.02% 0.1309 72.82)` | Pavilion Peach | black, 8.9 to 1 |
| 6 | `#cea96c` | `oklch(75.52% 0.0901 79.43)` | Artemis | black, 9.5 to 1 |
| 7 | `#b9b08b` | `oklch(75.59% 0.0524 97.13)` | Powdered Sage | black, 9.6 to 1 |
| 8 | `#99b49b` | `oklch(74.21% 0.0450 147.39)` | Garden District | black, 9.3 to 1 |
| 9 | `#7baeaf` | `oklch(71.65% 0.0537 197.52)` | Galaxy Green | black, 8.5 to 1 |
| 10 | `#5ba5b7` | `oklch(68.16% 0.0786 214.82)` | Blue Calypso | black, 7.5 to 1 |
| 11 | `#2e99b7` | `oklch(63.78% 0.1033 220.77)` | Butterfly Blue | black, 6.3 to 1 |
| 12 | `#1685aa` | `oklch(57.78% 0.1064 226.97)` | Lyrebird | black, 4.9 to 1 |
| 13 | `#09759b` | `oklch(52.76% 0.1033 230.28)` | Bateau | white, 5.2 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #ab4d04 0.000% 7.692%, #c06100 7.692% 15.385%, #d67900 15.385% 23.077%, #df8c21 23.077% 30.769%, #dd9c40 30.769% 38.462%, #cea96c 38.462% 46.154%, #b9b08b 46.154% 53.846%, #99b49b 53.846% 61.538%, #7baeaf 61.538% 69.231%, #5ba5b7 69.231% 76.923%, #2e99b7 76.923% 84.615%, #1685aa 84.615% 92.308%, #09759b 92.308% 100.000%);
background: conic-gradient(from 90deg, oklch(53.15% 0.1419 48.52) 0.000% 7.692%, oklch(59.38% 0.1486 54.10) 7.692% 15.385%, oklch(66.54% 0.1543 61.18) 15.385% 23.077%, oklch(71.01% 0.1483 66.28) 23.077% 30.769%, oklch(74.02% 0.1309 72.82) 30.769% 38.462%, oklch(75.52% 0.0901 79.43) 38.462% 46.154%, oklch(75.59% 0.0524 97.13) 46.154% 53.846%, oklch(74.21% 0.0450 147.39) 53.846% 61.538%, oklch(71.65% 0.0537 197.52) 61.538% 69.231%, oklch(68.16% 0.0786 214.82) 69.231% 76.923%, oklch(63.78% 0.1033 220.77) 76.923% 84.615%, oklch(57.78% 0.1064 226.97) 84.615% 92.308%, oklch(52.76% 0.1033 230.28) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.531 | 0.142 | 48.5 |
| 2 | 0.665 | 0.154 | 61.2 |
| 3 | 0.74 | 0.131 | 72.8 |
| 4 | 0.756 | 0.052 | 97.1 |
| 5 | 0.717 | 0.054 | 197.5 |
| 6 | 0.638 | 0.103 | 220.8 |
| 7 | 0.528 | 0.103 | 230.3 |

## In these collections

- [Orange and blue gradients](https://grabient.com/orange-and-blue-gradients)
- [WGSN 2027 swatches](https://grabient.com/wgsn-2027-swatches)

## Other forms

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