# Cobalt, Sulfur and Ink

The Near-black, teal and champagne color palette brings together dark blue, blue, gold, and pale yellow. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is pale yellow.

- Also called: Black, blue, mustard and off-white linear swatches
- Seed: `kUKRK7xlq_-DBrB3iT_g`
- Page: https://grabient.com/kUKRK7xlq_-DBrB3iT_g?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: dark to light, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 16.3 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 | `#080d18` | `oklch(16.14% 0.0248 263.67)` | Midnight Oil | white, 19.3 to 1 |
| 2 | `#1d5dff` | `oklch(55.12% 0.2477 263.67)` | Kyanite | white, 5.1 to 1 |
| 3 | `#cfaf00` | `oklch(75.98% 0.1562 95.64)` | Sulphur | black, 9.7 to 1 |
| 4 | `#f0ecd9` | `oklch(94.09% 0.0248 95.65)` | Coastal Beige | black, 17.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #080d18 0.000% 25.000%, #1d5dff 25.000% 50.000%, #cfaf00 50.000% 75.000%, #f0ecd9 75.000% 100.000%);
background: linear-gradient(90deg, oklch(16.14% 0.0248 263.67) 0.000% 25.000%, oklch(55.12% 0.2477 263.67) 25.000% 50.000%, oklch(75.98% 0.1562 95.64) 50.000% 75.000%, oklch(94.09% 0.0248 95.65) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.161 | 0.025 | 263.7 |
| 2 | 0.551 | 0.249 | 263.7 |
| 3 | 0.76 | 0.181 | 95.6 |
| 4 | 0.941 | 0.025 | 95.6 |

## In these collections

- [Bold swatches](https://grabient.com/bold-swatches)
- [Primary color swatches](https://grabient.com/primary-color-swatches)
- [Energetic swatches](https://grabient.com/energetic-swatches)
- [New Year's Eve color palette](https://grabient.com/new-years-eve-color-palette)

## Other forms

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