# Stone, near-black and turquoise color palette

The Stone, near-black and turquoise color palette brings together off-white, gray, black, red, and teal. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits game interface concepts and stream graphics. Its darkest tone is black, and its lightest tone is off-white.

- Also called: White, black, red and blue linear swatches
- Seed: `kW7wYSSYW_48Ev_D0D_27Mqo`
- Page: https://grabient.com/kW7wYSSYW_48Ev_D0D_27Mqo?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: dark center, muted
- Hues: two-hue
- Contrast of its darkest and lightest colors: 17 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 | `#f1e9e9` | `oklch(94.09% 0.0083 25.31)` | Frosty Morning | black, 17.6 to 1 |
| 2 | `#837775` | `oklch(57.87% 0.0152 25.31)` | Complex Grey | black, 4.8 to 1 |
| 3 | `#090404` | `oklch(11.81% 0.0124 25.31)` | Pupil | white, 20.3 to 1 |
| 4 | `#cc001f` | `oklch(53.16% 0.2157 25.33)` | Fierce Red | white, 5.8 to 1 |
| 5 | `#00baca` | `oklch(72.05% 0.1232 205.67)` | Utopia Beckons | black, 8.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f1e9e9 0.000% 20.000%, #837775 20.000% 40.000%, #090404 40.000% 60.000%, #cc001f 60.000% 80.000%, #00baca 80.000% 100.000%);
background: linear-gradient(90deg, oklch(94.09% 0.0083 25.31) 0.000% 20.000%, oklch(57.87% 0.0152 25.31) 20.000% 40.000%, oklch(11.81% 0.0124 25.31) 40.000% 60.000%, oklch(53.16% 0.2157 25.33) 60.000% 80.000%, oklch(72.05% 0.1232 205.67) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.941 | 0.008 | 25.3 |
| 2 | 0.579 | 0.015 | 25.3 |
| 3 | 0.118 | 0.012 | 25.3 |
| 4 | 0.531 | 0.22 | 25.3 |
| 5 | 0.72 | 0.141 | -154.3 |

## In these collections

- [Control Resonant swatches](https://grabient.com/control-resonant-swatches)
- [Cyberpunk swatches](https://grabient.com/cyberpunk-swatches)

## Other forms

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