# Cream mauve navy bands

Tritone navy, purple and beige linear swatches with 21 colors: #0f2144, #162448, #1f284c, #292d50, #353255, #41385a, #4f405f, #5e4963, #6d5368, #7b5e6d, #896972, #967477, #a4807d, #b18c82, #bd9786, #c6a38b, #cdae8f, #d3b895, #d8c29a, #dbca9f, #ddd0a4. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Tritone navy, purple and beige linear swatches
- Seed: `kWQTO6LpVD8aPx5eE8abRZEY`
- Page: https://grabient.com/kWQTO6LpVD8aPx5eE8abRZEY?style=linearSwatches&steps=21&angle=0
- Drawn as: linear swatches, 21 steps, 0 degrees
- Kinds: dark to light, muted
- Hues: wide
- Contrast of its darkest and lightest colors: 10.3 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 | `#0f2144` | `oklch(25.59% 0.0703 261.56)` | Dark Eclipse | white, 15.8 to 1 |
| 2 | `#162448` | `oklch(26.96% 0.0686 265.67)` | Dark Eclipse | white, 15.2 to 1 |
| 3 | `#1f284c` | `oklch(28.83% 0.0663 271.18)` | Rurikon Blue | white, 14.3 to 1 |
| 4 | `#292d50` | `oklch(31.11% 0.0636 278.02)` | Lucky Point | white, 13.2 to 1 |
| 5 | `#353255` | `oklch(33.73% 0.0607 286.11)` | Haunted Dreams | white, 12 to 1 |
| 6 | `#41385a` | `oklch(36.61% 0.0579 295.38)` | Magic Night | white, 10.8 to 1 |
| 7 | `#4f405f` | `oklch(39.90% 0.0546 306.44)` | Royal Indigo | white, 9.4 to 1 |
| 8 | `#5e4963` | `oklch(43.63% 0.0508 319.36)` | Plush Purple | white, 8 to 1 |
| 9 | `#6d5368` | `oklch(47.60% 0.0470 333.19)` | Hibernation | white, 6.8 to 1 |
| 10 | `#7b5e6d` | `oklch(51.63% 0.0441 347.00)` | Black Plum | white, 5.7 to 1 |
| 11 | `#896972` | `oklch(55.51% 0.0427 359.84)` | Grape Shake | white, 4.8 to 1 |
| 12 | `#967477` | `oklch(59.34% 0.0433 11.87)` | March Pink | black, 5 to 1 |
| 13 | `#a4807d` | `oklch(63.26% 0.0454 23.71)` | Cherry Mocha | black, 5.9 to 1 |
| 14 | `#b18c82` | `oklch(67.11% 0.0484 35.14)` | Western Ridge | black, 6.9 to 1 |
| 15 | `#bd9786` | `oklch(70.75% 0.0514 45.93)` | Cinnamon Roast | black, 7.9 to 1 |
| 16 | `#c6a38b` | `oklch(74.02% 0.0537 55.85)` | Peanut Butter Crust | black, 8.9 to 1 |
| 17 | `#cdae8f` | `oklch(77.00% 0.0555 65.22)` | Woven Navajo | black, 10 to 1 |
| 18 | `#d3b895` | `oklch(79.79% 0.0571 74.18)` | Brown Hare | black, 11 to 1 |
| 19 | `#d8c29a` | `oklch(82.27% 0.0586 82.28)` | Natural Twine | black, 12.1 to 1 |
| 20 | `#dbca9f` | `oklch(84.33% 0.0598 89.00)` | Ground Ginger | black, 12.9 to 1 |
| 21 | `#ddd0a4` | `oklch(85.83% 0.0606 93.89)` | Summer Solstice | black, 13.6 to 1 |

## CSS

```css
background: linear-gradient(0deg, #0f2144 0.000% 4.762%, #162448 4.762% 9.524%, #1f284c 9.524% 14.286%, #292d50 14.286% 19.048%, #353255 19.048% 23.810%, #41385a 23.810% 28.571%, #4f405f 28.571% 33.333%, #5e4963 33.333% 38.095%, #6d5368 38.095% 42.857%, #7b5e6d 42.857% 47.619%, #896972 47.619% 52.381%, #967477 52.381% 57.143%, #a4807d 57.143% 61.905%, #b18c82 61.905% 66.667%, #bd9786 66.667% 71.429%, #c6a38b 71.429% 76.190%, #cdae8f 76.190% 80.952%, #d3b895 80.952% 85.714%, #d8c29a 85.714% 90.476%, #dbca9f 90.476% 95.238%, #ddd0a4 95.238% 100.000%);
background: linear-gradient(0deg, oklch(25.59% 0.0703 261.56) 0.000% 4.762%, oklch(26.96% 0.0686 265.67) 4.762% 9.524%, oklch(28.83% 0.0663 271.18) 9.524% 14.286%, oklch(31.11% 0.0636 278.02) 14.286% 19.048%, oklch(33.73% 0.0607 286.11) 19.048% 23.810%, oklch(36.61% 0.0579 295.38) 23.810% 28.571%, oklch(39.90% 0.0546 306.44) 28.571% 33.333%, oklch(43.63% 0.0508 319.36) 33.333% 38.095%, oklch(47.60% 0.0470 333.19) 38.095% 42.857%, oklch(51.63% 0.0441 347.00) 42.857% 47.619%, oklch(55.51% 0.0427 359.84) 47.619% 52.381%, oklch(59.34% 0.0433 11.87) 52.381% 57.143%, oklch(63.26% 0.0454 23.71) 57.143% 61.905%, oklch(67.11% 0.0484 35.14) 61.905% 66.667%, oklch(70.75% 0.0514 45.93) 66.667% 71.429%, oklch(74.02% 0.0537 55.85) 71.429% 76.190%, oklch(77.00% 0.0555 65.22) 76.190% 80.952%, oklch(79.79% 0.0571 74.18) 80.952% 85.714%, oklch(82.27% 0.0586 82.28) 85.714% 90.476%, oklch(84.33% 0.0598 89.00) 90.476% 95.238%, oklch(85.83% 0.0606 93.89) 95.238% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.256 | 0.07 | 261.6 |
| 2 | 0.366 | 0.058 | 295.4 |
| 3 | 0.555 | 0.043 | 359.8 |
| 4 | 0.74 | 0.054 | 415.8 |
| 5 | 0.858 | 0.061 | 453.9 |

## In these collections

- [Dusk swatches](https://grabient.com/dusk-swatches)

## Other forms

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