# Cream peach navy diagonal

Beige, peach, blue and gray linear swatches with 5 colors: #ebdebc, #c78967, #ffd4be, #1f4f68, #617487. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Beige, peach, blue and gray linear swatches
- Seed: `kW5SI_1yC7XKVP8zmCtRg3Bg`
- Page: https://grabient.com/kW5SI_1yC7XKVP8zmCtRg3Bg?style=linearSwatches&steps=5&angle=45
- Drawn as: linear swatches, 5 steps, 45 degrees
- Hues: complementary
- Contrast of its darkest and lightest colors: 6.6 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 | `#ebdebc` | `oklch(90.16% 0.0469 89.30)` | Salt Steppe | black, 15.6 to 1 |
| 2 | `#c78967` | `oklch(68.50% 0.0896 50.20)` | Escalope | black, 7.2 to 1 |
| 3 | `#ffd4be` | `oklch(90.16% 0.0568 49.15)` | Mom’s Love | black, 15.4 to 1 |
| 4 | `#1f4f68` | `oklch(40.55% 0.0661 234.78)` | Seafarer | white, 8.8 to 1 |
| 5 | `#617487` | `oklch(55.12% 0.0372 248.51)` | Lost Atlantis | white, 4.8 to 1 |

## CSS

```css
background: linear-gradient(45deg, #ebdebc 0.000% 20.000%, #c78967 20.000% 40.000%, #ffd4be 40.000% 60.000%, #1f4f68 60.000% 80.000%, #617487 80.000% 100.000%);
background: linear-gradient(45deg, oklch(90.16% 0.0469 89.30) 0.000% 20.000%, oklch(68.50% 0.0896 50.20) 20.000% 40.000%, oklch(90.16% 0.0568 49.15) 40.000% 60.000%, oklch(40.55% 0.0661 234.78) 60.000% 80.000%, oklch(55.12% 0.0372 248.51) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.902 | 0.047 | 89.3 |
| 2 | 0.685 | 0.09 | 50.2 |
| 3 | 0.902 | 0.058 | 49.1 |
| 4 | 0.406 | 0.066 | -125.2 |
| 5 | 0.551 | 0.037 | -111.5 |

## In these collections

- [Teal and orange swatches](https://grabient.com/teal-and-orange-swatches)

## Other forms

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