# Seamless black and pink linear swatches

Seamless black and pink linear swatches with 7 colors: #24030a, #bb5b7c, #ffb7d5, #e1b5c9, #6c5161, #2b111b, #1d0302. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWLCsH4zY-GgUv2mkD8E5JFQ`
- Page: https://grabient.com/kWLCsH4zY-GgUv2mkD8E5JFQ?style=linearSwatches&angle=160
- Drawn as: linear swatches, 7 steps, 160 degrees
- Kinds: light center, warm, seamless
- Hues: analogous
- Contrast of its darkest and lightest colors: 12.2 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 | `#24030a` | `oklch(17.32% 0.0593 10.55)` | Belladonna | white, 19.2 to 1 |
| 2 | `#bb5b7c` | `oklch(59.70% 0.1291 359.71)` | Tutti Frutti | black, 4.9 to 1 |
| 3 | `#ffb7d5` | `oklch(85.52% 0.0908 352.54)` | Candy Bar | black, 13 to 1 |
| 4 | `#e1b5c9` | `oklch(81.89% 0.0565 350.47)` | Mental Floss | black, 11.6 to 1 |
| 5 | `#6c5161` | `oklch(46.85% 0.0439 341.74)` | Dynamic | white, 7 to 1 |
| 6 | `#2b111b` | `oklch(22.06% 0.0448 355.99)` | Black Cherry | white, 17.5 to 1 |
| 7 | `#1d0302` | `oklch(15.35% 0.0496 28.51)` | Dwarf Fortress | white, 19.7 to 1 |

## CSS

```css
background: linear-gradient(160deg, #24030a 0.000% 14.286%, #bb5b7c 14.286% 28.571%, #ffb7d5 28.571% 42.857%, #e1b5c9 42.857% 57.143%, #6c5161 57.143% 71.429%, #2b111b 71.429% 85.714%, #1d0302 85.714% 100.000%);
background: linear-gradient(160deg, oklch(17.32% 0.0593 10.55) 0.000% 14.286%, oklch(59.70% 0.1291 359.71) 14.286% 28.571%, oklch(85.52% 0.0908 352.54) 28.571% 42.857%, oklch(81.89% 0.0565 350.47) 42.857% 57.143%, oklch(46.85% 0.0439 341.74) 57.143% 71.429%, oklch(22.06% 0.0448 355.99) 71.429% 85.714%, oklch(15.35% 0.0496 28.51) 85.714% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.173 | 0.059 | 10.5 |
| 2 | 0.78 | 0.149 | -5.3 |
| 3 | 0.819 | 0.056 | -9.5 |
| 4 | 0.303 | 0.044 | -16.9 |
| 5 | 0.154 | 0.05 | 28.5 |

## In these collections

- [Pink swatches](https://grabient.com/pink-swatches)

## Other forms

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