# Slate mint coral diagonal

Navy, gray and red linear gradient with 7 colors: #25214a, #305282, #5f9ab9, #a0c9bc, #dbbe8b, #fd824b, #f93c36. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Navy, gray and red linear gradient
- Seed: `kaRjbLN6C8lOcPRmEbj55s1F28O3SUj4A`
- Page: https://grabient.com/kaRjbLN6C8lOcPRmEbj55s1F28O3SUj4A?angle=45
- Drawn as: linear gradient, 7 steps, 45 degrees
- Kinds: light center
- Hues: complementary
- Contrast of its darkest and lightest colors: 8.4 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 | `#25214a` | `oklch(27.56% 0.0744 285.47)` | Black Market | white, 15 to 1 |
| 2 | `#305282` | `oklch(43.70% 0.0896 256.94)` | Galaxy Blue | white, 7.8 to 1 |
| 3 | `#5f9ab9` | `oklch(65.75% 0.0772 232.63)` | Shakespeare | black, 6.7 to 1 |
| 4 | `#a0c9bc` | `oklch(80.31% 0.0482 173.45)` | Cool Juniper | black, 11.6 to 1 |
| 5 | `#dbbe8b` | `oklch(81.50% 0.0744 81.52)` | Honey Tea | black, 11.7 to 1 |
| 6 | `#fd824b` | `oklch(73.62% 0.1654 43.47)` | Sè Lèi Orange | black, 8.4 to 1 |
| 7 | `#f93c36` | `oklch(64.57% 0.2260 27.62)` | Flamboyant | black, 5.7 to 1 |

## CSS

```css
background: linear-gradient(45deg, #25214a 0.0%, #305282 16.7%, #5f9ab9 33.3%, #a0c9bc 50.0%, #dbbe8b 66.7%, #fd824b 83.3%, #f93c36 100.0%);
background: linear-gradient(45deg in oklch, oklch(27.56% 0.0744 285.47) 0.0%, oklch(43.70% 0.0896 256.94) 16.7%, oklch(65.75% 0.0772 232.63) 33.3%, oklch(80.31% 0.0482 173.45) 50.0%, oklch(81.50% 0.0744 81.52) 66.7%, oklch(73.62% 0.1654 43.47) 83.3%, oklch(64.57% 0.2260 27.62) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.276 | 0.074 | 285.5 |
| 2 | 0.437 | 0.09 | 256.9 |
| 3 | 0.657 | 0.077 | 232.6 |
| 4 | 0.803 | 0.048 | 173.5 |
| 5 | 0.815 | 0.074 | 81.5 |
| 6 | 0.736 | 0.165 | 43.5 |
| 7 | 0.646 | 0.226 | 27.6 |

## In these collections

- [Sun bleached pool tiles](https://grabient.com/sun-bleached-pool-tiles)
- [Orange and blue gradients](https://grabient.com/orange-and-blue-gradients)

## Other forms

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