# Black, gray, pink and light blue angular swatches

Black, gray, pink and light blue angular swatches with 28 colors: #293024, #2e3528, #353b2d, #3e4334, #484b3b, #535543, #5f5e4c, #6b6854, #79725d, #867b64, #96846d, #a78d77, #b99684, #cc9f95, #dda9a8, #eab2be, #f5bbd5, #fbc4ea, #fecbfc, #f5d7ff, #f0deff, #ece1ff, #e8e2ff, #e4e2ff, #e0e1ff, #dce0ff, #d9e0ff, #d7e0ff. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUTBJeyo06PKfMhzsDlg`
- Page: https://grabient.com/kUTBJeyo06PKfMhzsDlg?style=angularSwatches&steps=28&angle=0
- Drawn as: angular swatches, 28 steps, 0 degrees
- Kinds: dark to light, pastel
- Hues: wide
- Contrast of its darkest and lightest colors: 10.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 | `#293024` | `oklch(29.92% 0.0248 132.89)` | Pine Tree | white, 13.5 to 1 |
| 2 | `#2e3528` | `oklch(31.84% 0.0253 130.00)` | Aimiru Brown | white, 12.6 to 1 |
| 3 | `#353b2d` | `oklch(34.32% 0.0258 126.67)` | El Paso | white, 11.5 to 1 |
| 4 | `#3e4334` | `oklch(37.27% 0.0262 122.83)` | Garden Path | white, 10.2 to 1 |
| 5 | `#484b3b` | `oklch(40.57% 0.0268 118.39)` | Treasure Island | white, 8.9 to 1 |
| 6 | `#535543` | `oklch(44.12% 0.0277 113.26)` | Freshwater Marsh | white, 7.6 to 1 |
| 7 | `#5f5e4c` | `oklch(47.81% 0.0289 107.37)` | Stump Green | white, 6.5 to 1 |
| 8 | `#6b6854` | `oklch(51.54% 0.0306 100.63)` | Aged Jade | white, 5.5 to 1 |
| 9 | `#79725d` | `oklch(55.19% 0.0328 92.96)` | Pablo | white, 4.8 to 1 |
| 10 | `#867b64` | `oklch(58.66% 0.0358 84.28)` | Pie Safe | black, 5 to 1 |
| 11 | `#96846d` | `oklch(62.21% 0.0397 73.92)` | Wild Hawk | black, 5.7 to 1 |
| 12 | `#a78d77` | `oklch(66.07% 0.0443 61.63)` | Nearly Brown | black, 6.7 to 1 |
| 13 | `#b99684` | `oklch(70.09% 0.0496 47.96)` | Brush | black, 7.7 to 1 |
| 14 | `#cc9f95` | `oklch(74.16% 0.0554 33.44)` | Musk | black, 8.9 to 1 |
| 15 | `#dda9a8` | `oklch(78.11% 0.0615 18.61)` | Peach Poppy | black, 10.2 to 1 |
| 16 | `#eab2be` | `oklch(81.83% 0.0677 4.01)` | Frozen Veins | black, 11.6 to 1 |
| 17 | `#f5bbd5` | `oklch(85.17% 0.0739 350.18)` | Dahlia Delight | black, 12.9 to 1 |
| 18 | `#fbc4ea` | `oklch(87.99% 0.0798 337.65)` | Sugarwinkle | black, 14.1 to 1 |
| 19 | `#fecbfc` | `oklch(90.16% 0.0854 326.98)` | Sugar Chic | black, 15.1 to 1 |
| 20 | `#f5d7ff` | `oklch(91.60% 0.0627 317.84)` | Lavender Savour | black, 16 to 1 |
| 21 | `#f0deff` | `oklch(92.41% 0.0485 309.53)` | Lavender Savour | black, 16.5 to 1 |
| 22 | `#ece1ff` | `oklch(92.72% 0.0419 302.02)` | Lavender Savour | black, 16.7 to 1 |
| 23 | `#e8e2ff` | `oklch(92.66% 0.0394 295.27)` | Stoic White | black, 16.7 to 1 |
| 24 | `#e4e2ff` | `oklch(92.33% 0.0393 289.26)` | Stoic White | black, 16.6 to 1 |
| 25 | `#e0e1ff` | `oklch(91.88% 0.0404 283.97)` | Stoic White | black, 16.4 to 1 |
| 26 | `#dce0ff` | `oklch(91.41% 0.0419 279.35)` | Stoic White | black, 16.1 to 1 |
| 27 | `#d9e0ff` | `oklch(91.06% 0.0432 275.38)` | Contrail | black, 16 to 1 |
| 28 | `#d7e0ff` | `oklch(90.94% 0.0435 272.03)` | Contrail | black, 15.9 to 1 |

