# Porcelain and Navy Facets

The Off-white cool blue palette brings together blue, pale teal, off-white, and dark blue. The colors span a very broad lightness range, combining moderate color with high contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is off-white.

- Also called: Monochrome blue, white and navy angular swatches
- Seed: `kUaDqx9Qs7_wDQAdE0Sg`
- Page: https://grabient.com/kUaDqx9Qs7_wDQAdE0Sg?style=angularSwatches&steps=4&angle=135
- Drawn as: angular swatches, 4 steps, 135 degrees
- Kinds: light center, pastel, light, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 15.9 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 | `#244d74` | `oklch(40.94% 0.0799 249.61)` | Mykonos Reflection | white, 8.8 to 1 |
| 2 | `#cfebf2` | `oklch(92.13% 0.0303 215.79)` | Chalky Blue White | black, 16.7 to 1 |
| 3 | `#f1f9fb` | `oklch(97.64% 0.0083 216.85)` | Distant Horizon | black, 19.6 to 1 |
| 4 | `#0b1d35` | `oklch(22.83% 0.0524 257.01)` | Trapped Darkness | white, 16.9 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #244d74 0.000% 25.000%, #cfebf2 25.000% 50.000%, #f1f9fb 50.000% 75.000%, #0b1d35 75.000% 100.000%);
background: conic-gradient(from 135deg, oklch(40.94% 0.0799 249.61) 0.000% 25.000%, oklch(92.13% 0.0303 215.79) 25.000% 50.000%, oklch(97.64% 0.0083 216.85) 50.000% 75.000%, oklch(22.83% 0.0524 257.01) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.409 | 0.08 | 249.6 |
| 2 | 0.921 | 0.03 | 215.8 |
| 3 | 0.976 | 0.008 | 216.9 |
| 4 | 0.228 | 0.052 | 257 |

## In these collections

- [Cool blue swatches](https://grabient.com/cool-blue-swatches)

## Other forms

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