# Cutout Bands palette

The Cutout Bands palette brings together dark gray, pale orange, teal, red, and gold. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits poster layouts and editorial spreads. Its darkest tone is dark gray, and its lightest tone is pale orange.

- Also called: Black, teal, red and yellow linear swatches
- Seed: `kWLQBAd4u_VOozPOSSw7z1II`
- Page: https://grabient.com/kWLQBAd4u_VOozPOSSw7z1II?style=linearSwatches&steps=5&angle=45
- Drawn as: linear swatches, 5 steps, 45 degrees
- Kinds: vivid
- Hues: two-hue
- Contrast of its darkest and lightest colors: 15.8 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 | `#111111` | `oklch(17.72% 0.0000 89.88)` | Dreamless Sleep | white, 18.8 to 1 |
| 2 | `#f5ead4` | `oklch(94.09% 0.0317 84.72)` | Good Morning Akihabara | black, 17.6 to 1 |
| 3 | `#05a6a6` | `oklch(65.75% 0.1116 194.62)` | Royal Cloak | black, 7 to 1 |
| 4 | `#e44139` | `oklch(61.42% 0.2012 27.65)` | Carpaccio | black, 5.1 to 1 |
| 5 | `#f4d533` | `oklch(87.40% 0.1681 97.40)` | Giallo | black, 14.4 to 1 |

## CSS

```css
background: linear-gradient(45deg, #111111 0.000% 20.000%, #f5ead4 20.000% 40.000%, #05a6a6 40.000% 60.000%, #e44139 60.000% 80.000%, #f4d533 80.000% 100.000%);
background: linear-gradient(45deg, oklch(17.72% 0.0000 89.88) 0.000% 20.000%, oklch(94.09% 0.0317 84.72) 20.000% 40.000%, oklch(65.75% 0.1116 194.62) 40.000% 60.000%, oklch(61.42% 0.2012 27.65) 60.000% 80.000%, oklch(87.40% 0.1681 97.40) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.177 | 0 | 90 |
| 2 | 0.941 | 0.032 | 84.7 |
| 3 | 0.657 | 0.112 | 194.6 |
| 4 | 0.614 | 0.201 | 27.7 |
| 5 | 0.874 | 0.168 | 97.4 |

## In these collections

- [Zine colors](https://grabient.com/zine-colors)

## Other forms

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