# Terracotta Cobalt Taupe Modern Swatches

This modern palette pairs ivory and taupe with muted terracotta, cobalt blue, and charcoal. Its saved angular swatch view divides the colors into five crisp facets, balancing warm and cool accents with a dark anchor for a tailored mood suited to packaging concepts and contemporary interior design boards.

- Also called: Gray, brown, blue and black angular swatches
- Seed: `kW6Q0_wCe5TYoMQhhb63I-rw`
- Page: https://grabient.com/kW6Q0_wCe5TYoMQhhb63I-rw?style=angularSwatches&steps=5&angle=135
- Drawn as: angular swatches, 5 steps, 135 degrees
- Kinds: dark center, muted
- Hues: two-hue
- Contrast of its darkest and lightest colors: 12 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 | `#e8e3d7` | `oklch(91.73% 0.0179 89.30)` | Elusive White | black, 16.4 to 1 |
| 2 | `#984a39` | `oklch(50.39% 0.1089 33.29)` | Dark Marmalade | white, 6.2 to 1 |
| 3 | `#344a8a` | `oklch(42.52% 0.1102 267.54)` | Blue Highlight | white, 8.4 to 1 |
| 4 | `#20252c` | `oklch(26.38% 0.0152 256.97)` | Dark Gunmetal | white, 15.3 to 1 |
| 5 | `#b3a689` | `oklch(72.83% 0.0427 86.83)` | Safari | black, 8.7 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #e8e3d7 0.000% 20.000%, #984a39 20.000% 40.000%, #344a8a 40.000% 60.000%, #20252c 60.000% 80.000%, #b3a689 80.000% 100.000%);
background: conic-gradient(from 135deg, oklch(91.73% 0.0179 89.30) 0.000% 20.000%, oklch(50.39% 0.1089 33.29) 20.000% 40.000%, oklch(42.52% 0.1102 267.54) 40.000% 60.000%, oklch(26.38% 0.0152 256.97) 60.000% 80.000%, oklch(72.83% 0.0427 86.83) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.917 | 0.018 | 89.3 |
| 2 | 0.504 | 0.109 | 33.3 |
| 3 | 0.425 | 0.11 | -92.5 |
| 4 | 0.264 | 0.015 | -103 |
| 5 | 0.728 | 0.043 | -273.2 |

## In these collections

- [Modern swatches](https://grabient.com/modern-swatches)

## Other forms

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