# Terracotta and navy color palette

The Terracotta and navy color palette brings together orange, red, magenta, and blue. The colors span a moderate lightness range, combining moderate color with clear 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: Brown, orange and navy linear gradient
- Seed: `kYlVghVbDAeGtQXTJrwvRe5ayTuC`
- Page: https://grabient.com/kYlVghVbDAeGtQXTJrwvRe5ayTuC?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light center, warm, multicolor
- Hues: analogous
- Contrast of its darkest and lightest colors: 5.2 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 | `#b66338` | `oklch(58.66% 0.1213 46.41)` | Caramel Dream | black, 4.8 to 1 |
| 2 | `#b96539` | `oklch(59.56% 0.1228 46.76)` | Caramel Dream | black, 4.9 to 1 |
| 3 | `#be683b` | `oklch(60.79% 0.1251 47.16)` | Spiced Nut | black, 5.2 to 1 |
| 4 | `#c46c3c` | `oklch(62.25% 0.1278 47.67)` | Burnt Copper | black, 5.5 to 1 |
| 5 | `#ca713e` | `oklch(63.84% 0.1304 48.34)` | Hot Caramel | black, 5.9 to 1 |
| 6 | `#d07540` | `oklch(65.47% 0.1325 49.22)` | Striking Orange | black, 6.3 to 1 |
| 7 | `#d57a42` | `oklch(67.03% 0.1336 50.37)` | Maple Leaf | black, 6.7 to 1 |
| 8 | `#da8045` | `oklch(68.65% 0.1336 52.18)` | Seraphim Sepia | black, 7.1 to 1 |
| 9 | `#df8848` | `oklch(70.63% 0.1327 55.02)` | Touch of Glamour | black, 7.7 to 1 |
| 10 | `#e3904b` | `oklch(72.70% 0.1313 58.27)` | Jasper Orange | black, 8.3 to 1 |
| 11 | `#e79850` | `oklch(74.59% 0.1294 61.24)` | Butternut Pizazz | black, 9 to 1 |
| 12 | `#ea9e54` | `oklch(76.03% 0.1272 63.29)` | Pumpkin Pie | black, 9.5 to 1 |
| 13 | `#eba158` | `oklch(76.75% 0.1249 63.73)` | Doughnut | black, 9.7 to 1 |
| 14 | `#eaa05b` | `oklch(76.52% 0.1227 62.10)` | South Haven | black, 9.6 to 1 |
| 15 | `#e89c5d` | `oklch(75.45% 0.1206 58.86)` | Pumpkin Pie | black, 9.3 to 1 |
| 16 | `#e4955f` | `oklch(73.76% 0.1183 54.34)` | Outgoing Orange | black, 8.7 to 1 |
| 17 | `#de8d60` | `oklch(71.63% 0.1157 48.82)` | Copper Tan | black, 8 to 1 |
| 18 | `#d68462` | `oklch(69.24% 0.1126 42.54)` | King Salmon | black, 7.3 to 1 |
| 19 | `#ce7b65` | `oklch(66.78% 0.1088 35.79)` | Jaded Ginger | black, 6.6 to 1 |
| 20 | `#c57469` | `oklch(64.40% 0.1040 28.74)` | Peach Macaron | black, 6 to 1 |
| 21 | `#b96d6c` | `oklch(61.76% 0.0978 20.99)` | Terra Tone | black, 5.4 to 1 |
| 22 | `#ab666e` | `oklch(58.88% 0.0904 12.52)` | Berry Crush | black, 4.8 to 1 |
| 23 | `#9d5f6f` | `oklch(55.89% 0.0827 3.50)` | Tropical Hibiscus | white, 4.8 to 1 |
| 24 | `#8e596e` | `oklch(52.92% 0.0752 354.08)` | Majestic Orchid | white, 5.5 to 1 |
| 25 | `#80536d` | `oklch(50.10% 0.0688 344.44)` | Magnificence | white, 6.2 to 1 |
| 26 | `#734f6b` | `oklch(47.54% 0.0639 334.67)` | Dahlia Matte Red | white, 6.9 to 1 |
| 27 | `#664a69` | `oklch(45.05% 0.0606 323.66)` | Sultana | white, 7.6 to 1 |
| 28 | `#594566` | `oklch(42.57% 0.0582 311.53)` | Woad Purple | white, 8.4 to 1 |
| 29 | `#4d4163` | `oklch(40.23% 0.0565 299.26)` | Royal Indigo | white, 9.3 to 1 |
| 30 | `#413e5f` | `oklch(38.12% 0.0554 287.80)` | Mulberry Mauve Black | white, 10.1 to 1 |
| 31 | `#373b5b` | `oklch(36.35% 0.0546 278.11)` | Magic Night | white, 10.8 to 1 |
| 32 | `#303957` | `oklch(35.04% 0.0537 271.14)` | Mediaeval Blue | white, 11.3 to 1 |

