# Ochre and blue color palette

The Ochre and blue color palette brings together gold, red, purple, blue, light blue, and pale teal. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its light and open character suits seasonal campaigns and event graphics. Its darkest tone is purple, and its lightest tone is pale teal.

- Also called: Orange, salmon, lavender and light blue linear gradient
- Seed: `kc1F8_WbU5VWrPhSobc1Ca7d4ivHpGz6dA6-w`
- Page: https://grabient.com/kc1F8_WbU5VWrPhSobc1Ca7d4ivHpGz6dA6-w?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Hues: two-hue
- Contrast of its darkest and lightest colors: 2.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 | `#ecc45b` | `oklch(83.46% 0.1309 88.59)` | Blonde Girl | black, 12.5 to 1 |
| 2 | `#f0b751` | `oklch(81.22% 0.1341 78.94)` | Yellow Coneflower | black, 11.5 to 1 |
| 3 | `#f4a34c` | `oklch(77.93% 0.1391 64.86)` | Troll Slayer Orange | black, 10.1 to 1 |
| 4 | `#f38e52` | `oklch(74.39% 0.1438 49.65)` | Chinese Lantern | black, 8.8 to 1 |
| 5 | `#ef7e5e` | `oklch(71.40% 0.1462 36.66)` | Akakō Red | black, 7.8 to 1 |
| 6 | `#e97667` | `oklch(69.58% 0.1446 29.00)` | Burnt Coral | black, 7.2 to 1 |
| 7 | `#e3756b` | `oklch(68.60% 0.1394 26.36)` | Ardent Coral | black, 7 to 1 |
| 8 | `#de756e` | `oklch(68.09% 0.1321 25.44)` | Ardent Coral | black, 6.8 to 1 |
| 9 | `#da7673` | `oklch(67.73% 0.1244 22.85)` | Red Cedar | black, 6.8 to 1 |
| 10 | `#d4767e` | `oklch(67.23% 0.1176 15.21)` | Red Cedar | black, 6.6 to 1 |
| 11 | `#cb7690` | `oklch(66.57% 0.1107 0.89)` | Devilish Diva | black, 6.5 to 1 |
| 12 | `#be78a3` | `oklch(65.91% 0.1033 342.52)` | Hollyhock Blossom Pink | black, 6.3 to 1 |
| 13 | `#ad7cb2` | `oklch(65.36% 0.0970 323.35)` | Berries Galore | black, 6.2 to 1 |
| 14 | `#9e80bc` | `oklch(65.01% 0.0929 306.63)` | Purple Mountains’ Majesty | black, 6.2 to 1 |
| 15 | `#9284c2` | `oklch(64.88% 0.0925 294.50)` | Amethyst Grey | black, 6.2 to 1 |
| 16 | `#8986c7` | `oklch(64.85% 0.0959 285.04)` | Brocade | black, 6.3 to 1 |
| 17 | `#8089cc` | `oklch(65.04% 0.1007 277.18)` | True Lavender | black, 6.3 to 1 |
| 18 | `#788dd1` | `oklch(65.53% 0.1049 269.98)` | Organza Violet | black, 6.5 to 1 |
| 19 | `#7093d5` | `oklch(66.46% 0.1061 262.54)` | Bashful Blue | black, 6.8 to 1 |
| 20 | `#6b9bd8` | `oklch(67.91% 0.1050 254.97)` | Sea Loch | black, 7.2 to 1 |
| 21 | `#68a3da` | `oklch(69.75% 0.1025 247.78)` | Blue Gourami | black, 7.8 to 1 |
| 22 | `#68acdc` | `oklch(71.76% 0.0992 241.28)` | Salem Blue | black, 8.5 to 1 |
| 23 | `#6bb4de` | `oklch(73.75% 0.0956 235.81)` | Xavier Blue | black, 9.1 to 1 |
| 24 | `#70bbe0` | `oklch(75.64% 0.0919 231.72)` | Tranquil Bay | black, 9.8 to 1 |
| 25 | `#78c1e3` | `oklch(77.59% 0.0878 228.88)` | Bright Spark | black, 10.5 to 1 |
| 26 | `#80c8e6` | `oklch(79.57% 0.0832 226.74)` | Budgie Blue | black, 11.3 to 1 |
| 27 | `#8acee9` | `oklch(81.55% 0.0778 224.77)` | Anakiwa | black, 12 to 1 |
| 28 | `#95d4eb` | `oklch(83.55% 0.0715 222.46)` | Blue Effervescence | black, 12.9 to 1 |
| 29 | `#a2dbed` | `oklch(85.78% 0.0631 219.95)` | Mizu Cyan | black, 13.8 to 1 |
| 30 | `#b0e1ef` | `oklch(88.02% 0.0539 217.53)` | Break the Ice | black, 14.8 to 1 |
| 31 | `#bde6f1` | `oklch(89.97% 0.0457 215.46)` | First of July | black, 15.7 to 1 |
| 32 | `#c5eaf3` | `oklch(91.34% 0.0400 213.99)` | Niagara Mist | black, 16.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #ecc45b 0.0%, #f0b751 3.2%, #f4a34c 6.5%, #f38e52 9.7%, #ef7e5e 12.9%, #e97667 16.1%, #e3756b 19.4%, #de756e 22.6%, #da7673 25.8%, #d4767e 29.0%, #cb7690 32.3%, #be78a3 35.5%, #ad7cb2 38.7%, #9e80bc 41.9%, #9284c2 45.2%, #8986c7 48.4%, #8089cc 51.6%, #788dd1 54.8%, #7093d5 58.1%, #6b9bd8 61.3%, #68a3da 64.5%, #68acdc 67.7%, #6bb4de 71.0%, #70bbe0 74.2%, #78c1e3 77.4%, #80c8e6 80.6%, #8acee9 83.9%, #95d4eb 87.1%, #a2dbed 90.3%, #b0e1ef 93.5%, #bde6f1 96.8%, #c5eaf3 100.0%);
background: linear-gradient(90deg in oklch, oklch(83.46% 0.1309 88.59) 0.0%, oklch(81.22% 0.1341 78.94) 3.2%, oklch(77.93% 0.1391 64.86) 6.5%, oklch(74.39% 0.1438 49.65) 9.7%, oklch(71.40% 0.1462 36.66) 12.9%, oklch(69.58% 0.1446 29.00) 16.1%, oklch(68.60% 0.1394 26.36) 19.4%, oklch(68.09% 0.1321 25.44) 22.6%, oklch(67.73% 0.1244 22.85) 25.8%, oklch(67.23% 0.1176 15.21) 29.0%, oklch(66.57% 0.1107 0.89) 32.3%, oklch(65.91% 0.1033 342.52) 35.5%, oklch(65.36% 0.0970 323.35) 38.7%, oklch(65.01% 0.0929 306.63) 41.9%, oklch(64.88% 0.0925 294.50) 45.2%, oklch(64.85% 0.0959 285.04) 48.4%, oklch(65.04% 0.1007 277.18) 51.6%, oklch(65.53% 0.1049 269.98) 54.8%, oklch(66.46% 0.1061 262.54) 58.1%, oklch(67.91% 0.1050 254.97) 61.3%, oklch(69.75% 0.1025 247.78) 64.5%, oklch(71.76% 0.0992 241.28) 67.7%, oklch(73.75% 0.0956 235.81) 71.0%, oklch(75.64% 0.0919 231.72) 74.2%, oklch(77.59% 0.0878 228.88) 77.4%, oklch(79.57% 0.0832 226.74) 80.6%, oklch(81.55% 0.0778 224.77) 83.9%, oklch(83.55% 0.0715 222.46) 87.1%, oklch(85.78% 0.0631 219.95) 90.3%, oklch(88.02% 0.0539 217.53) 93.5%, oklch(89.97% 0.0457 215.46) 96.8%, oklch(91.34% 0.0400 213.99) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.835 | 0.131 | 88.6 |
| 2 | 0.705 | 0.146 | 32.6 |
| 3 | 0.673 | 0.119 | 16.7 |
| 4 | 0.65 | 0.092 | -57.2 |
| 5 | 0.661 | 0.106 | -95.3 |
| 6 | 0.74 | 0.095 | -124.9 |
| 7 | 0.827 | 0.074 | -136.5 |
| 8 | 0.913 | 0.04 | -146 |

## In these collections

- [Bright gradients](https://grabient.com/bright-gradients)
- [Summer gradients](https://grabient.com/summer-gradients)
- [Sunrise gradients](https://grabient.com/sunrise-gradients)

## Other forms

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