# Blue and terracotta iridescent glass interface palette

The Blue and terracotta iridescent glass interface palette brings together blue, light teal, light yellow, and orange. 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 yellow.

- Also called: Complementary blue, gray and tan linear gradient
- Seed: `kaaWLAQDQ_E0tPzYHr63oq8d-KsXbGrxA`
- Page: https://grabient.com/kaaWLAQDQ_E0tPzYHr63oq8d-KsXbGrxA?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: dark to light, cool
- Hues: complementary
- 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 | `#304293` | `oklch(41.34% 0.1350 270.00)` | Blue Oblivion | white, 8.9 to 1 |
| 2 | `#314698` | `oklch(42.50% 0.1365 269.02)` | Cascade Twilight | white, 8.5 to 1 |
| 3 | `#324b9f` | `oklch(44.13% 0.1389 267.63)` | Dazzling Blue | white, 7.9 to 1 |
| 4 | `#3251a6` | `oklch(46.05% 0.1414 266.01)` | Dazzling Blue | white, 7.3 to 1 |
| 5 | `#3458ae` | `oklch(48.09% 0.1431 264.35)` | Blasphemous Blue | white, 6.6 to 1 |
| 6 | `#355fb4` | `oklch(50.08% 0.1435 262.83)` | Adventure of the Seas | white, 6.1 to 1 |
| 7 | `#3865b9` | `oklch(51.99% 0.1420 261.57)` | Blue Streak | white, 5.6 to 1 |
| 8 | `#3c6cbe` | `oklch(54.00% 0.1393 260.45)` | Matt Blue | white, 5.1 to 1 |
| 9 | `#4173c3` | `oklch(56.05% 0.1357 259.35)` | Palace Blue | white, 4.6 to 1 |
| 10 | `#467ac7` | `oklch(58.07% 0.1311 258.17)` | Celestial Plum | black, 4.8 to 1 |
| 11 | `#4c81ca` | `oklch(60.01% 0.1259 256.79)` | Worn Denim | black, 5.2 to 1 |
| 12 | `#5187cc` | `oklch(61.85% 0.1200 255.24)` | Berlin Blue | black, 5.7 to 1 |
| 13 | `#588ece` | `oklch(63.67% 0.1132 253.84)` | Blue Dart | black, 6.1 to 1 |
| 14 | `#5f94cf` | `oklch(65.42% 0.1056 252.29)` | Winter Lake | black, 6.6 to 1 |
| 15 | `#669acf` | `oklch(67.08% 0.0974 250.28)` | Lothern Blue | black, 7 to 1 |
| 16 | `#6d9fce` | `oklch(68.60% 0.0886 247.49)` | Blue Electress | black, 7.5 to 1 |
| 17 | `#73a4cc` | `oklch(69.94% 0.0791 243.98)` | Overcast | black, 7.9 to 1 |
| 18 | `#7ca8c9` | `oklch(71.17% 0.0675 241.28)` | Mirror Lake | black, 8.2 to 1 |
| 19 | `#86abc4` | `oklch(72.26% 0.0550 238.22)` | Colorado Springs | black, 8.6 to 1 |
| 20 | `#8eaec0` | `oklch(73.20% 0.0432 233.20)` | Thermocline | black, 8.9 to 1 |
| 21 | `#95b0bb` | `oklch(73.99% 0.0335 224.61)` | Mountain Stream | black, 9.1 to 1 |
| 22 | `#9ab2b6` | `oklch(74.59% 0.0273 210.64)` | Mohair Soft Blue Grey | black, 9.3 to 1 |
| 23 | `#9eb3b1` | `oklch(75.03% 0.0239 188.81)` | Veranda Charm | black, 9.5 to 1 |
| 24 | `#a3b4aa` | `oklch(75.30% 0.0227 161.92)` | Atlantic Foam | black, 9.6 to 1 |
| 25 | `#a9b3a4` | `oklch(75.41% 0.0234 134.01)` | Forever Green | black, 9.6 to 1 |
| 26 | `#b0b19e` | `oklch(75.36% 0.0258 109.09)` | Ballie Scott Sage | black, 9.6 to 1 |
| 27 | `#b5ae9a` | `oklch(75.15% 0.0297 91.13)` | True Khaki | black, 9.4 to 1 |
| 28 | `#b9ab93` | `oklch(74.62% 0.0368 79.78)` | Portico | black, 9.2 to 1 |
| 29 | `#bda68b` | `oklch(73.84% 0.0466 72.61)` | Oakwood | black, 9 to 1 |
| 30 | `#c0a181` | `oklch(72.97% 0.0571 68.29)` | Milano | black, 8.6 to 1 |
| 31 | `#c39d79` | `oklch(72.18% 0.0666 65.49)` | Tan Plan | black, 8.4 to 1 |
| 32 | `#c59a74` | `oklch(71.65% 0.0730 62.88)` | Chimaera Brown | black, 8.2 to 1 |

