# Clay and indigo bead colors

Brick red, warm terracotta orange, indigo blue, and clear turquoise meet in four angular wedges. The warm earth colors and cooler saturated accents suggest clay and colored beads, with strong boundaries between each swatch. This Afro bohemian palette works for textile graphics, handmade accessories packaging, and expressive editorial design.

- Also called: Brown, orange, navy and teal angular swatches
- Seed: `kUf1cY1jFBy2fLvRJrbg`
- Page: https://grabient.com/kUf1cY1jFBy2fLvRJrbg?style=angularSwatches&steps=4&angle=135
- Drawn as: angular swatches, 4 steps, 135 degrees
- Kinds: vivid, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 3.6 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 | `#9b4531` | `oklch(50.00% 0.1199 34.45)` | Burnt Earth | white, 6.3 to 1 |
| 2 | `#d87c43` | `oklch(67.72% 0.1350 50.30)` | Sweet Potato | black, 6.8 to 1 |
| 3 | `#283a69` | `oklch(35.83% 0.0854 266.59)` | Blue Depths | white, 11 to 1 |
| 4 | `#17a09a` | `oklch(63.78% 0.1061 190.50)` | Talismanic Teal | black, 6.5 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #9b4531 0.000% 25.000%, #d87c43 25.000% 50.000%, #283a69 50.000% 75.000%, #17a09a 75.000% 100.000%);
background: conic-gradient(from 135deg, oklch(50.00% 0.1199 34.45) 0.000% 25.000%, oklch(67.72% 0.1350 50.30) 25.000% 50.000%, oklch(35.83% 0.0854 266.59) 50.000% 75.000%, oklch(63.78% 0.1061 190.50) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.5 | 0.12 | 34.5 |
| 2 | 0.677 | 0.135 | 50.3 |
| 3 | 0.358 | 0.085 | -93.4 |
| 4 | 0.638 | 0.106 | -169.5 |

## In these collections

- [Afro bohemian](https://grabient.com/afro-bohemian)

## Other forms

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