# Navy, mauve and terracotta indigo yukata palette

The Navy, mauve and terracotta indigo yukata palette brings together dark blue, blue, red, and orange. The colors span a moderate lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is orange.

- Also called: Navy and brown linear swatches
- Seed: `kYQBm0JxrCDCbQg6kkmRaVFk4rQC`
- Page: https://grabient.com/kYQBm0JxrCDCbQg6kkmRaVFk4rQC?style=linearSwatches&steps=6&angle=180
- Drawn as: linear swatches, 6 steps, 180 degrees
- Kinds: dark to light, muted
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 4.1 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 | `#162332` | `oklch(25.20% 0.0344 253.12)` | Fog of War | white, 15.8 to 1 |
| 2 | `#222c54` | `oklch(30.71% 0.0730 271.09)` | Pico Void | white, 13.4 to 1 |
| 3 | `#423b68` | `oklch(38.19% 0.0744 289.05)` | Opera Blue | white, 10.1 to 1 |
| 4 | `#714d52` | `oklch(46.06% 0.0496 10.42)` | Madder | white, 7.2 to 1 |
| 5 | `#9d602e` | `oklch(54.72% 0.1020 57.98)` | Cathay Spice | white, 5 to 1 |
| 6 | `#b77131` | `oklch(61.42% 0.1185 60.09)` | Copper | black, 5.4 to 1 |

## CSS

```css
background: linear-gradient(180deg, #162332 0.000% 16.667%, #222c54 16.667% 33.333%, #423b68 33.333% 50.000%, #714d52 50.000% 66.667%, #9d602e 66.667% 83.333%, #b77131 83.333% 100.000%);
background: linear-gradient(180deg, oklch(25.20% 0.0344 253.12) 0.000% 16.667%, oklch(30.71% 0.0730 271.09) 16.667% 33.333%, oklch(38.19% 0.0744 289.05) 33.333% 50.000%, oklch(46.06% 0.0496 10.42) 50.000% 66.667%, oklch(54.72% 0.1020 57.98) 66.667% 83.333%, oklch(61.42% 0.1185 60.09) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.252 | 0.034 | 253.1 |
| 2 | 0.307 | 0.073 | 271.1 |
| 3 | 0.382 | 0.074 | 289.1 |
| 4 | 0.461 | 0.05 | 370.4 |
| 5 | 0.547 | 0.102 | 418 |
| 6 | 0.614 | 0.119 | 420.1 |

## In these collections

- [Indigo yukata](https://grabient.com/indigo-yukata)

## Other forms

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