# Charcoal, silver and sage color palette

This palette moves from gray through light gray to teal. It lightens and then darkens across a moderate lightness range, combining restrained color with gentle contrast. Its balanced and composed character suits brand mood boards and social graphics, especially compositions that need closely related light and dark areas.

- Also called: Gray angular swatches
- Seed: `kYawonxQVAt2DR5UiUcyQzAT8NwC`
- Page: https://grabient.com/kYawonxQVAt2DR5UiUcyQzAT8NwC?style=angularSwatches&steps=6&angle=135
- Drawn as: angular swatches, 6 steps, 135 degrees
- Kinds: light center, neutral
- Hues: monochromatic
- 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 | `#544c46` | `oklch(42.13% 0.0138 55.55)` | Barnwood | white, 8.4 to 1 |
| 2 | `#766e68` | `oklch(54.33% 0.0138 61.89)` | Grey Owl | white, 5 to 1 |
| 3 | `#a8aba5` | `oklch(73.62% 0.0083 126.35)` | Ginkgo Green | black, 9 to 1 |
| 4 | `#839996` | `oklch(66.54% 0.0248 187.64)` | In the Moment | black, 6.9 to 1 |
| 5 | `#62807d` | `oklch(57.48% 0.0344 190.81)` | Teal Stencil | black, 4.8 to 1 |
| 6 | `#496968` | `oklch(49.61% 0.0372 192.92)` | Sea Pine | white, 5.9 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #544c46 0.000% 16.667%, #766e68 16.667% 33.333%, #a8aba5 33.333% 50.000%, #839996 50.000% 66.667%, #62807d 66.667% 83.333%, #496968 83.333% 100.000%);
background: conic-gradient(from 135deg, oklch(42.13% 0.0138 55.55) 0.000% 16.667%, oklch(54.33% 0.0138 61.89) 16.667% 33.333%, oklch(73.62% 0.0083 126.35) 33.333% 50.000%, oklch(66.54% 0.0248 187.64) 50.000% 66.667%, oklch(57.48% 0.0344 190.81) 66.667% 83.333%, oklch(49.61% 0.0372 192.92) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.421 | 0.014 | 55.5 |
| 2 | 0.543 | 0.014 | 61.9 |
| 3 | 0.736 | 0.008 | 126.3 |
| 4 | 0.665 | 0.025 | 187.6 |
| 5 | 0.575 | 0.034 | 190.8 |
| 6 | 0.496 | 0.037 | 192.9 |

## In these collections

- [Earth tone swatches](https://grabient.com/earth-tone-swatches)
- [Natural swatches](https://grabient.com/natural-swatches)

## Other forms

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