# Cobalt blue and moss iridescent glass interface

The Cobalt blue and moss iridescent glass interface brings together blue, magenta, red, orange, and light green. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is light green.

- Also called: Blue, purple and green linear swatches
- Seed: `kYgGy4t61Cr6lRpNp8VWyFEeMgRo`
- Page: https://grabient.com/kYgGy4t61Cr6lRpNp8VWyFEeMgRo?style=linearSwatches&steps=6&angle=0
- Drawn as: linear swatches, 6 steps, 0 degrees
- Hues: wide
- Contrast of its darkest and lightest colors: 4.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 | `#2b61b8` | `oklch(50.39% 0.1488 259.45)` | Blue Streak | white, 6 to 1 |
| 2 | `#4a4593` | `oklch(43.70% 0.1240 282.70)` | Spectrum Blue | white, 8.1 to 1 |
| 3 | `#864874` | `oklch(49.21% 0.1020 338.71)` | Grape Kiss | white, 6.5 to 1 |
| 4 | `#bc6763` | `oklch(61.02% 0.1089 24.15)` | Faded Rose | black, 5.2 to 1 |
| 5 | `#cd9767` | `oklch(71.65% 0.0909 62.19)` | Glazed Pecan | black, 8.1 to 1 |
| 6 | `#b2bf7e` | `oklch(77.95% 0.0882 118.20)` | Dried Caspia | black, 10.6 to 1 |

## CSS

```css
background: linear-gradient(0deg, #2b61b8 0.000% 16.667%, #4a4593 16.667% 33.333%, #864874 33.333% 50.000%, #bc6763 50.000% 66.667%, #cd9767 66.667% 83.333%, #b2bf7e 83.333% 100.000%);
background: linear-gradient(0deg, oklch(50.39% 0.1488 259.45) 0.000% 16.667%, oklch(43.70% 0.1240 282.70) 16.667% 33.333%, oklch(49.21% 0.1020 338.71) 33.333% 50.000%, oklch(61.02% 0.1089 24.15) 50.000% 66.667%, oklch(71.65% 0.0909 62.19) 66.667% 83.333%, oklch(77.95% 0.0882 118.20) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.504 | 0.149 | 259.5 |
| 2 | 0.437 | 0.124 | 282.7 |
| 3 | 0.492 | 0.102 | 338.7 |
| 4 | 0.61 | 0.109 | 384.1 |
| 5 | 0.717 | 0.091 | 422.2 |
| 6 | 0.78 | 0.088 | 478.2 |

## In these collections

- [Iridescent glass interface](https://grabient.com/iridescent-glass-interface)

## Other forms

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