# Blue glass palette

The Blue glass palette brings together dark blue, blue, 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 dark blue, and its lightest tone is pale teal.

- Also called: Monochrome navy to light blue linear gradient
- Seed: `kUOmK_tDK_dSlPdyF7yg`
- Page: https://grabient.com/kUOmK_tDK_dSlPdyF7yg?steps=6&angle=315
- Drawn as: linear gradient, 6 steps, 315 degrees
- Kinds: dark to light, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 13.1 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 | `#0a085a` | `oklch(22.83% 0.1350 269.30)` | Prussian Nights | white, 17.5 to 1 |
| 2 | `#16287a` | `oklch(32.29% 0.1403 267.95)` | Impression of Obscurity | white, 13 to 1 |
| 3 | `#2c53a1` | `oklch(45.62% 0.1344 262.51)` | Dazzling Blue | white, 7.3 to 1 |
| 4 | `#5088c4` | `oklch(61.45% 0.1101 251.53)` | Blueberry Popover | black, 5.6 to 1 |
| 5 | `#7dbee4` | `oklch(77.11% 0.0853 235.48)` | C’est la Vie | black, 10.3 to 1 |
| 6 | `#ade8fb` | `oklch(89.76% 0.0648 219.63)` | Fresh Air | black, 15.7 to 1 |

## CSS

```css
background: linear-gradient(315deg, #0a085a 0.0%, #16287a 20.0%, #2c53a1 40.0%, #5088c4 60.0%, #7dbee4 80.0%, #ade8fb 100.0%);
background: linear-gradient(315deg in oklch, oklch(22.83% 0.1350 269.30) 0.0%, oklch(32.29% 0.1403 267.95) 20.0%, oklch(45.62% 0.1344 262.51) 40.0%, oklch(61.45% 0.1101 251.53) 60.0%, oklch(77.11% 0.0853 235.48) 80.0%, oklch(89.76% 0.0648 219.63) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.228 | 0.135 | 269.3 |
| 2 | 0.409 | 0.139 | 265.1 |
| 3 | 0.665 | 0.102 | 247.1 |
| 4 | 0.898 | 0.065 | 219.6 |

## In these collections

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

## Other forms

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