# Teal, navy and plum steel pan poster

The Teal, navy and plum steel pan poster brings together teal, blue, dark blue, and purple. The colors span a moderate lightness range, combining moderate color with clear contrast. Its balanced and composed character suits poster layouts and editorial spreads. Its darkest tone is dark blue, and its lightest tone is teal.

- Also called: Teal, navy and purple angular swatches
- Seed: `kYok2IPR3CCsUQchk0eJqbDLM2QC`
- Page: https://grabient.com/kYok2IPR3CCsUQchk0eJqbDLM2QC?style=angularSwatches&steps=6&angle=225
- Drawn as: angular swatches, 6 steps, 225 degrees
- Kinds: dark center, vivid, dark
- Hues: two-hue
- Contrast of its darkest and lightest colors: 4.8 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 | `#16a09b` | `oklch(63.78% 0.1061 191.25)` | Talismanic Teal | black, 6.5 to 1 |
| 2 | `#066a76` | `oklch(48.03% 0.0813 209.21)` | Mary Blue | white, 6.3 to 1 |
| 3 | `#103d4d` | `oklch(33.86% 0.0551 225.07)` | Subterranean River | white, 11.6 to 1 |
| 4 | `#25203d` | `oklch(26.38% 0.0524 289.53)` | Throat | white, 15.5 to 1 |
| 5 | `#431851` | `oklch(30.31% 0.1061 317.00)` | Plunged Into Darkness | white, 14.1 to 1 |
| 6 | `#692479` | `oklch(40.16% 0.1488 319.12)` | Berry Blackmail | white, 9.9 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #16a09b 0.000% 16.667%, #066a76 16.667% 33.333%, #103d4d 33.333% 50.000%, #25203d 50.000% 66.667%, #431851 66.667% 83.333%, #692479 83.333% 100.000%);
background: conic-gradient(from 225deg, oklch(63.78% 0.1061 191.25) 0.000% 16.667%, oklch(48.03% 0.0813 209.21) 16.667% 33.333%, oklch(33.86% 0.0551 225.07) 33.333% 50.000%, oklch(26.38% 0.0524 289.53) 50.000% 66.667%, oklch(30.31% 0.1061 317.00) 66.667% 83.333%, oklch(40.16% 0.1488 319.12) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.638 | 0.106 | 191.3 |
| 2 | 0.48 | 0.081 | 209.2 |
| 3 | 0.339 | 0.055 | 225.1 |
| 4 | 0.264 | 0.052 | 289.5 |
| 5 | 0.303 | 0.106 | 317 |
| 6 | 0.402 | 0.149 | 319.1 |

## In these collections

- [Steel pan poster](https://grabient.com/steel-pan-poster)

## Other forms

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