# Orange and Blue: Coral and cobalt blue

The "Orange and Blue: Coral and cobalt blue" palette brings together orange, light orange, light red, purple, and blue. The colors span a moderate lightness range, combining strong color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is light orange.

- Also called: Orange to blue radial gradient
- Seed: `kapocb2jpAmKpQJgFTxURm3MsmuvCMT8A`
- Page: https://grabient.com/kapocb2jpAmKpQJgFTxURm3MsmuvCMT8A?style=radialGradient&steps=32&angle=270
- Drawn as: radial gradient, 32 steps, 270 degrees
- Kinds: multicolor
- Hues: split-complementary
- 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 | `#ea5d2a` | `oklch(65.35% 0.1860 38.67)` | Sunset Blaze | black, 6 to 1 |
| 2 | `#eb612d` | `oklch(66.06% 0.1829 39.36)` | Halloween Party | black, 6.2 to 1 |
| 3 | `#ed6631` | `oklch(67.03% 0.1787 40.33)` | Flaming Orange | black, 6.5 to 1 |
| 4 | `#ee6d37` | `oklch(68.19% 0.1736 41.47)` | Mandarin Orange | black, 6.8 to 1 |
| 5 | `#f0733d` | `oklch(69.43% 0.1677 42.66)` | Debrito | black, 7.2 to 1 |
| 6 | `#f17a44` | `oklch(70.67% 0.1610 43.78)` | Mandarin | black, 7.5 to 1 |
| 7 | `#f1814b` | `oklch(71.97% 0.1535 45.20)` | Mustard Crusted Salmon | black, 8 to 1 |
| 8 | `#f28a53` | `oklch(73.51% 0.1451 47.29)` | Toasted Husk | black, 8.5 to 1 |
| 9 | `#f2925b` | `oklch(75.06% 0.1359 49.29)` | Orange Slice | black, 9 to 1 |
| 10 | `#f29a65` | `oklch(76.42% 0.1262 50.43)` | Ridgeback | black, 9.5 to 1 |
| 11 | `#f19f70` | `oklch(77.37% 0.1163 49.91)` | Monarch Orange | black, 9.9 to 1 |
| 12 | `#efa27b` | `oklch(77.80% 0.1058 47.36)` | Balinese Sunset | black, 10 to 1 |
| 13 | `#eaa486` | `oklch(77.91% 0.0934 43.54)` | Mamey | black, 10.1 to 1 |
| 14 | `#e4a591` | `oklch(77.70% 0.0807 38.39)` | Pelican Pink | black, 10.1 to 1 |
| 15 | `#dda599` | `oklch(77.14% 0.0692 31.73)` | Conch Pink | black, 9.9 to 1 |
| 16 | `#d6a39f` | `oklch(76.21% 0.0606 23.42)` | Passive Pink | black, 9.6 to 1 |
| 17 | `#ce9fa3` | `oklch(74.81% 0.0563 13.01)` | Primula | black, 9.1 to 1 |
| 18 | `#c599a6` | `oklch(72.67% 0.0558 359.34)` | Artichoke Mauve | black, 8.4 to 1 |
| 19 | `#b991a8` | `oklch(70.08% 0.0581 343.68)` | Bed of Roses | black, 7.6 to 1 |
| 20 | `#ac89aa` | `oklch(67.41% 0.0622 327.66)` | Dusty Lavender | black, 6.9 to 1 |
| 21 | `#9e84ad` | `oklch(65.03% 0.0670 312.93)` | Celeb City | black, 6.3 to 1 |
| 22 | `#9180af` | `oklch(63.28% 0.0719 300.93)` | Captivated | black, 5.9 to 1 |
| 23 | `#867eb3` | `oklch(62.12% 0.0780 290.60)` | Murex | black, 5.6 to 1 |
| 24 | `#7b7eb6` | `oklch(61.30% 0.0852 281.43)` | Astro Zinger | black, 5.5 to 1 |
| 25 | `#707eba` | `oklch(60.62% 0.0929 273.49)` | Persian Jewel | black, 5.3 to 1 |
| 26 | `#657ebc` | `oklch(59.87% 0.1005 266.84)` | Watertown | black, 5.2 to 1 |
| 27 | `#597cbc` | `oklch(58.86% 0.1072 261.58)` | Blue Iolite | black, 5 to 1 |
| 28 | `#4d79bb` | `oklch(57.47% 0.1137 258.17)` | Ashton Blue | black, 4.7 to 1 |
| 29 | `#4275b9` | `oklch(55.89% 0.1202 256.41)` | Sinatra | white, 4.6 to 1 |
| 30 | `#3970b7` | `oklch(54.30% 0.1263 255.68)` | Campanula | white, 5 to 1 |
| 31 | `#316cb6` | `oklch(52.93% 0.1314 255.39)` | Dover Straits | white, 5.3 to 1 |
| 32 | `#2a69b4` | `oklch(51.97% 0.1350 254.95)` | Mid Blue | white, 5.5 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #ea5d2a 0.0%, #eb612d 3.2%, #ed6631 6.5%, #ee6d37 9.7%, #f0733d 12.9%, #f17a44 16.1%, #f1814b 19.4%, #f28a53 22.6%, #f2925b 25.8%, #f29a65 29.0%, #f19f70 32.3%, #efa27b 35.5%, #eaa486 38.7%, #e4a591 41.9%, #dda599 45.2%, #d6a39f 48.4%, #ce9fa3 51.6%, #c599a6 54.8%, #b991a8 58.1%, #ac89aa 61.3%, #9e84ad 64.5%, #9180af 67.7%, #867eb3 71.0%, #7b7eb6 74.2%, #707eba 77.4%, #657ebc 80.6%, #597cbc 83.9%, #4d79bb 87.1%, #4275b9 90.3%, #3970b7 93.5%, #316cb6 96.8%, #2a69b4 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(65.35% 0.1860 38.67) 0.0%, oklch(66.06% 0.1829 39.36) 3.2%, oklch(67.03% 0.1787 40.33) 6.5%, oklch(68.19% 0.1736 41.47) 9.7%, oklch(69.43% 0.1677 42.66) 12.9%, oklch(70.67% 0.1610 43.78) 16.1%, oklch(71.97% 0.1535 45.20) 19.4%, oklch(73.51% 0.1451 47.29) 22.6%, oklch(75.06% 0.1359 49.29) 25.8%, oklch(76.42% 0.1262 50.43) 29.0%, oklch(77.37% 0.1163 49.91) 32.3%, oklch(77.80% 0.1058 47.36) 35.5%, oklch(77.91% 0.0934 43.54) 38.7%, oklch(77.70% 0.0807 38.39) 41.9%, oklch(77.14% 0.0692 31.73) 45.2%, oklch(76.21% 0.0606 23.42) 48.4%, oklch(74.81% 0.0563 13.01) 51.6%, oklch(72.67% 0.0558 359.34) 54.8%, oklch(70.08% 0.0581 343.68) 58.1%, oklch(67.41% 0.0622 327.66) 61.3%, oklch(65.03% 0.0670 312.93) 64.5%, oklch(63.28% 0.0719 300.93) 67.7%, oklch(62.12% 0.0780 290.60) 71.0%, oklch(61.30% 0.0852 281.43) 74.2%, oklch(60.62% 0.0929 273.49) 77.4%, oklch(59.87% 0.1005 266.84) 80.6%, oklch(58.86% 0.1072 261.58) 83.9%, oklch(57.47% 0.1137 258.17) 87.1%, oklch(55.89% 0.1202 256.41) 90.3%, oklch(54.30% 0.1263 255.68) 93.5%, oklch(52.93% 0.1314 255.39) 96.8%, oklch(51.97% 0.1350 254.95) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.654 | 0.186 | 38.7 |
| 2 | 0.709 | 0.16 | 44 |
| 3 | 0.776 | 0.113 | 49.2 |
| 4 | 0.756 | 0.058 | 18.6 |
| 5 | 0.638 | 0.07 | -55.4 |
| 6 | 0.591 | 0.106 | -97.6 |
| 7 | 0.52 | 0.135 | -105 |

## In these collections

- [Orange and blue gradients](https://grabient.com/orange-and-blue-gradients)

## Other forms

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