# Blue and terracotta tetradic palette

The Blue and terracotta tetradic palette brings together blue, teal, green, gold, orange, red, and magenta. 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 gold.

- Also called: Seamless rainbow angular gradient
- Seed: `kcYkq_Rx45k6huNeqjl2TI7cewO87ojhMKa5w`
- Page: https://grabient.com/kcYkq_Rx45k6huNeqjl2TI7cewO87ojhMKa5w?style=angularGradient&steps=32&angle=135
- Drawn as: angular gradient, 32 steps, 135 degrees
- Kinds: light center, rainbow, seamless
- Hues: complementary
- Contrast of its darkest and lightest colors: 4.5 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 | `#2d3f7a` | `oklch(38.58% 0.1020 268.59)` | Mazarine Blue | white, 9.9 to 1 |
| 2 | `#2b4b81` | `oklch(41.55% 0.0983 260.20)` | Coastal Surf | white, 8.7 to 1 |
| 3 | `#285b89` | `oklch(45.87% 0.0929 248.27)` | Dead Lake | white, 7.1 to 1 |
| 4 | `#286c8f` | `oklch(50.55% 0.0874 234.45)` | Ocean Call | white, 5.7 to 1 |
| 5 | `#2b7b92` | `oklch(54.61% 0.0835 220.39)` | Turkish Stone | white, 4.7 to 1 |
| 6 | `#2f8591` | `oklch(57.18% 0.0824 207.20)` | River Fountain | black, 4.9 to 1 |
| 7 | `#328c8a` | `oklch(58.57% 0.0834 193.58)` | Taos Turquoise | black, 5.2 to 1 |
| 8 | `#398f80` | `oklch(59.44% 0.0858 179.67)` | Perky | black, 5.4 to 1 |
| 9 | `#469275` | `oklch(60.42% 0.0892 165.89)` | Winter Green | black, 5.6 to 1 |
| 10 | `#58976b` | `oklch(62.12% 0.0929 152.60)` | Endless | black, 6 to 1 |
| 11 | `#6f9e64` | `oklch(65.01% 0.0974 139.49)` | Green Hornet | black, 6.7 to 1 |
| 12 | `#89a65e` | `oklch(68.50% 0.1029 126.51)` | Chelsea Cucumber | black, 7.6 to 1 |
| 13 | `#a3ac58` | `oklch(71.79% 0.1086 114.07)` | Stay in Lime | black, 8.5 to 1 |
| 14 | `#b9ae52` | `oklch(74.06% 0.1142 102.57)` | Dill Green | black, 9.2 to 1 |
| 15 | `#c8ab4b` | `oklch(74.77% 0.1197 92.38)` | Gooseberry Yellow | black, 9.3 to 1 |
| 16 | `#d2a442` | `oklch(74.40% 0.1256 83.41)` | Golden Age Gilt | black, 9.1 to 1 |
| 17 | `#d89b3b` | `oklch(73.22% 0.1313 75.19)` | Trinket | black, 8.6 to 1 |
| 18 | `#db9136` | `oklch(71.50% 0.1358 67.24)` | Soft Pumpkin | black, 8 to 1 |
| 19 | `#db8537` | `oklch(69.45% 0.1383 59.19)` | Sunlounge | black, 7.4 to 1 |
| 20 | `#d67839` | `oklch(66.64% 0.1392 52.00)` | Jaffa Orange | black, 6.6 to 1 |
| 21 | `#cd6b3b` | `oklch(63.26% 0.1387 45.19)` | Casa de Oro | black, 5.7 to 1 |
| 22 | `#c25e3f` | `oklch(59.78% 0.1367 37.62)` | Deep Fire | black, 4.9 to 1 |
| 23 | `#b85348` | `oklch(56.68% 0.1330 28.17)` | Blazer | white, 4.8 to 1 |
| 24 | `#ac4c56` | `oklch(54.19% 0.1261 15.79)` | Carmine Carnation | white, 5.3 to 1 |
| 25 | `#9d4965` | `oklch(51.99% 0.1158 1.01)` | Baby Berries | white, 5.8 to 1 |
| 26 | `#8c4870` | `oklch(49.97% 0.1050 345.27)` | Twilight Lavender | white, 6.3 to 1 |
| 27 | `#7c4877` | `oklch(48.00% 0.0964 330.05)` | Magic Magenta | white, 6.8 to 1 |
| 28 | `#6c467a` | `oklch(45.94% 0.0929 316.41)` | Palace Purple | white, 7.4 to 1 |
| 29 | `#5c437c` | `oklch(43.69% 0.0944 302.67)` | In the Vines | white, 8.1 to 1 |
| 30 | `#4b417d` | `oklch(41.47% 0.0985 289.51)` | Fresh Eggplant | white, 8.9 to 1 |
| 31 | `#3b3e7c` | `oklch(39.54% 0.1031 278.29)` | Jacksons Purple | white, 9.6 to 1 |
| 32 | `#2e3d7b` | `oklch(38.19% 0.1061 270.36)` | Mazarine Blue | white, 10.1 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #2d3f7a 0.0%, #2b4b81 3.2%, #285b89 6.5%, #286c8f 9.7%, #2b7b92 12.9%, #2f8591 16.1%, #328c8a 19.4%, #398f80 22.6%, #469275 25.8%, #58976b 29.0%, #6f9e64 32.3%, #89a65e 35.5%, #a3ac58 38.7%, #b9ae52 41.9%, #c8ab4b 45.2%, #d2a442 48.4%, #d89b3b 51.6%, #db9136 54.8%, #db8537 58.1%, #d67839 61.3%, #cd6b3b 64.5%, #c25e3f 67.7%, #b85348 71.0%, #ac4c56 74.2%, #9d4965 77.4%, #8c4870 80.6%, #7c4877 83.9%, #6c467a 87.1%, #5c437c 90.3%, #4b417d 93.5%, #3b3e7c 96.8%, #2e3d7b 100.0%);
background: conic-gradient(from 135deg in oklch, oklch(38.58% 0.1020 268.59) 0.0%, oklch(41.55% 0.0983 260.20) 3.2%, oklch(45.87% 0.0929 248.27) 6.5%, oklch(50.55% 0.0874 234.45) 9.7%, oklch(54.61% 0.0835 220.39) 12.9%, oklch(57.18% 0.0824 207.20) 16.1%, oklch(58.57% 0.0834 193.58) 19.4%, oklch(59.44% 0.0858 179.67) 22.6%, oklch(60.42% 0.0892 165.89) 25.8%, oklch(62.12% 0.0929 152.60) 29.0%, oklch(65.01% 0.0974 139.49) 32.3%, oklch(68.50% 0.1029 126.51) 35.5%, oklch(71.79% 0.1086 114.07) 38.7%, oklch(74.06% 0.1142 102.57) 41.9%, oklch(74.77% 0.1197 92.38) 45.2%, oklch(74.40% 0.1256 83.41) 48.4%, oklch(73.22% 0.1313 75.19) 51.6%, oklch(71.50% 0.1358 67.24) 54.8%, oklch(69.45% 0.1383 59.19) 58.1%, oklch(66.64% 0.1392 52.00) 61.3%, oklch(63.26% 0.1387 45.19) 64.5%, oklch(59.78% 0.1367 37.62) 67.7%, oklch(56.68% 0.1330 28.17) 71.0%, oklch(54.19% 0.1261 15.79) 74.2%, oklch(51.99% 0.1158 1.01) 77.4%, oklch(49.97% 0.1050 345.27) 80.6%, oklch(48.00% 0.0964 330.05) 83.9%, oklch(45.94% 0.0929 316.41) 87.1%, oklch(43.69% 0.0944 302.67) 90.3%, oklch(41.47% 0.0985 289.51) 93.5%, oklch(39.54% 0.1031 278.29) 96.8%, oklch(38.19% 0.1061 270.36) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.386 | 0.102 | 268.6 |
| 2 | 0.559 | 0.083 | 214.7 |
| 3 | 0.618 | 0.092 | 154.5 |
| 4 | 0.744 | 0.116 | 99.5 |
| 5 | 0.701 | 0.138 | 61.5 |
| 6 | 0.563 | 0.132 | 26.6 |
| 7 | 0.469 | 0.094 | -37.9 |
| 8 | 0.382 | 0.106 | -89.6 |

## In these collections

- [Tetradic color palette](https://grabient.com/tetradic-color-palette)

## Other forms

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