# Mint Marine Teal Bands

These three diagonal bands move from pale mint through deep blue teal and finish in saturated green teal. The compact sequence gives a light field and two clearly different dark aquatic roles without unnecessary variation. Use them for teal icons, small charts, coastal packaging, or concise interface systems that need strong contrast in only three coordinated colors.

- Also called: Gray and teal linear swatches
- Seed: `kS6BFzORtG8cjuy`
- Page: https://grabient.com/kS6BFzORtG8cjuy?style=linearSwatches&steps=3&angle=210
- Drawn as: linear swatches, 3 steps, 210 degrees
- Kinds: dark center, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 5.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 | `#d6e8de` | `oklch(91.34% 0.0234 161.72)` | Lit’l Buoy Blew | black, 16.3 to 1 |
| 2 | `#165e72` | `oklch(44.88% 0.0744 220.90)` | Deep Blue Sea | white, 7.2 to 1 |
| 3 | `#108777` | `oklch(55.91% 0.0978 180.74)` | Green Ink | black, 4.7 to 1 |

## CSS

```css
background: linear-gradient(210deg, #d6e8de 0.000% 33.333%, #165e72 33.333% 66.667%, #108777 66.667% 100.000%);
background: linear-gradient(210deg, oklch(91.34% 0.0234 161.72) 0.000% 33.333%, oklch(44.88% 0.0744 220.90) 33.333% 66.667%, oklch(55.91% 0.0978 180.74) 66.667% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.913 | 0.023 | 161.7 |
| 2 | 0.449 | 0.074 | 220.9 |
| 3 | 0.559 | 0.098 | 180.7 |

## In these collections

- [Teal swatches](https://grabient.com/teal-swatches)

## Other forms

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