# Orange and Blue: Sky blue and stone

The "Orange and Blue: Sky blue and stone" palette brings together blue, light blue, light red, light orange, and orange. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its light and open character suits travel posters and environmental mood boards. Its darkest tone is orange, and its lightest tone is light blue.

- Also called: Pastel blue to orange radial gradient
- Seed: `kYwlCoaB6_uUTw_jlMx5ShFN41Py`
- Page: https://grabient.com/kYwlCoaB6_uUTw_jlMx5ShFN41Py?style=radialGradient&steps=32&angle=45
- Drawn as: radial gradient, 32 steps, 45 degrees
- Kinds: even lightness, pastel
- Hues: complementary
- Contrast of its darkest and lightest colors: 1.3 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 | `#67bdef` | `oklch(76.38% 0.1102 236.25)` | Norfolk Sky | black, 10 to 1 |
| 2 | `#6bbfef` | `oklch(77.04% 0.1075 235.64)` | Blue Mana | black, 10.3 to 1 |
| 3 | `#70c2f0` | `oklch(78.03% 0.1039 234.46)` | Blue Mana | black, 10.6 to 1 |
| 4 | `#76c6f1` | `oklch(79.17% 0.0995 233.19)` | Nevermind Nirvana | black, 11.1 to 1 |
| 5 | `#7dcaf2` | `oklch(80.29% 0.0947 232.32)` | Nevermind Nirvana | black, 11.5 to 1 |
| 6 | `#84ccf2` | `oklch(81.24% 0.0898 232.32)` | Airy Blue | black, 11.9 to 1 |
| 7 | `#8bcdf2` | `oklch(81.83% 0.0850 233.66)` | Airy Blue | black, 12.1 to 1 |
| 8 | `#91cdf1` | `oklch(81.96% 0.0801 236.22)` | Pacific Ocean | black, 12.1 to 1 |
| 9 | `#97cbef` | `oklch(81.74% 0.0746 239.18)` | Honolulu | black, 12 to 1 |
| 10 | `#9cc8eb` | `oklch(81.29% 0.0688 242.95)` | Fail Whale | black, 11.8 to 1 |
| 11 | `#a0c4e8` | `oklch(80.72% 0.0633 247.99)` | Pale Cerulean | black, 11.5 to 1 |
| 12 | `#a5c1e4` | `oklch(80.14% 0.0584 254.74)` | Artesian Pool | black, 11.3 to 1 |
| 13 | `#abbde1` | `oklch(79.66% 0.0548 263.67)` | Artesian Pool | black, 11 to 1 |
| 14 | `#b2bade` | `oklch(79.36% 0.0525 275.60)` | Lilac Flare | black, 10.9 to 1 |
| 15 | `#bbb6da` | `oklch(79.08% 0.0508 291.63)` | Wild Orchid Blue | black, 10.7 to 1 |
| 16 | `#c4b2d2` | `oklch(78.83% 0.0500 310.32)` | Plumeria | black, 10.6 to 1 |
| 17 | `#ccaec9` | `oklch(78.61% 0.0500 329.98)` | Windsor Purple | black, 10.4 to 1 |
| 18 | `#d3acbe` | `oklch(78.45% 0.0513 348.93)` | Pink Potion | black, 10.4 to 1 |
| 19 | `#d8abb3` | `oklch(78.36% 0.0541 5.52)` | Pink Nectar | black, 10.3 to 1 |
| 20 | `#dcaaaa` | `oklch(78.37% 0.0586 18.32)` | Peach Poppy | black, 10.3 to 1 |
| 21 | `#e0aaa1` | `oklch(78.59% 0.0655 28.80)` | Coral Fountain | black, 10.4 to 1 |
| 22 | `#e5aa98` | `oklch(78.94% 0.0744 37.59)` | Ageless Beauty | black, 10.5 to 1 |
| 23 | `#eaab8f` | `oklch(79.32% 0.0843 44.84)` | Aloha Sunset | black, 10.7 to 1 |
| 24 | `#eeab85` | `oklch(79.60% 0.0944 50.67)` | Coral Dust | black, 10.8 to 1 |
| 25 | `#f1ab7b` | `oklch(79.69% 0.1038 55.21)` | Hazelnut Milk | black, 10.8 to 1 |
| 26 | `#f2aa71` | `oklch(79.45% 0.1117 58.57)` | Catalina Tile | black, 10.7 to 1 |
| 27 | `#f2a768` | `oklch(78.80% 0.1188 59.88)` | Shrimp Cocktail | black, 10.4 to 1 |
| 28 | `#f2a260` | `oklch(77.84% 0.1257 59.25)` | Shrimp Cocktail | black, 10.1 to 1 |
| 29 | `#f29c59` | `oklch(76.73% 0.1321 57.39)` | Bergamot Orange | black, 9.7 to 1 |
| 30 | `#f29653` | `oklch(75.62% 0.1378 55.03)` | Toucan | black, 9.2 to 1 |
| 31 | `#f2914f` | `oklch(74.67% 0.1425 52.89)` | Melon Orange | black, 8.9 to 1 |
| 32 | `#f28d4c` | `oklch(74.02% 0.1461 51.67)` | Poppy Glow | black, 8.7 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #67bdef 0.0%, #6bbfef 3.2%, #70c2f0 6.5%, #76c6f1 9.7%, #7dcaf2 12.9%, #84ccf2 16.1%, #8bcdf2 19.4%, #91cdf1 22.6%, #97cbef 25.8%, #9cc8eb 29.0%, #a0c4e8 32.3%, #a5c1e4 35.5%, #abbde1 38.7%, #b2bade 41.9%, #bbb6da 45.2%, #c4b2d2 48.4%, #ccaec9 51.6%, #d3acbe 54.8%, #d8abb3 58.1%, #dcaaaa 61.3%, #e0aaa1 64.5%, #e5aa98 67.7%, #eaab8f 71.0%, #eeab85 74.2%, #f1ab7b 77.4%, #f2aa71 80.6%, #f2a768 83.9%, #f2a260 87.1%, #f29c59 90.3%, #f29653 93.5%, #f2914f 96.8%, #f28d4c 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(76.38% 0.1102 236.25) 0.0%, oklch(77.04% 0.1075 235.64) 3.2%, oklch(78.03% 0.1039 234.46) 6.5%, oklch(79.17% 0.0995 233.19) 9.7%, oklch(80.29% 0.0947 232.32) 12.9%, oklch(81.24% 0.0898 232.32) 16.1%, oklch(81.83% 0.0850 233.66) 19.4%, oklch(81.96% 0.0801 236.22) 22.6%, oklch(81.74% 0.0746 239.18) 25.8%, oklch(81.29% 0.0688 242.95) 29.0%, oklch(80.72% 0.0633 247.99) 32.3%, oklch(80.14% 0.0584 254.74) 35.5%, oklch(79.66% 0.0548 263.67) 38.7%, oklch(79.36% 0.0525 275.60) 41.9%, oklch(79.08% 0.0508 291.63) 45.2%, oklch(78.83% 0.0500 310.32) 48.4%, oklch(78.61% 0.0500 329.98) 51.6%, oklch(78.45% 0.0513 348.93) 54.8%, oklch(78.36% 0.0541 5.52) 58.1%, oklch(78.37% 0.0586 18.32) 61.3%, oklch(78.59% 0.0655 28.80) 64.5%, oklch(78.94% 0.0744 37.59) 67.7%, oklch(79.32% 0.0843 44.84) 71.0%, oklch(79.60% 0.0944 50.67) 74.2%, oklch(79.69% 0.1038 55.21) 77.4%, oklch(79.45% 0.1117 58.57) 80.6%, oklch(78.80% 0.1188 59.88) 83.9%, oklch(77.84% 0.1257 59.25) 87.1%, oklch(76.73% 0.1321 57.39) 90.3%, oklch(75.62% 0.1378 55.03) 93.5%, oklch(74.67% 0.1425 52.89) 96.8%, oklch(74.02% 0.1461 51.67) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.764 | 0.11 | 236.3 |
| 2 | 0.819 | 0.084 | 234.1 |
| 3 | 0.795 | 0.054 | 268 |
| 4 | 0.783 | 0.056 | 373.6 |
| 5 | 0.795 | 0.11 | 418 |
| 6 | 0.74 | 0.146 | 411.7 |

## In these collections

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

## Other forms

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