# Near-black, gray and deep teal color palette

The Near-black, gray and deep teal color palette brings together dark gray, orange, off-white, and teal. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits website sections and interface mockups. Its darkest tone is dark gray, and its lightest tone is off-white.

- Also called: Black, brown, gray and teal angular swatches
- Seed: `kYKQcgHAa_62JP_yhb_0Do_8wrz-`
- Page: https://grabient.com/kYKQcgHAa_62JP_yhb_0Do_8wrz-?style=angularSwatches&steps=6&angle=225
- Drawn as: angular swatches, 6 steps, 225 degrees
- Kinds: light center, muted
- Hues: wide
- Contrast of its darkest and lightest colors: 14.4 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 | `#110c0a` | `oklch(16.14% 0.0096 45.00)` | Smoky Black | white, 19.3 to 1 |
| 2 | `#221814` | `oklch(22.05% 0.0179 45.00)` | Used Oil | white, 17.3 to 1 |
| 3 | `#483932` | `oklch(35.83% 0.0248 45.00)` | Film Noir | white, 11 to 1 |
| 4 | `#e8dcd6` | `oklch(90.16% 0.0152 45.00)` | Studio White | black, 15.5 to 1 |
| 5 | `#d56327` | `oklch(62.99% 0.1598 45.00)` | Tangerine Bliss | black, 5.6 to 1 |
| 6 | `#009482` | `oklch(59.84% 0.1084 180.26)` | Silk Sari | black, 5.5 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #110c0a 0.000% 16.667%, #221814 16.667% 33.333%, #483932 33.333% 50.000%, #e8dcd6 50.000% 66.667%, #d56327 66.667% 83.333%, #009482 83.333% 100.000%);
background: conic-gradient(from 225deg, oklch(16.14% 0.0096 45.00) 0.000% 16.667%, oklch(22.05% 0.0179 45.00) 16.667% 33.333%, oklch(35.83% 0.0248 45.00) 33.333% 50.000%, oklch(90.16% 0.0152 45.00) 50.000% 66.667%, oklch(62.99% 0.1598 45.00) 66.667% 83.333%, oklch(59.84% 0.1084 180.26) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.161 | 0.01 | 45 |
| 2 | 0.22 | 0.018 | 45 |
| 3 | 0.358 | 0.025 | 45 |
| 4 | 0.902 | 0.015 | 45 |
| 5 | 0.63 | 0.16 | 45 |
| 6 | 0.598 | 0.12 | 180.3 |

## In these collections

- [Modern swatches](https://grabient.com/modern-swatches)
- [UI swatches](https://grabient.com/ui-swatches)

## Other forms

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