# Terracotta, turquoise and near-black color palette

The Terracotta, turquoise and near-black color palette brings together orange, yellow, teal, blue, and dark blue. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is dark blue, and its lightest tone is yellow.

- Also called: Brown, gray, teal and navy linear gradient
- Seed: `kamzkm1gtFdWRyrLHcJuB9B6KaQgOlEGg`
- Page: https://grabient.com/kamzkm1gtFdWRyrLHcJuB9B6KaQgOlEGg
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, vivid, cool
- Hues: complementary
- Contrast of its darkest and lightest colors: 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 | `#a87655` | `oklch(61.02% 0.0785 54.14)` | New England Roast | black, 5.4 to 1 |
| 2 | `#9b9883` | `oklch(67.72% 0.0303 100.64)` | Into the Wild | black, 7.2 to 1 |
| 3 | `#74a09d` | `oklch(67.32% 0.0482 191.52)` | Delaware Blue Hen | black, 7.2 to 1 |
| 4 | `#398a9a` | `oklch(59.06% 0.0813 212.65)` | Seachange | black, 5.2 to 1 |
| 5 | `#065b78` | `oklch(44.09% 0.0854 229.56)` | Ink Blue | white, 7.5 to 1 |
| 6 | `#002848` | `oklch(27.17% 0.0717 247.53)` | Rhapsody in Blue | white, 14.9 to 1 |
| 7 | `#000319` | `oklch(11.43% 0.0550 262.51)` | Hadopelagic Water | white, 20.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #a87655 0.0%, #9b9883 16.7%, #74a09d 33.3%, #398a9a 50.0%, #065b78 66.7%, #002848 83.3%, #000319 100.0%);
background: linear-gradient(90deg in oklch, oklch(61.02% 0.0785 54.14) 0.0%, oklch(67.72% 0.0303 100.64) 16.7%, oklch(67.32% 0.0482 191.52) 33.3%, oklch(59.06% 0.0813 212.65) 50.0%, oklch(44.09% 0.0854 229.56) 66.7%, oklch(27.17% 0.0717 247.53) 83.3%, oklch(11.43% 0.0550 262.51) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.61 | 0.079 | 54.1 |
| 2 | 0.677 | 0.03 | 100.6 |
| 3 | 0.673 | 0.048 | 191.5 |
| 4 | 0.591 | 0.081 | 212.7 |
| 5 | 0.441 | 0.085 | 229.6 |
| 6 | 0.272 | 0.072 | 247.5 |
| 7 | 0.114 | 0.055 | 262.3 |

## In these collections

- [App background gradients](https://grabient.com/app-background-gradients)
- [Coastal gradients](https://grabient.com/coastal-gradients)
- [Retro gradients](https://grabient.com/retro-gradients)
- [Desktop wallpaper gradients](https://grabient.com/desktop-wallpaper-gradients)

## Other forms

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