## CSS

```css
background: linear-gradient(180deg, #304293 0.0%, #314698 3.2%, #324b9f 6.5%, #3251a6 9.7%, #3458ae 12.9%, #355fb4 16.1%, #3865b9 19.4%, #3c6cbe 22.6%, #4173c3 25.8%, #467ac7 29.0%, #4c81ca 32.3%, #5187cc 35.5%, #588ece 38.7%, #5f94cf 41.9%, #669acf 45.2%, #6d9fce 48.4%, #73a4cc 51.6%, #7ca8c9 54.8%, #86abc4 58.1%, #8eaec0 61.3%, #95b0bb 64.5%, #9ab2b6 67.7%, #9eb3b1 71.0%, #a3b4aa 74.2%, #a9b3a4 77.4%, #b0b19e 80.6%, #b5ae9a 83.9%, #b9ab93 87.1%, #bda68b 90.3%, #c0a181 93.5%, #c39d79 96.8%, #c59a74 100.0%);
background: linear-gradient(180deg in oklch, oklch(41.34% 0.1350 270.00) 0.0%, oklch(42.50% 0.1365 269.02) 3.2%, oklch(44.13% 0.1389 267.63) 6.5%, oklch(46.05% 0.1414 266.01) 9.7%, oklch(48.09% 0.1431 264.35) 12.9%, oklch(50.08% 0.1435 262.83) 16.1%, oklch(51.99% 0.1420 261.57) 19.4%, oklch(54.00% 0.1393 260.45) 22.6%, oklch(56.05% 0.1357 259.35) 25.8%, oklch(58.07% 0.1311 258.17) 29.0%, oklch(60.01% 0.1259 256.79) 32.3%, oklch(61.85% 0.1200 255.24) 35.5%, oklch(63.67% 0.1132 253.84) 38.7%, oklch(65.42% 0.1056 252.29) 41.9%, oklch(67.08% 0.0974 250.28) 45.2%, oklch(68.60% 0.0886 247.49) 48.4%, oklch(69.94% 0.0791 243.98) 51.6%, oklch(71.17% 0.0675 241.28) 54.8%, oklch(72.26% 0.0550 238.22) 58.1%, oklch(73.20% 0.0432 233.20) 61.3%, oklch(73.99% 0.0335 224.61) 64.5%, oklch(74.59% 0.0273 210.64) 67.7%, oklch(75.03% 0.0239 188.81) 71.0%, oklch(75.30% 0.0227 161.92) 74.2%, oklch(75.41% 0.0234 134.01) 77.4%, oklch(75.36% 0.0258 109.09) 80.6%, oklch(75.15% 0.0297 91.13) 83.9%, oklch(74.62% 0.0368 79.78) 87.1%, oklch(73.84% 0.0466 72.61) 90.3%, oklch(72.97% 0.0571 68.29) 93.5%, oklch(72.18% 0.0666 65.49) 96.8%, oklch(71.65% 0.0730 62.88) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.413 | 0.135 | 270 |
| 2 | 0.504 | 0.143 | 262.6 |
| 3 | 0.606 | 0.124 | 256.3 |
| 4 | 0.693 | 0.084 | 245.7 |
| 5 | 0.744 | 0.029 | 216.1 |
| 6 | 0.752 | 0.029 | 93.5 |
| 7 | 0.717 | 0.073 | 62.9 |

## In these collections

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

## Other forms

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