# Blue muted blue facets

Light blue, navy, white and blue angular swatches with 6 colors: #5fb4e4, #4165b8, #2d3d51, #385575, #f4fafc, #7797d6. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Light blue, navy, white and blue angular swatches
- Seed: `kYu06nQrHDa0PPs4Fz-fIK8NYkxQ`
- Page: https://grabient.com/kYu06nQrHDa0PPs4Fz-fIK8NYkxQ?style=angularSwatches&steps=6&angle=315
- Drawn as: angular swatches, 6 steps, 315 degrees
- Kinds: dark center, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.5 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 | `#5fb4e4` | `oklch(73.62% 0.1075 234.84)` | Sanctuary Spa | black, 9.1 to 1 |
| 2 | `#4165b8` | `oklch(52.36% 0.1364 264.43)` | Kakitsubata Blue | white, 5.5 to 1 |
| 3 | `#2d3d51` | `oklch(35.43% 0.0413 254.92)` | Snap-Shot | white, 11 to 1 |
| 4 | `#385575` | `oklch(44.09% 0.0634 251.75)` | Blue Earth | white, 7.7 to 1 |
| 5 | `#f4fafc` | `oklch(98.03% 0.0069 220.05)` | Zhēn Zhū Bái Pearl | black, 19.8 to 1 |
| 6 | `#7797d6` | `oklch(67.72% 0.1006 263.38)` | Pannikin | black, 7.1 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #5fb4e4 0.000% 16.667%, #4165b8 16.667% 33.333%, #2d3d51 33.333% 50.000%, #385575 50.000% 66.667%, #f4fafc 66.667% 83.333%, #7797d6 83.333% 100.000%);
background: conic-gradient(from 315deg, oklch(73.62% 0.1075 234.84) 0.000% 16.667%, oklch(52.36% 0.1364 264.43) 16.667% 33.333%, oklch(35.43% 0.0413 254.92) 33.333% 50.000%, oklch(44.09% 0.0634 251.75) 50.000% 66.667%, oklch(98.03% 0.0069 220.05) 66.667% 83.333%, oklch(67.72% 0.1006 263.38) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.736 | 0.107 | 234.8 |
| 2 | 0.524 | 0.136 | 264.4 |
| 3 | 0.354 | 0.041 | 254.9 |
| 4 | 0.441 | 0.063 | 251.8 |
| 5 | 0.98 | 0.007 | 220 |
| 6 | 0.677 | 0.101 | 263.4 |

## In these collections

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

## Other forms

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