# Teal, ochre and pale mint color palette

The Teal, ochre and pale mint color palette brings together teal, magenta, yellow, blue, and pale green. The colors span a moderate lightness range, combining strong color with gentle contrast. Its light and open character suits stationery systems and print layouts. Its darkest tone is blue, and its lightest tone is pale green.

- Also called: Rainbow from teal to light blue angular swatches
- Seed: `kWxHuHWVPR_FBzbO11O95I0A`
- Page: https://grabient.com/kWxHuHWVPR_FBzbO11O95I0A?style=angularSwatches&steps=5&angle=135
- Drawn as: angular swatches, 5 steps, 135 degrees
- Kinds: vivid, rainbow
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.2 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 | `#00cfc7` | `oklch(77.17% 0.1333 189.84)` | Blue Martina | black, 10.7 to 1 |
| 2 | `#f753c6` | `oklch(70.08% 0.2301 342.02)` | Drunken Flamingo | black, 7 to 1 |
| 3 | `#fadb19` | `oklch(88.98% 0.1805 98.26)` | Candlelight | black, 15.1 to 1 |
| 4 | `#487aff` | `oklch(61.81% 0.2053 265.22)` | Lightish Blue | black, 5.5 to 1 |
| 5 | `#cef7e3` | `oklch(94.09% 0.0496 164.83)` | Cactus Water | black, 17.9 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #00cfc7 0.000% 20.000%, #f753c6 20.000% 40.000%, #fadb19 40.000% 60.000%, #487aff 60.000% 80.000%, #cef7e3 80.000% 100.000%);
background: conic-gradient(from 135deg, oklch(77.17% 0.1333 189.84) 0.000% 20.000%, oklch(70.08% 0.2301 342.02) 20.000% 40.000%, oklch(88.98% 0.1805 98.26) 40.000% 60.000%, oklch(61.81% 0.2053 265.22) 60.000% 80.000%, oklch(94.09% 0.0496 164.83) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.772 | 0.169 | 189.8 |
| 2 | 0.701 | 0.23 | 342 |
| 3 | 0.89 | 0.181 | 458.3 |
| 4 | 0.618 | 0.24 | 625.2 |
| 5 | 0.941 | 0.05 | 524.8 |

## In these collections

- [Back to school swatches](https://grabient.com/back-to-school-swatches)
- [Bright swatches](https://grabient.com/bright-swatches)
- [Happy swatches](https://grabient.com/happy-swatches)

## Other forms

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