# Deep cyan and blue color palette

The Deep cyan and blue color palette brings together blue. The colors span a moderate lightness range, combining strong color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its lightest and darkest tones both fall within the blue color family.

- Also called: Monochrome blue angular swatches
- Seed: `kYY0GtQ6i_EytwDEPcJt8HBqe0QC`
- Page: https://grabient.com/kYY0GtQ6i_EytwDEPcJt8HBqe0QC?style=angularSwatches&steps=6&angle=315
- Drawn as: angular swatches, 6 steps, 315 degrees
- Kinds: vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.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 | `#094971` | `oklch(38.98% 0.0896 243.28)` | Broadwater Blue | white, 9.5 to 1 |
| 2 | `#0a75a4` | `oklch(53.15% 0.1116 235.88)` | Summer Lake | white, 5.1 to 1 |
| 3 | `#1c8ac3` | `oklch(60.24% 0.1254 238.00)` | Cyan Cornflower Blue | black, 5.4 to 1 |
| 4 | `#2769cd` | `oklch(53.54% 0.1695 259.13)` | Celtic Blue | white, 5.2 to 1 |
| 5 | `#383eb2` | `oklch(43.70% 0.1805 273.93)` | Early Spring Night | white, 8.3 to 1 |
| 6 | `#231f76` | `oklch(31.10% 0.1433 276.04)` | Snorlax | white, 13.7 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #094971 0.000% 16.667%, #0a75a4 16.667% 33.333%, #1c8ac3 33.333% 50.000%, #2769cd 50.000% 66.667%, #383eb2 66.667% 83.333%, #231f76 83.333% 100.000%);
background: conic-gradient(from 315deg, oklch(38.98% 0.0896 243.28) 0.000% 16.667%, oklch(53.15% 0.1116 235.88) 16.667% 33.333%, oklch(60.24% 0.1254 238.00) 33.333% 50.000%, oklch(53.54% 0.1695 259.13) 50.000% 66.667%, oklch(43.70% 0.1805 273.93) 66.667% 83.333%, oklch(31.10% 0.1433 276.04) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.39 | 0.09 | 243.3 |
| 2 | 0.531 | 0.112 | 235.9 |
| 3 | 0.602 | 0.125 | 238 |
| 4 | 0.535 | 0.169 | 259.1 |
| 5 | 0.437 | 0.181 | 273.9 |
| 6 | 0.311 | 0.143 | 276 |

## In these collections

- [Jewel tone swatches](https://grabient.com/jewel-tone-swatches)
- [Jewel tones](https://grabient.com/jewel-tones)

## Other forms

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