# Bronze, ochre and teal summer palette

The Bronze, ochre and teal summer palette brings together orange, gold, green, and light teal. The colors span a moderate lightness range, combining strong color with gentle contrast. Its balanced and composed character suits seasonal campaigns and event graphics. Its darkest tone is orange, and its lightest tone is light teal.

- Also called: Vivid duotone orange to light blue linear gradient
- Seed: `kWh3gdUDjBtkyQxhp0S6yZHg`
- Page: https://grabient.com/kWh3gdUDjBtkyQxhp0S6yZHg?steps=6&angle=225
- Drawn as: linear gradient, 6 steps, 225 degrees
- Kinds: dark to light, vivid
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.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 | `#b64000` | `oklch(53.15% 0.1643 40.74)` | Martian Ironcrust | white, 5.6 to 1 |
| 2 | `#ca6100` | `oklch(61.04% 0.1578 51.61)` | Kvass | black, 5.2 to 1 |
| 3 | `#cf8400` | `oklch(67.41% 0.1461 69.86)` | Copious Caramel | black, 6.9 to 1 |
| 4 | `#bea63d` | `oklch(72.75% 0.1252 95.90)` | Forest Tent | black, 8.7 to 1 |
| 5 | `#9cc882` | `oklch(78.34% 0.1051 134.52)` | Frenzy Plant | black, 10.9 to 1 |
| 6 | `#71e2d6` | `oklch(84.25% 0.1047 186.61)` | Turquoise Chalk | black, 13.5 to 1 |

## CSS

```css
background: linear-gradient(225deg, #b64000 0.0%, #ca6100 20.0%, #cf8400 40.0%, #bea63d 60.0%, #9cc882 80.0%, #71e2d6 100.0%);
background: linear-gradient(225deg in oklch, oklch(53.15% 0.1643 40.74) 0.0%, oklch(61.04% 0.1578 51.61) 20.0%, oklch(67.41% 0.1461 69.86) 40.0%, oklch(72.75% 0.1252 95.90) 60.0%, oklch(78.34% 0.1051 134.52) 80.0%, oklch(84.25% 0.1047 186.61) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.531 | 0.165 | 40.8 |
| 2 | 0.63 | 0.156 | 55.6 |
| 3 | 0.701 | 0.138 | 82 |
| 4 | 0.768 | 0.107 | 122.2 |
| 5 | 0.843 | 0.105 | 186.6 |

## In these collections

- [Summer gradients](https://grabient.com/summer-gradients)

## Other forms

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