# Navy and Brass Celebration

The Navy, teal and champagne autumn wedding palette brings together blue, orange, and pale orange. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits invitation suites and ceremony stationery. Its darkest tone is blue, and its lightest tone is pale orange.

- Also called: Navy and beige angular swatches
- Seed: `kUUCO3Qhk_tSiqr0D0CA`
- Page: https://grabient.com/kUUCO3Qhk_tSiqr0D0CA?style=angularSwatches&steps=4
- Drawn as: angular swatches, 4 steps, 90 degrees
- Kinds: dark to light
- Hues: complementary
- Contrast of its darkest and lightest colors: 9.9 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 | `#22324a` | `oklch(31.50% 0.0482 257.34)` | Crow Black | white, 12.9 to 1 |
| 2 | `#4e6b90` | `oklch(51.97% 0.0689 255.23)` | Wickford Bay | white, 5.5 to 1 |
| 3 | `#b68b4d` | `oklch(66.54% 0.0951 75.58)` | Yellow Acorn | black, 6.8 to 1 |
| 4 | `#f1e0c4` | `oklch(91.34% 0.0413 80.87)` | Paper Lantern | black, 16.2 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #22324a 0.000% 25.000%, #4e6b90 25.000% 50.000%, #b68b4d 50.000% 75.000%, #f1e0c4 75.000% 100.000%);
background: conic-gradient(from 90deg, oklch(31.50% 0.0482 257.34) 0.000% 25.000%, oklch(51.97% 0.0689 255.23) 25.000% 50.000%, oklch(66.54% 0.0951 75.58) 50.000% 75.000%, oklch(91.34% 0.0413 80.87) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.315 | 0.048 | 257.3 |
| 2 | 0.52 | 0.069 | 255.2 |
| 3 | 0.665 | 0.095 | 75.6 |
| 4 | 0.913 | 0.041 | 80.9 |

## In these collections

- [Autumn wedding swatches](https://grabient.com/autumn-wedding-swatches)

## Other forms

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