# Teal and crimson color palette

The Teal and crimson color palette brings together blue, teal, and red. The colors span a moderate lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is teal.

- Also called: Navy, teal and brown angular swatches
- Seed: `kYUiqpNJq90CevzKpb8VZU-MogrS`
- Page: https://grabient.com/kYUiqpNJq90CevzKpb8VZU-MogrS?style=angularSwatches&steps=6&angle=135
- Drawn as: angular swatches, 6 steps, 135 degrees
- Kinds: vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.3 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 | `#11374d` | `oklch(32.28% 0.0579 237.66)` | Gibraltar Sea | white, 12.4 to 1 |
| 2 | `#065466` | `oklch(41.34% 0.0730 219.69)` | Rainy Morning | white, 8.4 to 1 |
| 3 | `#137282` | `oklch(50.79% 0.0841 213.35)` | Deep Current | white, 5.6 to 1 |
| 4 | `#008d99` | `oklch(58.66% 0.1004 205.96)` | Tempo Teal | black, 5.2 to 1 |
| 5 | `#6ba29f` | `oklch(67.32% 0.0579 191.16)` | Folk Song | black, 7.2 to 1 |
| 6 | `#a96759` | `oklch(58.27% 0.0896 32.65)` | Brick Dust | black, 4.7 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #11374d 0.000% 16.667%, #065466 16.667% 33.333%, #137282 33.333% 50.000%, #008d99 50.000% 66.667%, #6ba29f 66.667% 83.333%, #a96759 83.333% 100.000%);
background: conic-gradient(from 135deg, oklch(32.28% 0.0579 237.66) 0.000% 16.667%, oklch(41.34% 0.0730 219.69) 16.667% 33.333%, oklch(50.79% 0.0841 213.35) 33.333% 50.000%, oklch(58.66% 0.1004 205.96) 50.000% 66.667%, oklch(67.32% 0.0579 191.16) 66.667% 83.333%, oklch(58.27% 0.0896 32.65) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.323 | 0.058 | 237.7 |
| 2 | 0.413 | 0.073 | 219.7 |
| 3 | 0.508 | 0.084 | 213.4 |
| 4 | 0.587 | 0.103 | 206 |
| 5 | 0.673 | 0.058 | 191.2 |
| 6 | 0.583 | 0.09 | 32.6 |

## In these collections

- [Teal and orange swatches](https://grabient.com/teal-and-orange-swatches)
- [Complementary swatches](https://grabient.com/complementary-swatches)

## Other forms

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