# Blue app background palette

This palette moves within blue. It steadily lightens across a moderate lightness range, combining restrained color with gentle contrast. Its balanced and composed character suits website sections and presentation backgrounds, especially compositions that need closely related light and dark areas.

- Also called: Muted monochrome navy to blue linear gradient
- Seed: `kSVB29uhQ-8yWvy`
- Page: https://grabient.com/kSVB29uhQ-8yWvy?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: muted, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.1 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 | `#2c354a` | `oklch(33.07% 0.0400 266.48)` | Bunting | white, 12.2 to 1 |
| 2 | `#2d364c` | `oklch(33.52% 0.0405 266.17)` | German Liquorice | white, 12 to 1 |
| 3 | `#2e384e` | `oklch(34.07% 0.0412 265.79)` | German Liquorice | white, 11.7 to 1 |
| 4 | `#2f3950` | `oklch(34.69% 0.0421 265.35)` | Biscay | white, 11.4 to 1 |
| 5 | `#303b52` | `oklch(35.38% 0.0430 264.85)` | Biscay | white, 11.1 to 1 |
| 6 | `#323d55` | `oklch(36.13% 0.0440 264.31)` | Winter Sea | white, 10.8 to 1 |
| 7 | `#333f58` | `oklch(36.94% 0.0451 263.73)` | Passionate Blueberry | white, 10.4 to 1 |
| 8 | `#35425b` | `oklch(37.79% 0.0462 263.12)` | Passionate Blueberry | white, 10.1 to 1 |
| 9 | `#36445e` | `oklch(38.69% 0.0474 262.50)` | Diplomatic | white, 9.7 to 1 |
| 10 | `#384761` | `oklch(39.60% 0.0486 261.86)` | Spelunking | white, 9.3 to 1 |
| 11 | `#3a4964` | `oklch(40.54% 0.0497 261.22)` | Silent Sea | white, 9 to 1 |
| 12 | `#3c4c68` | `oklch(41.49% 0.0509 260.58)` | Buster | white, 8.6 to 1 |
| 13 | `#3e4f6b` | `oklch(42.44% 0.0520 259.96)` | Ensign Blue | white, 8.3 to 1 |
| 14 | `#3f516e` | `oklch(43.39% 0.0530 259.37)` | Blue Flag | white, 7.9 to 1 |
| 15 | `#415471` | `oklch(44.32% 0.0539 258.80)` | Champlain Blue | white, 7.6 to 1 |
| 16 | `#435774` | `oklch(45.23% 0.0547 258.28)` | Hidden Sapphire | white, 7.3 to 1 |
| 17 | `#455977` | `oklch(46.12% 0.0555 257.79)` | Chambray | white, 7 to 1 |
| 18 | `#475c7b` | `oklch(47.06% 0.0561 257.31)` | Stream | white, 6.8 to 1 |
| 19 | `#495f7e` | `oklch(48.07% 0.0568 256.82)` | Parlour Blue | white, 6.5 to 1 |
| 20 | `#4b6281` | `oklch(49.11% 0.0574 256.33)` | Sapphire Earbobs | white, 6.2 to 1 |
| 21 | `#4e6585` | `oklch(50.19% 0.0579 255.85)` | Luxe Blue | white, 5.9 to 1 |
| 22 | `#506988` | `oklch(51.28% 0.0585 255.37)` | Revel Blue | white, 5.6 to 1 |
| 23 | `#536c8c` | `oklch(52.38% 0.0589 254.90)` | Berry Pie | white, 5.4 to 1 |
| 24 | `#556f8f` | `oklch(53.47% 0.0594 254.44)` | Moonlight Blue | white, 5.1 to 1 |
| 25 | `#587293` | `oklch(54.54% 0.0598 254.00)` | Blue Jacket | white, 4.9 to 1 |
| 26 | `#5a7596` | `oklch(55.57% 0.0602 253.59)` | Privileged Elite | white, 4.7 to 1 |
| 27 | `#5d7899` | `oklch(56.55% 0.0606 253.19)` | Quiet Harbour | black, 4.6 to 1 |
| 28 | `#5f7b9c` | `oklch(57.46% 0.0609 252.82)` | Blue Plate | black, 4.8 to 1 |
| 29 | `#617e9f` | `oklch(58.30% 0.0612 252.49)` | Smoky Violet | black, 4.9 to 1 |
| 30 | `#6380a1` | `oklch(59.06% 0.0615 252.18)` | Blue Boater | black, 5.1 to 1 |
| 31 | `#6482a4` | `oklch(59.70% 0.0618 251.92)` | Blue Boater | black, 5.2 to 1 |
| 32 | `#6684a5` | `oklch(60.24% 0.0620 251.69)` | Moody Indigo | black, 5.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #2c354a 0.0%, #2d364c 3.2%, #2e384e 6.5%, #2f3950 9.7%, #303b52 12.9%, #323d55 16.1%, #333f58 19.4%, #35425b 22.6%, #36445e 25.8%, #384761 29.0%, #3a4964 32.3%, #3c4c68 35.5%, #3e4f6b 38.7%, #3f516e 41.9%, #415471 45.2%, #435774 48.4%, #455977 51.6%, #475c7b 54.8%, #495f7e 58.1%, #4b6281 61.3%, #4e6585 64.5%, #506988 67.7%, #536c8c 71.0%, #556f8f 74.2%, #587293 77.4%, #5a7596 80.6%, #5d7899 83.9%, #5f7b9c 87.1%, #617e9f 90.3%, #6380a1 93.5%, #6482a4 96.8%, #6684a5 100.0%);
background: linear-gradient(90deg in oklch, oklch(33.07% 0.0400 266.48) 0.0%, oklch(33.52% 0.0405 266.17) 3.2%, oklch(34.07% 0.0412 265.79) 6.5%, oklch(34.69% 0.0421 265.35) 9.7%, oklch(35.38% 0.0430 264.85) 12.9%, oklch(36.13% 0.0440 264.31) 16.1%, oklch(36.94% 0.0451 263.73) 19.4%, oklch(37.79% 0.0462 263.12) 22.6%, oklch(38.69% 0.0474 262.50) 25.8%, oklch(39.60% 0.0486 261.86) 29.0%, oklch(40.54% 0.0497 261.22) 32.3%, oklch(41.49% 0.0509 260.58) 35.5%, oklch(42.44% 0.0520 259.96) 38.7%, oklch(43.39% 0.0530 259.37) 41.9%, oklch(44.32% 0.0539 258.80) 45.2%, oklch(45.23% 0.0547 258.28) 48.4%, oklch(46.12% 0.0555 257.79) 51.6%, oklch(47.06% 0.0561 257.31) 54.8%, oklch(48.07% 0.0568 256.82) 58.1%, oklch(49.11% 0.0574 256.33) 61.3%, oklch(50.19% 0.0579 255.85) 64.5%, oklch(51.28% 0.0585 255.37) 67.7%, oklch(52.38% 0.0589 254.90) 71.0%, oklch(53.47% 0.0594 254.44) 74.2%, oklch(54.54% 0.0598 254.00) 77.4%, oklch(55.57% 0.0602 253.59) 80.6%, oklch(56.55% 0.0606 253.19) 83.9%, oklch(57.46% 0.0609 252.82) 87.1%, oklch(58.30% 0.0612 252.49) 90.3%, oklch(59.06% 0.0615 252.18) 93.5%, oklch(59.70% 0.0618 251.92) 96.8%, oklch(60.24% 0.0620 251.69) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.331 | 0.04 | 266.5 |
| 2 | 0.457 | 0.055 | 258 |
| 3 | 0.602 | 0.062 | 251.7 |

## In these collections

- [App background gradients](https://grabient.com/app-background-gradients)

## Other forms

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