# Cream brown navy cyan bands

Seamless off-white and light blue linear swatches with 34 colors: #fff7e2, #fbebca, #f3dbb4, #e9c89c, #ddb284, #cc9d6f, #b68657, #9c6f3f, #825829, #6c4217, #582e0f, #411b0e, #290c0d, #160409, #0c0207, #0a020b, #0c0418, #0e0c2b, #0b1b40, #032c53, #094068, #225682, #3d6e9e, #5786b8, #6d9dcc, #86b3dc, #a0c8ea, #b8dbf4, #cbebfb, #d8f7fc, #e3fdf6, #eefeef, #f9fcea, #fffbee. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Seamless off-white and light blue linear swatches
- Seed: `kc-B0_3x49LGcvyODDZpB21tKgv52jbz_Ygwg`
- Page: https://grabient.com/kc-B0_3x49LGcvyODDZpB21tKgv52jbz_Ygwg?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: 19.8 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 | `#fff7e2` | `oklch(97.64% 0.0291 89.32)` | Pinch of Pearl | black, 19.6 to 1 |
| 2 | `#fbebca` | `oklch(94.53% 0.0470 85.60)` | Honey Moth | black, 17.8 to 1 |
| 3 | `#f3dbb4` | `oklch(90.23% 0.0575 80.19)` | Lion’s Roar | black, 15.6 to 1 |
| 4 | `#e9c89c` | `oklch(85.02% 0.0688 74.24)` | Golden Talisman | black, 13.2 to 1 |
| 5 | `#ddb284` | `oklch(79.19% 0.0783 68.88)` | Desert Mist | black, 10.8 to 1 |
| 6 | `#cc9d6f` | `oklch(72.97% 0.0838 65.34)` | White Oak | black, 8.6 to 1 |
| 7 | `#b68657` | `oklch(65.76% 0.0860 65.10)` | Deer | black, 6.5 to 1 |
| 8 | `#9c6f3f` | `oklch(57.79% 0.0862 66.37)` | Desert Clay | black, 4.7 to 1 |
| 9 | `#825829` | `oklch(49.67% 0.0843 66.53)` | Hot Curry | white, 6.2 to 1 |
| 10 | `#6c4217` | `oklch(41.99% 0.0806 63.00)` | Sepia | white, 8.6 to 1 |
| 11 | `#582e0f` | `oklch(34.93% 0.0744 53.48)` | Count Chocula | white, 11.6 to 1 |
| 12 | `#411b0e` | `oklch(27.40% 0.0630 38.65)` | Old Study | white, 15.1 to 1 |
| 13 | `#290c0d` | `oklch(20.22% 0.0497 20.50)` | Root Brew | white, 18.2 to 1 |
| 14 | `#160409` | `oklch(14.48% 0.0385 0.95)` | Noir Fiction | white, 19.9 to 1 |
| 15 | `#0c0207` | `oklch(11.22% 0.0331 341.95)` | Pupil | white, 20.4 to 1 |
| 16 | `#0a020b` | `oklch(11.16% 0.0367 322.90)` | Broken Tube | white, 20.4 to 1 |
| 17 | `#0c0418` | `oklch(13.66% 0.0472 301.79)` | Not Tonight | white, 20 to 1 |
| 18 | `#0e0c2b` | `oklch(18.00% 0.0608 281.14)` | Mysterious Depths | white, 18.9 to 1 |
| 19 | `#0b1b40` | `oklch(23.41% 0.0737 263.50)` | Maastricht Blue | white, 16.8 to 1 |
| 20 | `#032c53` | `oklch(29.18% 0.0821 251.47)` | Dark Tyrian Blue | white, 14 to 1 |
| 21 | `#094068` | `oklch(36.06% 0.0874 246.66)` | Dark Imperial Blue | white, 10.7 to 1 |
| 22 | `#225682` | `oklch(44.15% 0.0912 246.91)` | Blueberry Twist | white, 7.6 to 1 |
| 23 | `#3d6e9e` | `oklch(52.65% 0.0928 249.18)` | Muted Blue | white, 5.3 to 1 |
| 24 | `#5786b8` | `oklch(60.78% 0.0917 250.45)` | Hideout | black, 5.5 to 1 |
| 25 | `#6d9dcc` | `oklch(67.93% 0.0869 248.49)` | Blue Electress | black, 7.3 to 1 |
| 26 | `#86b3dc` | `oklch(74.89% 0.0770 246.87)` | Dun Morogh Blue | black, 9.4 to 1 |
| 27 | `#a0c8ea` | `oklch(81.53% 0.0639 244.58)` | Island Light | black, 11.9 to 1 |
| 28 | `#b8dbf4` | `oklch(87.45% 0.0504 239.27)` | Greek Isles | black, 14.4 to 1 |
| 29 | `#cbebfb` | `oklch(92.21% 0.0395 228.58)` | Frosty Day | black, 16.8 to 1 |
| 30 | `#d8f7fc` | `oklch(95.44% 0.0327 208.95)` | Glacial Day | black, 18.5 to 1 |
| 31 | `#e3fdf6` | `oklch(97.22% 0.0283 179.18)` | Mint Chiffon | black, 19.5 to 1 |
| 32 | `#eefeef` | `oklch(98.05% 0.0255 145.65)` | Snow White | black, 20 to 1 |
| 33 | `#f9fcea` | `oklch(98.42% 0.0236 115.10)` | Amnesiac White | black, 20.1 to 1 |
| 34 | `#fffbee` | `oklch(98.82% 0.0183 94.27)` | Frosting Cream | black, 20.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #fff7e2 0.000% 2.941%, #fbebca 2.941% 5.882%, #f3dbb4 5.882% 8.824%, #e9c89c 8.824% 11.765%, #ddb284 11.765% 14.706%, #cc9d6f 14.706% 17.647%, #b68657 17.647% 20.588%, #9c6f3f 20.588% 23.529%, #825829 23.529% 26.471%, #6c4217 26.471% 29.412%, #582e0f 29.412% 32.353%, #411b0e 32.353% 35.294%, #290c0d 35.294% 38.235%, #160409 38.235% 41.176%, #0c0207 41.176% 44.118%, #0a020b 44.118% 47.059%, #0c0418 47.059% 50.000%, #0e0c2b 50.000% 52.941%, #0b1b40 52.941% 55.882%, #032c53 55.882% 58.824%, #094068 58.824% 61.765%, #225682 61.765% 64.706%, #3d6e9e 64.706% 67.647%, #5786b8 67.647% 70.588%, #6d9dcc 70.588% 73.529%, #86b3dc 73.529% 76.471%, #a0c8ea 76.471% 79.412%, #b8dbf4 79.412% 82.353%, #cbebfb 82.353% 85.294%, #d8f7fc 85.294% 88.235%, #e3fdf6 88.235% 91.176%, #eefeef 91.176% 94.118%, #f9fcea 94.118% 97.059%, #fffbee 97.059% 100.000%);
background: linear-gradient(90deg, oklch(97.64% 0.0291 89.32) 0.000% 2.941%, oklch(94.53% 0.0470 85.60) 2.941% 5.882%, oklch(90.23% 0.0575 80.19) 5.882% 8.824%, oklch(85.02% 0.0688 74.24) 8.824% 11.765%, oklch(79.19% 0.0783 68.88) 11.765% 14.706%, oklch(72.97% 0.0838 65.34) 14.706% 17.647%, oklch(65.76% 0.0860 65.10) 17.647% 20.588%, oklch(57.79% 0.0862 66.37) 20.588% 23.529%, oklch(49.67% 0.0843 66.53) 23.529% 26.471%, oklch(41.99% 0.0806 63.00) 26.471% 29.412%, oklch(34.93% 0.0744 53.48) 29.412% 32.353%, oklch(27.40% 0.0630 38.65) 32.353% 35.294%, oklch(20.22% 0.0497 20.50) 35.294% 38.235%, oklch(14.48% 0.0385 0.95) 38.235% 41.176%, oklch(11.22% 0.0331 341.95) 41.176% 44.118%, oklch(11.16% 0.0367 322.90) 44.118% 47.059%, oklch(13.66% 0.0472 301.79) 47.059% 50.000%, oklch(18.00% 0.0608 281.14) 50.000% 52.941%, oklch(23.41% 0.0737 263.50) 52.941% 55.882%, oklch(29.18% 0.0821 251.47) 55.882% 58.824%, oklch(36.06% 0.0874 246.66) 58.824% 61.765%, oklch(44.15% 0.0912 246.91) 61.765% 64.706%, oklch(52.65% 0.0928 249.18) 64.706% 67.647%, oklch(60.78% 0.0917 250.45) 67.647% 70.588%, oklch(67.93% 0.0869 248.49) 70.588% 73.529%, oklch(74.89% 0.0770 246.87) 73.529% 76.471%, oklch(81.53% 0.0639 244.58) 76.471% 79.412%, oklch(87.45% 0.0504 239.27) 79.412% 82.353%, oklch(92.21% 0.0395 228.58) 82.353% 85.294%, oklch(95.44% 0.0327 208.95) 85.294% 88.235%, oklch(97.22% 0.0283 179.18) 88.235% 91.176%, oklch(98.05% 0.0255 145.65) 91.176% 94.118%, oklch(98.42% 0.0236 115.10) 94.118% 97.059%, oklch(98.82% 0.0183 94.27) 97.059% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.976 | 0.04 | 89.3 |
| 2 | 0.748 | 0.083 | 66 |
| 3 | 0.39 | 0.079 | 59.7 |
| 4 | 0.11 | 0.033 | -20.6 |
| 5 | 0.283 | 0.081 | -107.3 |
| 6 | 0.65 | 0.09 | -110.4 |
| 7 | 0.933 | 0.037 | -135.8 |
| 8 | 0.988 | 0.022 | -265.8 |

## In these collections

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

## Other forms

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