# Stone, teal and bronze color palette

The Stone, teal and bronze color palette brings together light gray, teal, green, and dark orange. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits botanical branding and garden event graphics. Its darkest tone is dark orange, and its lightest tone is light gray.

- Also called: Gray, teal, dark green and brown angular swatches
- Seed: `kW2g2c2RY_8Yiuk2mzxoBQ2A`
- Page: https://grabient.com/kW2g2c2RY_8Yiuk2mzxoBQ2A?style=angularSwatches&steps=5&angle=30
- Drawn as: angular swatches, 5 steps, 30 degrees
- Kinds: light to dark, vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 10.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 | `#c4d3d9` | `oklch(85.83% 0.0179 220.08)` | Serene Setting | black, 13.7 to 1 |
| 2 | `#73a8b9` | `oklch(70.08% 0.0606 220.08)` | Milky Blue | black, 8 to 1 |
| 3 | `#23846c` | `oklch(55.12% 0.0951 172.52)` | Accent Green Blue | white, 4.5 to 1 |
| 4 | `#365a34` | `oklch(42.91% 0.0744 142.94)` | Parsley | white, 7.8 to 1 |
| 5 | `#351b03` | `oklch(25.20% 0.0551 59.45)` | Powdered Cocoa | white, 16 to 1 |

## CSS

```css
background: conic-gradient(from 30deg, #c4d3d9 0.000% 20.000%, #73a8b9 20.000% 40.000%, #23846c 40.000% 60.000%, #365a34 60.000% 80.000%, #351b03 80.000% 100.000%);
background: conic-gradient(from 30deg, oklch(85.83% 0.0179 220.08) 0.000% 20.000%, oklch(70.08% 0.0606 220.08) 20.000% 40.000%, oklch(55.12% 0.0951 172.52) 40.000% 60.000%, oklch(42.91% 0.0744 142.94) 60.000% 80.000%, oklch(25.20% 0.0551 59.45) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.858 | 0.018 | 220.1 |
| 2 | 0.701 | 0.061 | 220.1 |
| 3 | 0.551 | 0.095 | 172.5 |
| 4 | 0.429 | 0.074 | 142.9 |
| 5 | 0.252 | 0.055 | 59.5 |

## In these collections

- [Natural swatches](https://grabient.com/natural-swatches)
- [Garden swatches](https://grabient.com/garden-swatches)

## Other forms

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