# Near-black, mauve and pale periwinkle color palette

The Near-black, mauve and pale periwinkle color palette brings together dark green, green, blue, dark blue, and light blue. The colors span a broad lightness range, combining restrained color with clear contrast. Its balanced and composed character suits holiday stationery and seasonal displays. Its darkest tone is dark green, and its lightest tone is light blue.

- Also called: Dark green, gray and navy angular swatches
- Seed: `kWNS9qqxtA7MMyQgEML7ozEA`
- Page: https://grabient.com/kWNS9qqxtA7MMyQgEML7ozEA?style=angularSwatches&steps=5&angle=30
- Drawn as: angular swatches, 5 steps, 30 degrees
- Kinds: dark center, dark, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 11.7 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 | `#001f08` | `oklch(20.89% 0.0582 149.53)` | Clock Chimes Thirteen | white, 17.5 to 1 |
| 2 | `#074328` | `oklch(33.86% 0.0744 158.22)` | Lost in the Woods | white, 11.4 to 1 |
| 3 | `#364b58` | `oklch(40.16% 0.0344 235.36)` | Sailor’s Coat | white, 9 to 1 |
| 4 | `#152238` | `oklch(25.20% 0.0455 260.72)` | Kon | white, 15.9 to 1 |
| 5 | `#d6d0e9` | `oklch(87.01% 0.0344 295.60)` | Air Castle | black, 14 to 1 |

## CSS

```css
background: conic-gradient(from 30deg, #001f08 0.000% 20.000%, #074328 20.000% 40.000%, #364b58 40.000% 60.000%, #152238 60.000% 80.000%, #d6d0e9 80.000% 100.000%);
background: conic-gradient(from 30deg, oklch(20.89% 0.0582 149.53) 0.000% 20.000%, oklch(33.86% 0.0744 158.22) 20.000% 40.000%, oklch(40.16% 0.0344 235.36) 40.000% 60.000%, oklch(25.20% 0.0455 260.72) 60.000% 80.000%, oklch(87.01% 0.0344 295.60) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.209 | 0.065 | 149.8 |
| 2 | 0.339 | 0.074 | 158.2 |
| 3 | 0.402 | 0.034 | 235.4 |
| 4 | 0.252 | 0.045 | 260.7 |
| 5 | 0.87 | 0.034 | 295.6 |

## In these collections

- [Winter swatches](https://grabient.com/winter-swatches)
- [Winter](https://grabient.com/winter)

## Other forms

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