# Harbor Navy Bands

Five diagonal bands run from icy blue-white through slate blue, deep navy, muted periwinkle, and finish in ink blue. The sequence offers a pale field, two strong dark anchors, and cooler middle accents with clear separation. It suits report covers, maritime posters, navigation panels, and presentation graphics that need dependable contrast without bright cyan.

- Also called: Monochrome white and navy linear swatches
- Seed: `kW8wSMSBbFqqYQDJlEGrxY-4`
- Page: https://grabient.com/kW8wSMSBbFqqYQDJlEGrxY-4?style=linearSwatches&steps=5&angle=45
- Drawn as: linear swatches, 5 steps, 45 degrees
- Kinds: dark center, muted, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.5 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 | `#edf2f2` | `oklch(95.67% 0.0055 196.87)` | Maui Mist | black, 18.5 to 1 |
| 2 | `#577b99` | `oklch(56.69% 0.0620 245.49)` | Glass Sapphire | black, 4.6 to 1 |
| 3 | `#173957` | `oklch(33.46% 0.0661 247.60)` | Gibraltar Sea | white, 11.9 to 1 |
| 4 | `#687a9b` | `oklch(57.87% 0.0551 262.39)` | Chicory Flower | black, 4.8 to 1 |
| 5 | `#28415f` | `oklch(37.01% 0.0606 253.94)` | Blue Accolade | white, 10.4 to 1 |

## CSS

```css
background: linear-gradient(45deg, #edf2f2 0.000% 20.000%, #577b99 20.000% 40.000%, #173957 40.000% 60.000%, #687a9b 60.000% 80.000%, #28415f 80.000% 100.000%);
background: linear-gradient(45deg, oklch(95.67% 0.0055 196.87) 0.000% 20.000%, oklch(56.69% 0.0620 245.49) 20.000% 40.000%, oklch(33.46% 0.0661 247.60) 40.000% 60.000%, oklch(57.87% 0.0551 262.39) 60.000% 80.000%, oklch(37.01% 0.0606 253.94) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.957 | 0.006 | 196.9 |
| 2 | 0.567 | 0.062 | 245.5 |
| 3 | 0.335 | 0.066 | 247.6 |
| 4 | 0.579 | 0.055 | 262.4 |
| 5 | 0.37 | 0.061 | 253.9 |

## In these collections

- [Navy swatches](https://grabient.com/navy-swatches)

## Other forms

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