# Navy, teal, gray and peach linear swatches

Navy, teal, gray and peach linear swatches with 7 colors: #172c55, #4a9eb7, #7fc9bc, #7d9b86, #cacbab, #f2d6b2, #e8b18f. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWTDq7ZSA4NQROtykTg5hy7w`
- Page: https://grabient.com/kWTDq7ZSA4NQROtykTg5hy7w?style=linearSwatches&angle=160
- Drawn as: linear swatches, 7 steps, 160 degrees
- Kinds: light center, pastel
- Hues: wide
- Contrast of its darkest and lightest colors: 9.8 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 | `#172c55` | `oklch(29.92% 0.0799 262.97)` | Pico Void | white, 13.7 to 1 |
| 2 | `#4a9eb7` | `oklch(65.82% 0.0888 220.07)` | Rushing Rapids | black, 6.8 to 1 |
| 3 | `#7fc9bc` | `oklch(78.35% 0.0766 182.19)` | Hawaiian Vacation | black, 10.9 to 1 |
| 4 | `#7d9b86` | `oklch(66.14% 0.0469 154.12)` | Parisian Patina | black, 6.9 to 1 |
| 5 | `#cacbab` | `oklch(83.28% 0.0430 109.00)` | Thistle Green | black, 12.6 to 1 |
| 6 | `#f2d6b2` | `oklch(89.02% 0.0562 73.42)` | Inviting Ivory | black, 15 to 1 |
| 7 | `#e8b18f` | `oklch(80.31% 0.0785 53.73)` | Ancient Inca | black, 11.1 to 1 |

## CSS

```css
background: linear-gradient(160deg, #172c55 0.000% 14.286%, #4a9eb7 14.286% 28.571%, #7fc9bc 28.571% 42.857%, #7d9b86 42.857% 57.143%, #cacbab 57.143% 71.429%, #f2d6b2 71.429% 85.714%, #e8b18f 85.714% 100.000%);
background: linear-gradient(160deg, oklch(29.92% 0.0799 262.97) 0.000% 14.286%, oklch(65.82% 0.0888 220.07) 14.286% 28.571%, oklch(78.35% 0.0766 182.19) 28.571% 42.857%, oklch(66.14% 0.0469 154.12) 42.857% 57.143%, oklch(83.28% 0.0430 109.00) 57.143% 71.429%, oklch(89.02% 0.0562 73.42) 71.429% 85.714%, oklch(80.31% 0.0785 53.73) 85.714% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.299 | 0.08 | 263 |
| 2 | 0.795 | 0.088 | 197.5 |
| 3 | 0.661 | 0.047 | 154.1 |
| 4 | 0.902 | 0.047 | 88.6 |
| 5 | 0.803 | 0.079 | 53.7 |

## In these collections

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

## Other forms

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