# Cream Cabinet Angles

Five bands move from soft black through steel blue, pale cream, coral red, and finish in burnt orange. The separated colors give headings, backgrounds, borders, and small accents clearly defined roles. It suits retro posters, album covers, packaging, and nostalgic interface accents.

- Also called: Black, blue, red and brown angular swatches
- Seed: `kWRg7XuJo53IQLNBNLdyB5Ew`
- Page: https://grabient.com/kWRg7XuJo53IQLNBNLdyB5Ew?style=angularSwatches&steps=5&angle=45
- Drawn as: angular swatches, 5 steps, 45 degrees
- Kinds: light center
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.9 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 | `#2a2630` | `oklch(27.56% 0.0193 303.05)` | Black Onyx | white, 14.8 to 1 |
| 2 | `#35567a` | `oklch(44.49% 0.0717 251.27)` | Star Spangled | white, 7.5 to 1 |
| 3 | `#e9ddbd` | `oklch(89.76% 0.0441 89.58)` | Double Pearl Lusta | black, 15.4 to 1 |
| 4 | `#a93b47` | `oklch(51.18% 0.1447 17.72)` | Roses Are Red | white, 6.1 to 1 |
| 5 | `#9b6a43` | `oklch(56.69% 0.0827 58.94)` | Must Love Dogs | white, 4.6 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #2a2630 0.000% 20.000%, #35567a 20.000% 40.000%, #e9ddbd 40.000% 60.000%, #a93b47 60.000% 80.000%, #9b6a43 80.000% 100.000%);
background: conic-gradient(from 45deg, oklch(27.56% 0.0193 303.05) 0.000% 20.000%, oklch(44.49% 0.0717 251.27) 20.000% 40.000%, oklch(89.76% 0.0441 89.58) 40.000% 60.000%, oklch(51.18% 0.1447 17.72) 60.000% 80.000%, oklch(56.69% 0.0827 58.94) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.276 | 0.019 | 303 |
| 2 | 0.445 | 0.072 | 251.3 |
| 3 | 0.898 | 0.044 | 89.6 |
| 4 | 0.512 | 0.145 | 17.7 |
| 5 | 0.567 | 0.083 | 58.9 |

## In these collections

- [Retro swatches](https://grabient.com/retro-swatches)

## Other forms

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