# Emerald and near-black color palette

The Emerald and near-black color palette brings together green and dark green. 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 green, and its lightest tone is green.

- Also called: Monochrome green and black angular swatches
- Seed: `kWo3RoQ7M_7Wpv-lHT_kwy_4`
- Page: https://grabient.com/kWo3RoQ7M_7Wpv-lHT_kwy_4?style=angularSwatches&steps=5&angle=60
- Drawn as: angular swatches, 5 steps, 60 degrees
- Kinds: light to dark, vivid, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 6.2 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 | `#3ca54c` | `oklch(64.17% 0.1598 146.25)` | Leapfrog | black, 6.7 to 1 |
| 2 | `#258135` | `oklch(53.15% 0.1406 146.25)` | Warpstone Glow | white, 4.9 to 1 |
| 3 | `#155d23` | `oklch(42.13% 0.1144 146.25)` | Sombre Green | white, 8 to 1 |
| 4 | `#073610` | `oklch(29.13% 0.0799 146.25)` | Gameboy Contrast | white, 13.6 to 1 |
| 5 | `#030f04` | `oklch(14.96% 0.0344 146.25)` | Blackn’t | white, 19.5 to 1 |

## CSS

```css
background: conic-gradient(from 60deg, #3ca54c 0.000% 20.000%, #258135 20.000% 40.000%, #155d23 40.000% 60.000%, #073610 60.000% 80.000%, #030f04 80.000% 100.000%);
background: conic-gradient(from 60deg, oklch(64.17% 0.1598 146.25) 0.000% 20.000%, oklch(53.15% 0.1406 146.25) 20.000% 40.000%, oklch(42.13% 0.1144 146.25) 40.000% 60.000%, oklch(29.13% 0.0799 146.25) 60.000% 80.000%, oklch(14.96% 0.0344 146.25) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.642 | 0.16 | 146.3 |
| 2 | 0.531 | 0.141 | 146.3 |
| 3 | 0.421 | 0.114 | 146.3 |
| 4 | 0.291 | 0.08 | 146.3 |
| 5 | 0.15 | 0.034 | 146.3 |

## In these collections

- [Monochromatic swatches](https://grabient.com/monochromatic-swatches)
- [Shade swatches](https://grabient.com/shade-swatches)

## Other forms

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