# Blue and off-white neo deco palette

The Blue and off-white neo deco palette brings together dark blue, blue, light teal, and light gray. 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 light gray.

- Also called: Navy and gray angular swatches
- Seed: `kUSj65PLE_mSWu3wgjKg`
- Page: https://grabient.com/kUSj65PLE_mSWu3wgjKg?style=angularSwatches&steps=4&angle=225
- Drawn as: angular swatches, 4 steps, 225 degrees
- Kinds: dark to light, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 10 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 | `#102a55` | `oklch(29.13% 0.0854 260.16)` | Dark Tyrian Blue | white, 14.1 to 1 |
| 2 | `#235ba7` | `oklch(47.64% 0.1350 256.99)` | Miracle at Wrigley | white, 6.7 to 1 |
| 3 | `#8ec5d6` | `oklch(79.13% 0.0620 218.94)` | Blue Glint | black, 11.1 to 1 |
| 4 | `#dadad5` | `oklch(88.58% 0.0055 106.93)` | First Star | black, 14.9 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #102a55 0.000% 25.000%, #235ba7 25.000% 50.000%, #8ec5d6 50.000% 75.000%, #dadad5 75.000% 100.000%);
background: conic-gradient(from 225deg, oklch(29.13% 0.0854 260.16) 0.000% 25.000%, oklch(47.64% 0.1350 256.99) 25.000% 50.000%, oklch(79.13% 0.0620 218.94) 50.000% 75.000%, oklch(88.58% 0.0055 106.93) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.291 | 0.085 | 260.2 |
| 2 | 0.476 | 0.135 | 257 |
| 3 | 0.791 | 0.062 | 218.9 |
| 4 | 0.886 | 0.006 | 106.9 |

## In these collections

- [Neo deco swatches](https://grabient.com/neo-deco-swatches)

## Other forms

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