# Color Palette: Powder blue and deep teal

The "Color Palette: Powder blue and deep teal" palette brings together off-white, dark blue, teal, orange, and purple. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits website sections and interface mockups. Its darkest tone is dark blue, and its lightest tone is off-white.

- Also called: Rainbow from light blue to purple linear swatches
- Seed: `kW8Q_AGZQ_8mvNVXujDRjayA`
- Page: https://grabient.com/kW8Q_AGZQ_8mvNVXujDRjayA?style=linearSwatches&steps=5&angle=135
- Drawn as: linear swatches, 5 steps, 135 degrees
- Kinds: dark center, vivid, rainbow
- Hues: two-hue
- Contrast of its darkest and lightest colors: 15.6 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 | `#e8eefd` | `oklch(94.88% 0.0207 270.00)` | Brilliant White | black, 18 to 1 |
| 2 | `#0d142f` | `oklch(20.08% 0.0551 270.00)` | Liberty Blue | white, 18.1 to 1 |
| 3 | `#008e7c` | `oklch(57.88% 0.1049 180.17)` | Philips Green | black, 5.1 to 1 |
| 4 | `#e67a29` | `oklch(68.90% 0.1598 52.31)` | Spiced up Orange | black, 7.1 to 1 |
| 5 | `#7a5cbf` | `oklch(55.12% 0.1502 295.01)` | Fuchsia Blue | white, 5.1 to 1 |

## CSS

```css
background: linear-gradient(135deg, #e8eefd 0.000% 20.000%, #0d142f 20.000% 40.000%, #008e7c 40.000% 60.000%, #e67a29 60.000% 80.000%, #7a5cbf 80.000% 100.000%);
background: linear-gradient(135deg, oklch(94.88% 0.0207 270.00) 0.000% 20.000%, oklch(20.08% 0.0551 270.00) 20.000% 40.000%, oklch(57.88% 0.1049 180.17) 40.000% 60.000%, oklch(68.90% 0.1598 52.31) 60.000% 80.000%, oklch(55.12% 0.1502 295.01) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.949 | 0.021 | 270 |
| 2 | 0.201 | 0.055 | 270 |
| 3 | 0.579 | 0.13 | 180.2 |
| 4 | 0.689 | 0.16 | 52.3 |
| 5 | 0.551 | 0.15 | -65 |

## In these collections

- [Modern swatches](https://grabient.com/modern-swatches)
- [Presentation swatches](https://grabient.com/presentation-swatches)
- [UI swatches](https://grabient.com/ui-swatches)

## Other forms

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