# Deep teal copper and tangerine stripes

Near-black blue-green develops through deep teal and aqua, passes a brief sage and olive bridge, then warms into copper, coral and vivid tangerine. Sixteen diagonal swatches keep the steps distinct while joining the cool shadows and bright orange finish. This teal and orange palette balances a substantial dark section with a concentrated warm accent.

- Also called: Black, teal, green and orange linear swatches
- Seed: `kWOBqisRe-sujvRbqTCU8W8o`
- Page: https://grabient.com/kWOBqisRe-sujvRbqTCU8W8o?style=linearSwatches&steps=16&angle=135
- Drawn as: linear swatches, 16 steps, 135 degrees
- Kinds: light center, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 6.7 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 | `#061e28` | `oklch(22.05% 0.0358 228.52)` | Oxford by Night | white, 17.2 to 1 |
| 2 | `#072631` | `oklch(25.16% 0.0414 226.81)` | Daintree | white, 15.8 to 1 |
| 3 | `#09323f` | `oklch(29.62% 0.0493 224.41)` | Nordic Noir | white, 13.6 to 1 |
| 4 | `#0b404f` | `oklch(34.73% 0.0582 221.11)` | Cold and Dark | white, 11.2 to 1 |
| 5 | `#0c505f` | `oklch(39.87% 0.0669 216.95)` | Sandalwood Grey Blue | white, 9 to 1 |
| 6 | `#0e6171` | `oklch(45.52% 0.0761 214.78)` | Nocturnal Sea | white, 7 to 1 |
| 7 | `#117484` | `oklch(51.49% 0.0857 211.63)` | Glamour Green | white, 5.4 to 1 |
| 8 | `#0f888f` | `oklch(57.05% 0.0943 202.28)` | Ocean Soul | black, 4.9 to 1 |
| 9 | `#299988` | `oklch(61.69% 0.1003 180.81)` | Flamboyant Teal | black, 5.9 to 1 |
| 10 | `#6aa36a` | `oklch(65.99% 0.1021 144.34)` | Bulbasaur | black, 7 to 1 |
| 11 | `#a8a04f` | `oklch(69.55% 0.1039 103.31)` | Queen Palm | black, 7.8 to 1 |
| 12 | `#d09752` | `oklch(71.77% 0.1102 69.57)` | Georgian Yellow | black, 8.2 to 1 |
| 13 | `#e28c57` | `oklch(71.90% 0.1259 51.17)` | Aegean Sky | black, 8.1 to 1 |
| 14 | `#ea7b4d` | `oklch(70.00% 0.1500 42.44)` | Sizzling Sunset | black, 7.4 to 1 |
| 15 | `#ed683b` | `oklch(67.47% 0.1746 38.87)` | Flaming Orange | black, 6.6 to 1 |
| 16 | `#ee5a30` | `oklch(65.75% 0.1915 36.19)` | Day Glow Orange | black, 6.1 to 1 |

## CSS

```css
background: linear-gradient(135deg, #061e28 0.000% 6.250%, #072631 6.250% 12.500%, #09323f 12.500% 18.750%, #0b404f 18.750% 25.000%, #0c505f 25.000% 31.250%, #0e6171 31.250% 37.500%, #117484 37.500% 43.750%, #0f888f 43.750% 50.000%, #299988 50.000% 56.250%, #6aa36a 56.250% 62.500%, #a8a04f 62.500% 68.750%, #d09752 68.750% 75.000%, #e28c57 75.000% 81.250%, #ea7b4d 81.250% 87.500%, #ed683b 87.500% 93.750%, #ee5a30 93.750% 100.000%);
background: linear-gradient(135deg, oklch(22.05% 0.0358 228.52) 0.000% 6.250%, oklch(25.16% 0.0414 226.81) 6.250% 12.500%, oklch(29.62% 0.0493 224.41) 12.500% 18.750%, oklch(34.73% 0.0582 221.11) 18.750% 25.000%, oklch(39.87% 0.0669 216.95) 25.000% 31.250%, oklch(45.52% 0.0761 214.78) 31.250% 37.500%, oklch(51.49% 0.0857 211.63) 37.500% 43.750%, oklch(57.05% 0.0943 202.28) 43.750% 50.000%, oklch(61.69% 0.1003 180.81) 50.000% 56.250%, oklch(65.99% 0.1021 144.34) 56.250% 62.500%, oklch(69.55% 0.1039 103.31) 62.500% 68.750%, oklch(71.77% 0.1102 69.57) 68.750% 75.000%, oklch(71.90% 0.1259 51.17) 75.000% 81.250%, oklch(70.00% 0.1500 42.44) 81.250% 87.500%, oklch(67.47% 0.1746 38.87) 87.500% 93.750%, oklch(65.75% 0.1915 36.19) 93.750% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.22 | 0.036 | 228.5 |
| 2 | 0.386 | 0.065 | 217.9 |
| 3 | 0.594 | 0.098 | 193.6 |
| 4 | 0.72 | 0.113 | 63.7 |
| 5 | 0.657 | 0.192 | 36.2 |

## In these collections

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

## Other forms

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