## CSS

```css
background: conic-gradient(from 0deg, #293024 0.000% 3.571%, #2e3528 3.571% 7.143%, #353b2d 7.143% 10.714%, #3e4334 10.714% 14.286%, #484b3b 14.286% 17.857%, #535543 17.857% 21.429%, #5f5e4c 21.429% 25.000%, #6b6854 25.000% 28.571%, #79725d 28.571% 32.143%, #867b64 32.143% 35.714%, #96846d 35.714% 39.286%, #a78d77 39.286% 42.857%, #b99684 42.857% 46.429%, #cc9f95 46.429% 50.000%, #dda9a8 50.000% 53.571%, #eab2be 53.571% 57.143%, #f5bbd5 57.143% 60.714%, #fbc4ea 60.714% 64.286%, #fecbfc 64.286% 67.857%, #f5d7ff 67.857% 71.429%, #f0deff 71.429% 75.000%, #ece1ff 75.000% 78.571%, #e8e2ff 78.571% 82.143%, #e4e2ff 82.143% 85.714%, #e0e1ff 85.714% 89.286%, #dce0ff 89.286% 92.857%, #d9e0ff 92.857% 96.429%, #d7e0ff 96.429% 100.000%);
background: conic-gradient(from 0deg, oklch(29.92% 0.0248 132.89) 0.000% 3.571%, oklch(31.84% 0.0253 130.00) 3.571% 7.143%, oklch(34.32% 0.0258 126.67) 7.143% 10.714%, oklch(37.27% 0.0262 122.83) 10.714% 14.286%, oklch(40.57% 0.0268 118.39) 14.286% 17.857%, oklch(44.12% 0.0277 113.26) 17.857% 21.429%, oklch(47.81% 0.0289 107.37) 21.429% 25.000%, oklch(51.54% 0.0306 100.63) 25.000% 28.571%, oklch(55.19% 0.0328 92.96) 28.571% 32.143%, oklch(58.66% 0.0358 84.28) 32.143% 35.714%, oklch(62.21% 0.0397 73.92) 35.714% 39.286%, oklch(66.07% 0.0443 61.63) 39.286% 42.857%, oklch(70.09% 0.0496 47.96) 42.857% 46.429%, oklch(74.16% 0.0554 33.44) 46.429% 50.000%, oklch(78.11% 0.0615 18.61) 50.000% 53.571%, oklch(81.83% 0.0677 4.01) 53.571% 57.143%, oklch(85.17% 0.0739 350.18) 57.143% 60.714%, oklch(87.99% 0.0798 337.65) 60.714% 64.286%, oklch(90.16% 0.0854 326.98) 64.286% 67.857%, oklch(91.60% 0.0627 317.84) 67.857% 71.429%, oklch(92.41% 0.0485 309.53) 71.429% 75.000%, oklch(92.72% 0.0419 302.02) 75.000% 78.571%, oklch(92.66% 0.0394 295.27) 78.571% 82.143%, oklch(92.33% 0.0393 289.26) 82.143% 85.714%, oklch(91.88% 0.0404 283.97) 85.714% 89.286%, oklch(91.41% 0.0419 279.35) 89.286% 92.857%, oklch(91.06% 0.0432 275.38) 92.857% 96.429%, oklch(90.94% 0.0435 272.03) 96.429% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.299 | 0.025 | 132.9 |
| 2 | 0.587 | 0.036 | 84.3 |
| 3 | 0.902 | 0.085 | -33 |
| 4 | 0.909 | 0.132 | -88 |

## Other forms

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