# Slate Cedar Scent Layers

Four diagonal swatches pair icy blue-gray and slate blue with warm cedar brown and deep charcoal. The cool mineral opening over dry wood and smoke colors suits fragrance pairing guides, candle labels, grooming packaging, atmospheric editorials, and product graphics that combine crisp aromatic notes with a grounded base.

- Also called: Gray, blue and brown linear swatches
- Seed: `kU7Am1yxZAUqjUwlhTyg`
- Page: https://grabient.com/kU7Am1yxZAUqjUwlhTyg?style=linearSwatches&steps=4&angle=45
- Drawn as: linear swatches, 4 steps, 45 degrees
- Kinds: light to dark, muted
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 11.3 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 | `#e2e8f0` | `oklch(92.91% 0.0124 255.23)` | Bellflower Blue | black, 17 to 1 |
| 2 | `#677fa2` | `oklch(59.06% 0.0606 258.40)` | Blue Boater | black, 5.1 to 1 |
| 3 | `#a66e3d` | `oklch(58.66% 0.0965 60.09)` | Castellina | black, 4.9 to 1 |
| 4 | `#332a28` | `oklch(29.53% 0.0138 32.61)` | Livid Brown | white, 13.9 to 1 |

## CSS

```css
background: linear-gradient(45deg, #e2e8f0 0.000% 25.000%, #677fa2 25.000% 50.000%, #a66e3d 50.000% 75.000%, #332a28 75.000% 100.000%);
background: linear-gradient(45deg, oklch(92.91% 0.0124 255.23) 0.000% 25.000%, oklch(59.06% 0.0606 258.40) 25.000% 50.000%, oklch(58.66% 0.0965 60.09) 50.000% 75.000%, oklch(29.53% 0.0138 32.61) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.929 | 0.012 | 255.2 |
| 2 | 0.591 | 0.061 | 258.4 |
| 3 | 0.587 | 0.096 | 420.1 |
| 4 | 0.295 | 0.014 | 392.6 |

## In these collections

- [Scent stacking palettes](https://grabient.com/scent-stacking-palettes)

## Other forms

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