# Teal and crimson bold palette

The Teal and crimson bold palette brings together dark blue, blue, teal, gold, and red. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is gold.

- Also called: Navy, blue, yellow and orange linear swatches
- Seed: `kWPx6qOqI_9MnvVrt7FT8K5A`
- Page: https://grabient.com/kWPx6qOqI_9MnvVrt7FT8K5A?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: light center, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 10 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 | `#0c2433` | `oklch(24.80% 0.0413 239.06)` | Fog of War | white, 16 to 1 |
| 2 | `#175e87` | `oklch(46.06% 0.0937 239.06)` | Sapphire Sparkle | white, 7 to 1 |
| 3 | `#23a0bb` | `oklch(65.35% 0.1089 216.87)` | Ahriman Blue | black, 6.8 to 1 |
| 4 | `#efc941` | `oklch(84.65% 0.1530 93.23)` | Colombian Yellow | black, 13.1 to 1 |
| 5 | `#e0532f` | `oklch(62.60% 0.1833 35.11)` | Frozen Tomato | black, 5.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0c2433 0.000% 20.000%, #175e87 20.000% 40.000%, #23a0bb 40.000% 60.000%, #efc941 60.000% 80.000%, #e0532f 80.000% 100.000%);
background: linear-gradient(90deg, oklch(24.80% 0.0413 239.06) 0.000% 20.000%, oklch(46.06% 0.0937 239.06) 20.000% 40.000%, oklch(65.35% 0.1089 216.87) 40.000% 60.000%, oklch(84.65% 0.1530 93.23) 60.000% 80.000%, oklch(62.60% 0.1833 35.11) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.248 | 0.041 | 239.1 |
| 2 | 0.461 | 0.094 | 239.1 |
| 3 | 0.654 | 0.109 | 216.9 |
| 4 | 0.846 | 0.153 | 93.2 |
| 5 | 0.626 | 0.183 | 35.1 |

## In these collections

- [Bold swatches](https://grabient.com/bold-swatches)

## Other forms

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