# Color Palette: Powder blue and gray

The "Color Palette: Powder blue and gray" palette brings together off-white, light gray, dark blue, blue, and teal. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits website sections and interface mockups. Its darkest tone is dark blue, and its lightest tone is off-white.

- Also called: Analogous white, navy and teal linear swatches
- Seed: `kY-Qa19gS_-WGv-iiT_yLo_9GruC`
- Page: https://grabient.com/kY-Qa19gS_-WGv-iiT_yLo_9GruC?style=linearSwatches&steps=6
- Drawn as: linear swatches, 6 steps, 90 degrees
- Kinds: dark center, muted, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 14.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 | `#f5f9fe` | `oklch(98.03% 0.0083 255.23)` | Ghost White | black, 19.8 to 1 |
| 2 | `#e2e8f0` | `oklch(92.91% 0.0124 255.23)` | Bellflower Blue | black, 17 to 1 |
| 3 | `#b6bec9` | `oklch(79.92% 0.0179 255.23)` | Kinder | black, 11.2 to 1 |
| 4 | `#1f2833` | `oklch(27.17% 0.0248 255.23)` | Infinity | white, 14.9 to 1 |
| 5 | `#2977d3` | `oklch(57.09% 0.1598 255.23)` | Blue-Eyed Boy | black, 4.6 to 1 |
| 6 | `#00a29b` | `oklch(64.18% 0.1109 189.71)` | Ceramic Blue Turquoise | black, 6.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f5f9fe 0.000% 16.667%, #e2e8f0 16.667% 33.333%, #b6bec9 33.333% 50.000%, #1f2833 50.000% 66.667%, #2977d3 66.667% 83.333%, #00a29b 83.333% 100.000%);
background: linear-gradient(90deg, oklch(98.03% 0.0083 255.23) 0.000% 16.667%, oklch(92.91% 0.0124 255.23) 16.667% 33.333%, oklch(79.92% 0.0179 255.23) 33.333% 50.000%, oklch(27.17% 0.0248 255.23) 50.000% 66.667%, oklch(57.09% 0.1598 255.23) 66.667% 83.333%, oklch(64.18% 0.1109 189.71) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.98 | 0.008 | 255.2 |
| 2 | 0.929 | 0.012 | 255.2 |
| 3 | 0.799 | 0.018 | 255.2 |
| 4 | 0.272 | 0.025 | 255.2 |
| 5 | 0.571 | 0.16 | 255.2 |
| 6 | 0.642 | 0.12 | 189.7 |

## In these collections

- [Presentation swatches](https://grabient.com/presentation-swatches)
- [UI swatches](https://grabient.com/ui-swatches)

## Other forms

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