# Copper slate and café cream colors

Copper brown, slate blue gray, charcoal, and warm café cream meet in four angular swatches. The warm metallic and milk tones contrast with cooler equipment shadows, suggesting a considered home coffee station. This palette works for café branding, coffee equipment presentations, and interior mood boards for a kitchen coffee corner.

- Also called: Brown, gray, black and beige angular swatches
- Seed: `kUmk8kN4fVCQDv_tkq3A`
- Page: https://grabient.com/kUmk8kN4fVCQDv_tkq3A?style=angularSwatches&steps=4
- Drawn as: angular swatches, 4 steps, 90 degrees
- Kinds: dark center, neutral
- Hues: wide
- Contrast of its darkest and lightest colors: 9.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 | `#b56d42` | `oklch(60.63% 0.1089 50.63)` | Orange Ballad | black, 5.2 to 1 |
| 2 | `#46545b` | `oklch(43.70% 0.0207 229.22)` | Vermont Slate | white, 7.8 to 1 |
| 3 | `#252b2e` | `oklch(28.35% 0.0096 229.22)` | Blue Charcoal | white, 14.3 to 1 |
| 4 | `#e5cead` | `oklch(86.22% 0.0510 75.99)` | Classic Terra | black, 13.7 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #b56d42 0.000% 25.000%, #46545b 25.000% 50.000%, #252b2e 50.000% 75.000%, #e5cead 75.000% 100.000%);
background: conic-gradient(from 90deg, oklch(60.63% 0.1089 50.63) 0.000% 25.000%, oklch(43.70% 0.0207 229.22) 25.000% 50.000%, oklch(28.35% 0.0096 229.22) 50.000% 75.000%, oklch(86.22% 0.0510 75.99) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.606 | 0.109 | 50.6 |
| 2 | 0.437 | 0.021 | 229.2 |
| 3 | 0.283 | 0.01 | 229.2 |
| 4 | 0.862 | 0.051 | 76 |

## In these collections

- [SoHo chic colors](https://grabient.com/soho-chic-colors)
- [Home café](https://grabient.com/home-cafe)

## Other forms

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