# Ivory blue brown mirrored bands

Seamless gray, blue, black and brown linear swatches with 34 colors: #ccd8d0, #c0d4cc, #aececb, #9ac5ce, #8bb8cf, #7da9cb, #6b97c2, #5685b6, #3e72a7, #2a5f96, #1d4d84, #0e3b6c, #032953, #031a3e, #060f2f, #0e0826, #16051d, #1e0514, #27080d, #301009, #3e1b09, #53290c, #6b3913, #824b1d, #955d2a, #a6713c, #b68552, #c49967, #ceab7b, #d2b98c, #d1c59e, #d0ceae, #cfd3bc, #d1d7c6. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Seamless gray, blue, black and brown linear swatches
- Seed: `kc3QxwXJhJrmmwWXF8Hm5POcAjwxiGsIbojFQ`
- Page: https://grabient.com/kc3QxwXJhJrmmwWXF8Hm5POcAjwxiGsIbojFQ?style=linearSwatches&steps=34
- Drawn as: linear swatches, 34 steps, 90 degrees
- Kinds: dark center, seamless
- Hues: complementary
- Contrast of its darkest and lightest colors: 13.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 | `#ccd8d0` | `oklch(87.01% 0.0165 157.50)` | Serene Journey | black, 14.2 to 1 |
| 2 | `#c0d4cc` | `oklch(85.17% 0.0240 170.79)` | Spearmint Ice | black, 13.4 to 1 |
| 3 | `#aececb` | `oklch(82.69% 0.0346 190.29)` | Andean Opal Green | black, 12.4 to 1 |
| 4 | `#9ac5ce` | `oklch(79.57% 0.0467 211.62)` | Alluring Blue | black, 11.2 to 1 |
| 5 | `#8bb8cf` | `oklch(75.85% 0.0587 230.44)` | Mountain Main | black, 9.8 to 1 |
| 6 | `#7da9cb` | `oklch(71.52% 0.0690 242.55)` | Mirror Lake | black, 8.3 to 1 |
| 7 | `#6b97c2` | `oklch(66.27% 0.0799 248.30)` | Windstorm | black, 6.8 to 1 |
| 8 | `#5685b6` | `oklch(60.31% 0.0911 250.31)` | Hideout | black, 5.4 to 1 |
| 9 | `#3e72a7` | `oklch(54.03% 0.1003 250.69)` | Flat Blue | white, 5 to 1 |
| 10 | `#2a5f96` | `oklch(47.82% 0.1056 251.56)` | Lapis Lazuli Blue | white, 6.5 to 1 |
| 11 | `#1d4d84` | `oklch(41.77% 0.1047 253.78)` | Night Mode | white, 8.5 to 1 |
| 12 | `#0e3b6c` | `oklch(35.05% 0.0972 254.02)` | Tardis Blue | white, 11.3 to 1 |
| 13 | `#032953` | `oklch(28.36% 0.0861 254.45)` | Dark Tyrian Blue | white, 14.4 to 1 |
| 14 | `#031a3e` | `oklch(22.55% 0.0745 257.97)` | Maastricht Blue | white, 17.1 to 1 |
| 15 | `#060f2f` | `oklch(18.50% 0.0656 267.50)` | Squid’s Ink | white, 18.7 to 1 |
| 16 | `#0e0826` | `oklch(16.54% 0.0602 286.67)` | Mysterious Depths | white, 19.4 to 1 |
| 17 | `#16051d` | `oklch(16.10% 0.0556 314.68)` | Election Night | white, 19.5 to 1 |
| 18 | `#1e0514` | `oklch(16.99% 0.0527 345.80)` | Crow | white, 19.3 to 1 |
| 19 | `#27080d` | `oklch(19.06% 0.0520 14.23)` | Sepia Black | white, 18.6 to 1 |
| 20 | `#301009` | `oklch(22.17% 0.0543 34.27)` | Dark Danger | white, 17.4 to 1 |
| 21 | `#3e1b09` | `oklch(26.91% 0.0621 45.38)` | 90% Cocoa | white, 15.3 to 1 |
| 22 | `#53290c` | `oklch(33.12% 0.0739 51.09)` | Bittersweet Chocolate | white, 12.4 to 1 |
| 23 | `#6b3913` | `oklch(40.03% 0.0862 53.90)` | Philippine Bronze | white, 9.4 to 1 |
| 24 | `#824b1d` | `oklch(46.84% 0.0954 56.33)` | Milk Chocolate | white, 7 to 1 |
| 25 | `#955d2a` | `oklch(52.97% 0.0983 60.37)` | Chilli Con Carne | white, 5.4 to 1 |
| 26 | `#a6713c` | `oklch(59.19% 0.0962 63.70)` | Splinter | black, 5 to 1 |
| 27 | `#b68552` | `oklch(65.39% 0.0908 66.52)` | Sand Mountain | black, 6.4 to 1 |
| 28 | `#c49967` | `oklch(71.14% 0.0834 69.83)` | Chalet | black, 8 to 1 |
| 29 | `#ceab7b` | `oklch(76.00% 0.0753 74.67)` | Golden Age | black, 9.6 to 1 |
| 30 | `#d2b98c` | `oklch(79.68% 0.0664 82.31)` | Buckskin | black, 11 to 1 |
| 31 | `#d1c59e` | `oklch(82.41% 0.0547 92.89)` | Sand Trail | black, 12.2 to 1 |
| 32 | `#d0ceae` | `oklch(84.40% 0.0423 104.42)` | Longbeard Grey | black, 13 to 1 |
| 33 | `#cfd3bc` | `oklch(85.87% 0.0311 114.79)` | Garlic Suede | black, 13.7 to 1 |
| 34 | `#d1d7c6` | `oklch(87.01% 0.0234 121.92)` | Wine Bottle | black, 14.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #ccd8d0 0.000% 2.941%, #c0d4cc 2.941% 5.882%, #aececb 5.882% 8.824%, #9ac5ce 8.824% 11.765%, #8bb8cf 11.765% 14.706%, #7da9cb 14.706% 17.647%, #6b97c2 17.647% 20.588%, #5685b6 20.588% 23.529%, #3e72a7 23.529% 26.471%, #2a5f96 26.471% 29.412%, #1d4d84 29.412% 32.353%, #0e3b6c 32.353% 35.294%, #032953 35.294% 38.235%, #031a3e 38.235% 41.176%, #060f2f 41.176% 44.118%, #0e0826 44.118% 47.059%, #16051d 47.059% 50.000%, #1e0514 50.000% 52.941%, #27080d 52.941% 55.882%, #301009 55.882% 58.824%, #3e1b09 58.824% 61.765%, #53290c 61.765% 64.706%, #6b3913 64.706% 67.647%, #824b1d 67.647% 70.588%, #955d2a 70.588% 73.529%, #a6713c 73.529% 76.471%, #b68552 76.471% 79.412%, #c49967 79.412% 82.353%, #ceab7b 82.353% 85.294%, #d2b98c 85.294% 88.235%, #d1c59e 88.235% 91.176%, #d0ceae 91.176% 94.118%, #cfd3bc 94.118% 97.059%, #d1d7c6 97.059% 100.000%);
background: linear-gradient(90deg, oklch(87.01% 0.0165 157.50) 0.000% 2.941%, oklch(85.17% 0.0240 170.79) 2.941% 5.882%, oklch(82.69% 0.0346 190.29) 5.882% 8.824%, oklch(79.57% 0.0467 211.62) 8.824% 11.765%, oklch(75.85% 0.0587 230.44) 11.765% 14.706%, oklch(71.52% 0.0690 242.55) 14.706% 17.647%, oklch(66.27% 0.0799 248.30) 17.647% 20.588%, oklch(60.31% 0.0911 250.31) 20.588% 23.529%, oklch(54.03% 0.1003 250.69) 23.529% 26.471%, oklch(47.82% 0.1056 251.56) 26.471% 29.412%, oklch(41.77% 0.1047 253.78) 29.412% 32.353%, oklch(35.05% 0.0972 254.02) 32.353% 35.294%, oklch(28.36% 0.0861 254.45) 35.294% 38.235%, oklch(22.55% 0.0745 257.97) 38.235% 41.176%, oklch(18.50% 0.0656 267.50) 41.176% 44.118%, oklch(16.54% 0.0602 286.67) 44.118% 47.059%, oklch(16.10% 0.0556 314.68) 47.059% 50.000%, oklch(16.99% 0.0527 345.80) 50.000% 52.941%, oklch(19.06% 0.0520 14.23) 52.941% 55.882%, oklch(22.17% 0.0543 34.27) 55.882% 58.824%, oklch(26.91% 0.0621 45.38) 58.824% 61.765%, oklch(33.12% 0.0739 51.09) 61.765% 64.706%, oklch(40.03% 0.0862 53.90) 64.706% 67.647%, oklch(46.84% 0.0954 56.33) 67.647% 70.588%, oklch(52.97% 0.0983 60.37) 70.588% 73.529%, oklch(59.19% 0.0962 63.70) 73.529% 76.471%, oklch(65.39% 0.0908 66.52) 76.471% 79.412%, oklch(71.14% 0.0834 69.83) 79.412% 82.353%, oklch(76.00% 0.0753 74.67) 82.353% 85.294%, oklch(79.68% 0.0664 82.31) 85.294% 88.235%, oklch(82.41% 0.0547 92.89) 88.235% 91.176%, oklch(84.40% 0.0423 104.42) 91.176% 94.118%, oklch(85.87% 0.0311 114.79) 94.118% 97.059%, oklch(87.01% 0.0234 121.92) 97.059% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.87 | 0.017 | 157.5 |
| 2 | 0.728 | 0.066 | 239.9 |
| 3 | 0.453 | 0.106 | 252.6 |
| 4 | 0.181 | 0.065 | 269.5 |
| 5 | 0.217 | 0.054 | 392.1 |
| 6 | 0.504 | 0.098 | 418.5 |
| 7 | 0.772 | 0.073 | 436.5 |
| 8 | 0.87 | 0.023 | 481.9 |

## In these collections

- [Blue and orange swatches](https://grabient.com/blue-and-orange-swatches)

## Other forms

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