# Slate Blue Geometry

The Charcoal, cobalt blue and stone behr 2027 brings together gray, blue, and light blue. The colors span a moderate lightness range, combining restrained color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is gray, and its lightest tone is light blue.

- Also called: Monochrome gray and blue linear swatches
- Seed: `kUZgawuhrCsqUOnpiUDg`
- Page: https://grabient.com/kUZgawuhrCsqUOnpiUDg?style=linearSwatches&steps=4&angle=135
- Drawn as: linear swatches, 4 steps, 135 degrees
- Kinds: dark to light, muted, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 5.4 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 | `#45494c` | `oklch(40.16% 0.0083 248.20)` | Winter Coat | white, 9.1 to 1 |
| 2 | `#485480` | `oklch(45.67% 0.0730 271.45)` | Mozart | white, 7.3 to 1 |
| 3 | `#588495` | `oklch(58.66% 0.0551 224.95)` | Blue Moon Bay | black, 5.1 to 1 |
| 4 | `#b9cbd5` | `oklch(83.07% 0.0248 233.41)` | Salty Tears | black, 12.5 to 1 |

## CSS

```css
background: linear-gradient(135deg, #45494c 0.000% 25.000%, #485480 25.000% 50.000%, #588495 50.000% 75.000%, #b9cbd5 75.000% 100.000%);
background: linear-gradient(135deg, oklch(40.16% 0.0083 248.20) 0.000% 25.000%, oklch(45.67% 0.0730 271.45) 25.000% 50.000%, oklch(58.66% 0.0551 224.95) 50.000% 75.000%, oklch(83.07% 0.0248 233.41) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.402 | 0.008 | 248.2 |
| 2 | 0.457 | 0.073 | 271.5 |
| 3 | 0.587 | 0.055 | 225 |
| 4 | 0.831 | 0.025 | 233.4 |

## In these collections

- [Behr 2027 swatches](https://grabient.com/behr-2027-swatches)

## Other forms

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