# Arctic Blue Facets

The Blue blue palette brings together off-white, pale teal, light teal, teal, and pale blue. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is teal, and its lightest tone is off-white.

- Also called: Monochrome white and light blue angular swatches
- Seed: `kW-QuSdQ7Ae0ZwHlpkB8BRAQ`
- Page: https://grabient.com/kW-QuSdQ7Ae0ZwHlpkB8BRAQ?style=angularSwatches&steps=5&angle=30
- Drawn as: angular swatches, 5 steps, 30 degrees
- Kinds: pastel, light, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 1.7 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 | `#eefcfd` | `oklch(98.03% 0.0152 205.31)` | Cold White | black, 19.9 to 1 |
| 2 | `#c7edf4` | `oklch(92.13% 0.0400 209.54)` | Icy Breeze | black, 16.8 to 1 |
| 3 | `#9added` | `oklch(85.83% 0.0703 213.77)` | Non-Photo Blue | black, 13.9 to 1 |
| 4 | `#65ceea` | `oklch(79.92% 0.1047 217.99)` | Hawaiian Breeze | black, 11.5 to 1 |
| 5 | `#b1e1f2` | `oklch(88.19% 0.0551 221.16)` | Intergalactic Blue | black, 14.9 to 1 |

## CSS

```css
background: conic-gradient(from 30deg, #eefcfd 0.000% 20.000%, #c7edf4 20.000% 40.000%, #9added 40.000% 60.000%, #65ceea 60.000% 80.000%, #b1e1f2 80.000% 100.000%);
background: conic-gradient(from 30deg, oklch(98.03% 0.0152 205.31) 0.000% 20.000%, oklch(92.13% 0.0400 209.54) 20.000% 40.000%, oklch(85.83% 0.0703 213.77) 40.000% 60.000%, oklch(79.92% 0.1047 217.99) 60.000% 80.000%, oklch(88.19% 0.0551 221.16) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.98 | 0.015 | 205.3 |
| 2 | 0.921 | 0.04 | 209.5 |
| 3 | 0.858 | 0.07 | 213.8 |
| 4 | 0.799 | 0.105 | 218 |
| 5 | 0.882 | 0.055 | 221.2 |

## In these collections

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

## Other forms

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