# Stone, cobalt blue and pale aqua glass

The Stone, cobalt blue and pale aqua glass brings together light gray, light blue, blue, light teal, and pale teal. The colors span a broad 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 pale teal.

- Also called: Gray, blue and light blue angular gradient
- Seed: `kc4gqlWgzBsOYQUyp0BPbG-9EtvhpobyeJC9o`
- Page: https://grabient.com/kc4gqlWgzBsOYQUyp0BPbG-9EtvhpobyeJC9o?style=angularGradient&steps=32&angle=315
- Drawn as: angular gradient, 32 steps, 315 degrees
- Kinds: dark center, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.2 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 | `#d2dce2` | `oklch(88.98% 0.0138 232.03)` | Skyscraper | black, 15.1 to 1 |
| 2 | `#c7d3db` | `oklch(86.10% 0.0168 234.43)` | Velvet Sky | black, 13.8 to 1 |
| 3 | `#b8c6d0` | `oklch(82.01% 0.0211 237.89)` | Silver Strand | black, 12 to 1 |
| 4 | `#a7b8c5` | `oklch(77.32% 0.0262 241.77)` | Overcast Sky | black, 10.2 to 1 |
| 5 | `#97a9ba` | `oklch(72.68% 0.0319 245.46)` | Cool Customer | black, 8.7 to 1 |
| 6 | `#889cb1` | `oklch(68.53% 0.0379 248.54)` | Private Jet | black, 7.4 to 1 |
| 7 | `#7a90a8` | `oklch(64.37% 0.0445 251.53)` | Cabaret Charm | black, 6.3 to 1 |
| 8 | `#6c83a0` | `oklch(60.25% 0.0516 254.33)` | Brisk Blue | black, 5.3 to 1 |
| 9 | `#5f7798` | `oklch(56.30% 0.0592 256.78)` | Rushing River | white, 4.5 to 1 |
| 10 | `#536c92` | `oklch(52.64% 0.0673 258.69)` | Charter Blue | white, 5.3 to 1 |
| 11 | `#46608b` | `oklch(48.84% 0.0764 260.16)` | Federal Blue | white, 6.3 to 1 |
| 12 | `#3a5585` | `oklch(45.06% 0.0863 261.23)` | Southern Blue | white, 7.4 to 1 |
| 13 | `#2f4b81` | `oklch(41.91% 0.0961 261.80)` | Coastal Surf | white, 8.5 to 1 |
| 14 | `#264580` | `oklch(40.00% 0.1051 261.76)` | Maritime Outpost | white, 9.3 to 1 |
| 15 | `#214483` | `oklch(39.84% 0.1133 261.00)` | Maritime Outpost | white, 9.4 to 1 |
| 16 | `#1e488c` | `oklch(41.21% 0.1214 259.53)` | Nuit Blanche | white, 8.8 to 1 |
| 17 | `#1c4f96` | `oklch(43.57% 0.1287 257.51)` | Le Grand Bleu | white, 8 to 1 |
| 18 | `#1958a2` | `oklch(46.41% 0.1342 255.08)` | Princess Blue | white, 7 to 1 |
| 19 | `#1562ab` | `oklch(49.22% 0.1369 252.38)` | Cobalt Stone | white, 6.2 to 1 |
| 20 | `#156db4` | `oklch(52.28% 0.1368 249.48)` | Beautiful Blue | white, 5.4 to 1 |
| 21 | `#1979bd` | `oklch(55.69% 0.1346 246.25)` | Roller Coaster Chariot | white, 4.6 to 1 |
| 22 | `#2086c5` | `oklch(59.37% 0.1308 242.49)` | Klaxosaur Blue | black, 5.2 to 1 |
| 23 | `#2993cd` | `oklch(63.22% 0.1261 238.02)` | Splish Splash | black, 6.1 to 1 |
| 24 | `#35a2d4` | `oklch(67.38% 0.1206 232.45)` | Blue Tango | black, 7.2 to 1 |
| 25 | `#44b3db` | `oklch(71.97% 0.1138 225.76)` | Epimetheus | black, 8.7 to 1 |
| 26 | `#58c3e0` | `oklch(76.62% 0.1060 218.72)` | Naxos Sky | black, 10.3 to 1 |
| 27 | `#6ed2e5` | `oklch(80.92% 0.0974 212.09)` | Middle Blue | black, 11.9 to 1 |
| 28 | `#83dde9` | `oklch(84.56% 0.0881 206.49)` | Faded Poster | black, 13.4 to 1 |
| 29 | `#99e7ec` | `oklch(87.85% 0.0766 201.27)` | Blizzard Blue | black, 14.9 to 1 |
| 30 | `#aeeeef` | `oklch(90.77% 0.0642 196.53)` | Mint Macaron | black, 16.3 to 1 |
| 31 | `#c0f4f2` | `oklch(93.16% 0.0532 192.58)` | Shallow End | black, 17.5 to 1 |
| 32 | `#ccf9f5` | `oklch(94.88% 0.0455 189.76)` | Tinted Ice | black, 18.3 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #d2dce2 0.0%, #c7d3db 3.2%, #b8c6d0 6.5%, #a7b8c5 9.7%, #97a9ba 12.9%, #889cb1 16.1%, #7a90a8 19.4%, #6c83a0 22.6%, #5f7798 25.8%, #536c92 29.0%, #46608b 32.3%, #3a5585 35.5%, #2f4b81 38.7%, #264580 41.9%, #214483 45.2%, #1e488c 48.4%, #1c4f96 51.6%, #1958a2 54.8%, #1562ab 58.1%, #156db4 61.3%, #1979bd 64.5%, #2086c5 67.7%, #2993cd 71.0%, #35a2d4 74.2%, #44b3db 77.4%, #58c3e0 80.6%, #6ed2e5 83.9%, #83dde9 87.1%, #99e7ec 90.3%, #aeeeef 93.5%, #c0f4f2 96.8%, #ccf9f5 100.0%);
background: conic-gradient(from 315deg in oklch, oklch(88.98% 0.0138 232.03) 0.0%, oklch(86.10% 0.0168 234.43) 3.2%, oklch(82.01% 0.0211 237.89) 6.5%, oklch(77.32% 0.0262 241.77) 9.7%, oklch(72.68% 0.0319 245.46) 12.9%, oklch(68.53% 0.0379 248.54) 16.1%, oklch(64.37% 0.0445 251.53) 19.4%, oklch(60.25% 0.0516 254.33) 22.6%, oklch(56.30% 0.0592 256.78) 25.8%, oklch(52.64% 0.0673 258.69) 29.0%, oklch(48.84% 0.0764 260.16) 32.3%, oklch(45.06% 0.0863 261.23) 35.5%, oklch(41.91% 0.0961 261.80) 38.7%, oklch(40.00% 0.1051 261.76) 41.9%, oklch(39.84% 0.1133 261.00) 45.2%, oklch(41.21% 0.1214 259.53) 48.4%, oklch(43.57% 0.1287 257.51) 51.6%, oklch(46.41% 0.1342 255.08) 54.8%, oklch(49.22% 0.1369 252.38) 58.1%, oklch(52.28% 0.1368 249.48) 61.3%, oklch(55.69% 0.1346 246.25) 64.5%, oklch(59.37% 0.1308 242.49) 67.7%, oklch(63.22% 0.1261 238.02) 71.0%, oklch(67.38% 0.1206 232.45) 74.2%, oklch(71.97% 0.1138 225.76) 77.4%, oklch(76.62% 0.1060 218.72) 80.6%, oklch(80.92% 0.0974 212.09) 83.9%, oklch(84.56% 0.0881 206.49) 87.1%, oklch(87.85% 0.0766 201.27) 90.3%, oklch(90.77% 0.0642 196.53) 93.5%, oklch(93.16% 0.0532 192.58) 96.8%, oklch(94.88% 0.0455 189.76) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.89 | 0.014 | 232 |
| 2 | 0.709 | 0.034 | 246.8 |
| 3 | 0.531 | 0.066 | 258.5 |
| 4 | 0.398 | 0.107 | 261.6 |
| 5 | 0.484 | 0.136 | 253.2 |
| 6 | 0.638 | 0.125 | 237.3 |
| 7 | 0.831 | 0.092 | 208.8 |
| 8 | 0.949 | 0.045 | 189.8 |

## In these collections

- [Glass gradients](https://grabient.com/glass-gradients)

## Other forms

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