# Dark complementary brown and blue linear swatches

Dark complementary brown and blue linear swatches with 7 colors: #313101, #303402, #343504, #293a49, #203a9e, #1741d8, #1642fc. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaTS9OJ5lAiiYP2rDM_srxCbtUv7AYz_g`
- Page: https://grabient.com/kaTS9OJ5lAiiYP2rDM_srxCbtUv7AYz_g?style=linearSwatches&angle=135
- Drawn as: linear swatches, 7 steps, 135 degrees
- Kinds: vivid, dark
- Hues: complementary
- Contrast of its darkest and lightest colors: 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 | `#313101` | `oklch(30.31% 0.0648 109.69)` | Wasabi Nori | white, 13.3 to 1 |
| 2 | `#303402` | `oklch(31.10% 0.0689 114.97)` | Wasabi Nori | white, 12.9 to 1 |
| 3 | `#343504` | `oklch(31.89% 0.0661 110.74)` | Wasabi Nori | white, 12.6 to 1 |
| 4 | `#293a49` | `oklch(33.86% 0.0344 246.01)` | Craft | white, 11.7 to 1 |
| 5 | `#203a9e` | `oklch(39.76% 0.1654 267.14)` | North Star Blue | white, 9.7 to 1 |
| 6 | `#1741d8` | `oklch(46.46% 0.2329 265.03)` | Merchant Marine Blue | white, 7.5 to 1 |
| 7 | `#1642fc` | `oklch(50.39% 0.2728 265.03)` | Rare Blue | white, 6.5 to 1 |

## CSS

```css
background: linear-gradient(135deg, #313101 0.000% 14.286%, #303402 14.286% 28.571%, #343504 28.571% 42.857%, #293a49 42.857% 57.143%, #203a9e 57.143% 71.429%, #1741d8 71.429% 85.714%, #1642fc 85.714% 100.000%);
background: linear-gradient(135deg, oklch(30.31% 0.0648 109.69) 0.000% 14.286%, oklch(31.10% 0.0689 114.97) 14.286% 28.571%, oklch(31.89% 0.0661 110.74) 28.571% 42.857%, oklch(33.86% 0.0344 246.01) 42.857% 57.143%, oklch(39.76% 0.1654 267.14) 57.143% 71.429%, oklch(46.46% 0.2329 265.03) 71.429% 85.714%, oklch(50.39% 0.2728 265.03) 85.714% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.303 | 0.065 | 109.7 |
| 2 | 0.311 | 0.069 | 115 |
| 3 | 0.319 | 0.066 | 110.7 |
| 4 | 0.339 | 0.034 | 246 |
| 5 | 0.398 | 0.165 | 267.1 |
| 6 | 0.465 | 0.233 | 265 |
| 7 | 0.504 | 0.273 | 265 |

## In these collections

- [Yellow and blue gradients](https://grabient.com/yellow-and-blue-gradients)

## Other forms

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