## CSS

```css
background: linear-gradient(135deg, #b66338 0.0%, #b96539 3.2%, #be683b 6.5%, #c46c3c 9.7%, #ca713e 12.9%, #d07540 16.1%, #d57a42 19.4%, #da8045 22.6%, #df8848 25.8%, #e3904b 29.0%, #e79850 32.3%, #ea9e54 35.5%, #eba158 38.7%, #eaa05b 41.9%, #e89c5d 45.2%, #e4955f 48.4%, #de8d60 51.6%, #d68462 54.8%, #ce7b65 58.1%, #c57469 61.3%, #b96d6c 64.5%, #ab666e 67.7%, #9d5f6f 71.0%, #8e596e 74.2%, #80536d 77.4%, #734f6b 80.6%, #664a69 83.9%, #594566 87.1%, #4d4163 90.3%, #413e5f 93.5%, #373b5b 96.8%, #303957 100.0%);
background: linear-gradient(135deg in oklch, oklch(58.66% 0.1213 46.41) 0.0%, oklch(59.56% 0.1228 46.76) 3.2%, oklch(60.79% 0.1251 47.16) 6.5%, oklch(62.25% 0.1278 47.67) 9.7%, oklch(63.84% 0.1304 48.34) 12.9%, oklch(65.47% 0.1325 49.22) 16.1%, oklch(67.03% 0.1336 50.37) 19.4%, oklch(68.65% 0.1336 52.18) 22.6%, oklch(70.63% 0.1327 55.02) 25.8%, oklch(72.70% 0.1313 58.27) 29.0%, oklch(74.59% 0.1294 61.24) 32.3%, oklch(76.03% 0.1272 63.29) 35.5%, oklch(76.75% 0.1249 63.73) 38.7%, oklch(76.52% 0.1227 62.10) 41.9%, oklch(75.45% 0.1206 58.86) 45.2%, oklch(73.76% 0.1183 54.34) 48.4%, oklch(71.63% 0.1157 48.82) 51.6%, oklch(69.24% 0.1126 42.54) 54.8%, oklch(66.78% 0.1088 35.79) 58.1%, oklch(64.40% 0.1040 28.74) 61.3%, oklch(61.76% 0.0978 20.99) 64.5%, oklch(58.88% 0.0904 12.52) 67.7%, oklch(55.89% 0.0827 3.50) 71.0%, oklch(52.92% 0.0752 354.08) 74.2%, oklch(50.10% 0.0688 344.44) 77.4%, oklch(47.54% 0.0639 334.67) 80.6%, oklch(45.05% 0.0606 323.66) 83.9%, oklch(42.57% 0.0582 311.53) 87.1%, oklch(40.23% 0.0565 299.26) 90.3%, oklch(38.12% 0.0554 287.80) 93.5%, oklch(36.35% 0.0546 278.11) 96.8%, oklch(35.04% 0.0537 271.14) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.587 | 0.121 | 46.4 |
| 2 | 0.673 | 0.134 | 50.6 |
| 3 | 0.768 | 0.124 | 63.3 |
| 4 | 0.654 | 0.106 | 31.6 |
| 5 | 0.48 | 0.065 | -23.3 |
| 6 | 0.35 | 0.054 | -88.9 |

## In these collections

- [Sunset gradients](https://grabient.com/sunset-gradients)
- [Dusk gradients](https://grabient.com/dusk-gradients)
- [Sunrise gradients](https://grabient.com/sunrise-gradients)

## Other forms

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