# Cobalt cyan pale blue bands

Monochrome blue and light blue linear swatches with 13 colors: #063894, #004498, #00539c, #0062a4, #0071ad, #0b80b4, #1a90bb, #329fc2, #50accb, #77b8d7, #9fc4e1, #becfe5, #d1d8e6. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Monochrome blue and light blue linear swatches
- Seed: `kUYHO6Qy49tkjvbwB8Sg`
- Page: https://grabient.com/kUYHO6Qy49tkjvbwB8Sg?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 steps, 90 degrees
- Kinds: dark to light, vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.3 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 | `#063894` | `oklch(37.80% 0.1585 261.56)` | Dark Seashore Night | white, 10.4 to 1 |
| 2 | `#004498` | `oklch(40.43% 0.1509 258.18)` | Fright Night | white, 9.2 to 1 |
| 3 | `#00539c` | `oklch(44.20% 0.1375 253.27)` | Standing Waters | white, 7.7 to 1 |
| 4 | `#0062a4` | `oklch(48.50% 0.1298 247.77)` | Directoire Blue | white, 6.3 to 1 |
| 5 | `#0071ad` | `oklch(52.76% 0.1265 242.56)` | Cloisonné | white, 5.2 to 1 |
| 6 | `#0b80b4` | `oklch(56.90% 0.1205 236.40)` | Primal Blue | black, 4.7 to 1 |
| 7 | `#1a90bb` | `oklch(61.22% 0.1151 229.33)` | Swimmer | black, 5.7 to 1 |
| 8 | `#329fc2` | `oklch(65.64% 0.1084 224.11)` | Major Blue | black, 6.8 to 1 |
| 9 | `#50accb` | `oklch(70.08% 0.0978 223.52)` | Frozen Wave | black, 8 to 1 |
| 10 | `#77b8d7` | `oklch(74.98% 0.0801 230.34)` | Tribute | black, 9.6 to 1 |
| 11 | `#9fc4e1` | `oklch(80.22% 0.0574 242.41)` | Pale Cerulean | black, 11.4 to 1 |
| 12 | `#becfe5` | `oklch(84.92% 0.0357 255.07)` | Misty Mountains | black, 13.2 to 1 |
| 13 | `#d1d8e6` | `oklch(88.19% 0.0207 263.68)` | Cheerful Whisper | black, 14.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #063894 0.000% 7.692%, #004498 7.692% 15.385%, #00539c 15.385% 23.077%, #0062a4 23.077% 30.769%, #0071ad 30.769% 38.462%, #0b80b4 38.462% 46.154%, #1a90bb 46.154% 53.846%, #329fc2 53.846% 61.538%, #50accb 61.538% 69.231%, #77b8d7 69.231% 76.923%, #9fc4e1 76.923% 84.615%, #becfe5 84.615% 92.308%, #d1d8e6 92.308% 100.000%);
background: linear-gradient(90deg, oklch(37.80% 0.1585 261.56) 0.000% 7.692%, oklch(40.43% 0.1509 258.18) 7.692% 15.385%, oklch(44.20% 0.1375 253.27) 15.385% 23.077%, oklch(48.50% 0.1298 247.77) 23.077% 30.769%, oklch(52.76% 0.1265 242.56) 30.769% 38.462%, oklch(56.90% 0.1205 236.40) 38.462% 46.154%, oklch(61.22% 0.1151 229.33) 46.154% 53.846%, oklch(65.64% 0.1084 224.11) 53.846% 61.538%, oklch(70.08% 0.0978 223.52) 61.538% 69.231%, oklch(74.98% 0.0801 230.34) 69.231% 76.923%, oklch(80.22% 0.0574 242.41) 76.923% 84.615%, oklch(84.92% 0.0357 255.07) 84.615% 92.308%, oklch(88.19% 0.0207 263.68) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.378 | 0.158 | 261.6 |
| 2 | 0.528 | 0.127 | 242.5 |
| 3 | 0.701 | 0.098 | 223.5 |
| 4 | 0.882 | 0.021 | 263.7 |

## In these collections

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

## Other forms

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