# Blue and Green: Cobalt blue and aqua

The "Blue and Green: Cobalt blue and aqua" palette brings together blue, teal, light green, green, and dark green. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits botanical branding and garden event graphics. Its darkest tone is dark green, and its lightest tone is light green.

- Also called: Blue, light blue and dark green angular swatches
- Seed: `kWf5G5W7o6nKZupMPbzo50_4`
- Page: https://grabient.com/kWf5G5W7o6nKZupMPbzo50_4?style=angularSwatches&steps=5&angle=270
- Drawn as: angular swatches, 5 steps, 270 degrees
- Kinds: light center, vivid
- Hues: wide
- Contrast of its darkest and lightest colors: 10.9 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 | `#0759d2` | `oklch(50.00% 0.1998 260.16)` | Bnei Brak Bay | white, 6.2 to 1 |
| 2 | `#00b8d6` | `oklch(72.05% 0.1271 214.72)` | Maldives | black, 8.8 to 1 |
| 3 | `#b1eed7` | `oklch(90.16% 0.0703 169.28)` | Faint Clover | black, 16 to 1 |
| 4 | `#2d9833` | `oklch(59.84% 0.1695 143.91)` | Peppermint Toad | black, 5.6 to 1 |
| 5 | `#08320b` | `oklch(27.95% 0.0799 143.91)` | Haunted Hills | white, 14.2 to 1 |

## CSS

```css
background: conic-gradient(from 270deg, #0759d2 0.000% 20.000%, #00b8d6 20.000% 40.000%, #b1eed7 40.000% 60.000%, #2d9833 60.000% 80.000%, #08320b 80.000% 100.000%);
background: conic-gradient(from 270deg, oklch(50.00% 0.1998 260.16) 0.000% 20.000%, oklch(72.05% 0.1271 214.72) 20.000% 40.000%, oklch(90.16% 0.0703 169.28) 40.000% 60.000%, oklch(59.84% 0.1695 143.91) 60.000% 80.000%, oklch(27.95% 0.0799 143.91) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.5 | 0.2 | 260.2 |
| 2 | 0.72 | 0.16 | 214.7 |
| 3 | 0.902 | 0.07 | 169.3 |
| 4 | 0.598 | 0.169 | 143.9 |
| 5 | 0.28 | 0.08 | 143.9 |

## In these collections

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

## Other forms

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