# Ochre, cobalt blue and mauve indigo yukata

The Ochre, cobalt blue and mauve indigo yukata brings together orange, blue, and magenta. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is orange.

- Also called: Tritone tan, navy and purple angular swatches
- Seed: `kUtz47spQq8kVP0_EclA`
- Page: https://grabient.com/kUtz47spQq8kVP0_EclA?style=angularSwatches&steps=4&angle=225
- Drawn as: angular swatches, 4 steps, 225 degrees
- Kinds: muted
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.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 | `#bea065` | `oklch(72.05% 0.0854 83.67)` | Desert Moss | black, 8.4 to 1 |
| 2 | `#394665` | `oklch(39.76% 0.0551 266.14)` | Garnet Stone Blue | white, 9.3 to 1 |
| 3 | `#65799c` | `oklch(57.48% 0.0579 260.85)` | Chicory Flower | black, 4.7 to 1 |
| 4 | `#75586b` | `oklch(49.61% 0.0482 340.11)` | Exotic Orchid | white, 6.2 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #bea065 0.000% 25.000%, #394665 25.000% 50.000%, #65799c 50.000% 75.000%, #75586b 75.000% 100.000%);
background: conic-gradient(from 225deg, oklch(72.05% 0.0854 83.67) 0.000% 25.000%, oklch(39.76% 0.0551 266.14) 25.000% 50.000%, oklch(57.48% 0.0579 260.85) 50.000% 75.000%, oklch(49.61% 0.0482 340.11) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.72 | 0.085 | 83.7 |
| 2 | 0.398 | 0.055 | -93.9 |
| 3 | 0.575 | 0.058 | -99.1 |
| 4 | 0.496 | 0.048 | -19.9 |

## In these collections

- [Indigo yukata](https://grabient.com/indigo-yukata)
- [Navy and gold](https://grabient.com/navy-and-gold)

## Other forms

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