# Near-black, deep teal and bronze color palette

The Near-black, deep teal and bronze color palette brings together dark blue and gold. The colors span a broad lightness range, combining moderate color with clear contrast. Its dark and grounded character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is gold.

- Also called: Black, navy and brown angular swatches
- Seed: `kUGRK3nRm_7agqvJq8Dg`
- Page: https://grabient.com/kUGRK3nRm_7agqvJq8Dg?style=angularSwatches&steps=4&angle=120
- Drawn as: angular swatches, 4 steps, 120 degrees
- Kinds: dark to light, vivid, dark
- Hues: complementary
- Contrast of its darkest and lightest colors: 4.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 | `#01030a` | `oklch(9.84% 0.0248 258.05)` | Ninja | white, 20.6 to 1 |
| 2 | `#051b3d` | `oklch(22.83% 0.0703 258.05)` | Maastricht Blue | white, 17 to 1 |
| 3 | `#684900` | `oklch(42.92% 0.0888 80.46)` | Violin Brown | white, 8.2 to 1 |
| 4 | `#967500` | `oklch(57.87% 0.1183 88.95)` | Bhūrā Brown | black, 4.8 to 1 |

## CSS

```css
background: conic-gradient(from 120deg, #01030a 0.000% 25.000%, #051b3d 25.000% 50.000%, #684900 50.000% 75.000%, #967500 75.000% 100.000%);
background: conic-gradient(from 120deg, oklch(9.84% 0.0248 258.05) 0.000% 25.000%, oklch(22.83% 0.0703 258.05) 25.000% 50.000%, oklch(42.92% 0.0888 80.46) 50.000% 75.000%, oklch(57.87% 0.1183 88.95) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.098 | 0.025 | 258 |
| 2 | 0.228 | 0.07 | 258 |
| 3 | 0.429 | 0.09 | 80.5 |
| 4 | 0.579 | 0.12 | 89 |

## In these collections

- [Blue and yellow swatches](https://grabient.com/blue-and-yellow-swatches)
- [Navy and gold swatches](https://grabient.com/navy-and-gold-swatches)

## Other forms

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