# Blue and turquoise light ui palette

The Blue and turquoise light ui palette brings together pale teal, light blue, and blue. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its light and open character suits website sections and interface mockups. Its darkest tone is blue, and its lightest tone is pale teal.

- Also called: Monochrome light blue and blue angular gradient
- Seed: `kU6iSc4xtA9Giwfgmz7A`
- Page: https://grabient.com/kU6iSc4xtA9Giwfgmz7A?style=angularGradient&steps=48&angle=210
- Drawn as: angular gradient, 48 steps, 210 degrees
- Kinds: pastel, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.6 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 | `#c1edfc` | `oklch(92.13% 0.0496 220.08)` | Ice Effect | black, 16.8 to 1 |
| 2 | `#bfecfb` | `oklch(91.62% 0.0505 220.37)` | Ice Effect | black, 16.5 to 1 |
| 3 | `#bceafa` | `oklch(91.00% 0.0516 220.69)` | Blue Java Banana | black, 16.2 to 1 |
| 4 | `#b9e8f8` | `oklch(90.29% 0.0529 221.04)` | Breaking the Ice | black, 15.9 to 1 |
| 5 | `#b6e5f6` | `oklch(89.50% 0.0543 221.43)` | Breaking the Ice | black, 15.5 to 1 |
| 6 | `#b2e3f4` | `oklch(88.64% 0.0558 221.86)` | Breaking the Ice | black, 15.1 to 1 |
| 7 | `#aee0f2` | `oklch(87.71% 0.0575 222.32)` | Intergalactic Blue | black, 14.7 to 1 |
| 8 | `#a9ddf0` | `oklch(86.74% 0.0592 222.81)` | Van Gogh Blue | black, 14.2 to 1 |
| 9 | `#a5daee` | `oklch(85.73% 0.0610 223.34)` | Mizu Cyan | black, 13.8 to 1 |
| 10 | `#a0d6eb` | `oklch(84.69% 0.0629 223.90)` | Light Budgie Blue | black, 13.3 to 1 |
| 11 | `#9cd3e9` | `oklch(83.64% 0.0647 224.50)` | Over the Sky | black, 12.9 to 1 |
| 12 | `#97d0e7` | `oklch(82.59% 0.0666 225.13)` | Light Whimsy | black, 12.4 to 1 |
| 13 | `#93cce5` | `oklch(81.54% 0.0684 225.80)` | Medical Mask | black, 12 to 1 |
| 14 | `#8ec9e2` | `oklch(80.51% 0.0701 226.50)` | Gossamer Threads | black, 11.6 to 1 |
| 15 | `#8ac6e0` | `oklch(79.52% 0.0718 227.23)` | Sky Fall | black, 11.2 to 1 |
| 16 | `#86c3de` | `oklch(78.56% 0.0734 228.00)` | Blue Charm | black, 10.8 to 1 |
| 17 | `#83c0dd` | `oklch(77.65% 0.0749 228.81)` | Blue Charm | black, 10.5 to 1 |
| 18 | `#7fbddb` | `oklch(76.68% 0.0765 229.76)` | Enchanting | black, 10.1 to 1 |
| 19 | `#7bb9d9` | `oklch(75.64% 0.0781 230.84)` | Pacific Harbour | black, 9.8 to 1 |
| 20 | `#77b6d7` | `oklch(74.54% 0.0798 232.04)` | Water Fountain | black, 9.4 to 1 |
| 21 | `#73b2d4` | `oklch(73.40% 0.0816 233.33)` | Meadow Blossom Blue | black, 9 to 1 |
| 22 | `#6faed2` | `oklch(72.25% 0.0833 234.67)` | Imrik Blue | black, 8.6 to 1 |
| 23 | `#6caad0` | `oklch(71.11% 0.0851 236.05)` | Salem Blue | black, 8.3 to 1 |
| 24 | `#68a7ce` | `oklch(69.99% 0.0868 237.43)` | Salem Blue | black, 7.9 to 1 |
| 25 | `#65a3cc` | `oklch(68.91% 0.0884 238.78)` | Alaskan Blue | black, 7.6 to 1 |
| 26 | `#629fca` | `oklch(67.89% 0.0899 240.09)` | Tantalise | black, 7.3 to 1 |
| 27 | `#5f9cc8` | `oklch(66.95% 0.0913 241.32)` | Tall Waves | black, 7 to 1 |
| 28 | `#5d99c7` | `oklch(66.12% 0.0925 242.44)` | Canadian Tuxedo | black, 6.8 to 1 |
| 29 | `#5b97c5` | `oklch(65.41% 0.0935 243.43)` | Blueberry Soft Blue | black, 6.6 to 1 |
| 30 | `#5a95c4` | `oklch(64.84% 0.0943 244.27)` | Blueberry Soft Blue | black, 6.5 to 1 |
| 31 | `#5993c3` | `oklch(64.43% 0.0948 244.91)` | Come Sail Away | black, 6.4 to 1 |
| 32 | `#5993c3` | `oklch(64.21% 0.0951 245.35)` | Come Sail Away | black, 6.3 to 1 |
| 33 | `#5992c3` | `oklch(64.19% 0.0950 245.54)` | Come Sail Away | black, 6.3 to 1 |
| 34 | `#5a93c3` | `oklch(64.40% 0.0945 245.50)` | Come Sail Away | black, 6.4 to 1 |
| 35 | `#5b94c4` | `oklch(64.83% 0.0937 245.26)` | Come Sail Away | black, 6.5 to 1 |
| 36 | `#5d96c5` | `oklch(65.43% 0.0926 244.83)` | Blueberry Soft Blue | black, 6.6 to 1 |
| 37 | `#6099c7` | `oklch(66.18% 0.0913 244.25)` | Tall Waves | black, 6.8 to 1 |
| 38 | `#639cc9` | `oklch(67.05% 0.0898 243.55)` | Tantalise | black, 7.1 to 1 |
| 39 | `#669fcb` | `oklch(68.02% 0.0881 242.75)` | Tantalise | black, 7.3 to 1 |
| 40 | `#6aa2cd` | `oklch(69.04% 0.0863 241.89)` | Alaskan Blue | black, 7.6 to 1 |
| 41 | `#6da6cf` | `oklch(70.10% 0.0845 240.99)` | Polar Ice | black, 7.9 to 1 |
| 42 | `#71a9d1` | `oklch(71.16% 0.0827 240.07)` | Chronus Blue | black, 8.3 to 1 |
| 43 | `#75add3` | `oklch(72.20% 0.0809 239.18)` | Blue Eyes | black, 8.6 to 1 |
| 44 | `#78b0d5` | `oklch(73.18% 0.0792 238.33)` | Meadow Blossom Blue | black, 8.9 to 1 |
| 45 | `#7bb3d7` | `oklch(74.08% 0.0777 237.55)` | Meadow Blossom Blue | black, 9.2 to 1 |
| 46 | `#7eb5d8` | `oklch(74.87% 0.0763 236.87)` | Coastal Waters | black, 9.5 to 1 |
| 47 | `#81b7d9` | `oklch(75.51% 0.0752 236.32)` | Coastal Waters | black, 9.7 to 1 |
| 48 | `#83b9da` | `oklch(75.98% 0.0744 235.93)` | 21st Century Blue | black, 9.9 to 1 |

## CSS

```css
background: conic-gradient(from 210deg, #c1edfc 0.0%, #bfecfb 2.1%, #bceafa 4.3%, #b9e8f8 6.4%, #b6e5f6 8.5%, #b2e3f4 10.6%, #aee0f2 12.8%, #a9ddf0 14.9%, #a5daee 17.0%, #a0d6eb 19.1%, #9cd3e9 21.3%, #97d0e7 23.4%, #93cce5 25.5%, #8ec9e2 27.7%, #8ac6e0 29.8%, #86c3de 31.9%, #83c0dd 34.0%, #7fbddb 36.2%, #7bb9d9 38.3%, #77b6d7 40.4%, #73b2d4 42.6%, #6faed2 44.7%, #6caad0 46.8%, #68a7ce 48.9%, #65a3cc 51.1%, #629fca 53.2%, #5f9cc8 55.3%, #5d99c7 57.4%, #5b97c5 59.6%, #5a95c4 61.7%, #5993c3 63.8%, #5993c3 66.0%, #5992c3 68.1%, #5a93c3 70.2%, #5b94c4 72.3%, #5d96c5 74.5%, #6099c7 76.6%, #639cc9 78.7%, #669fcb 80.9%, #6aa2cd 83.0%, #6da6cf 85.1%, #71a9d1 87.2%, #75add3 89.4%, #78b0d5 91.5%, #7bb3d7 93.6%, #7eb5d8 95.7%, #81b7d9 97.9%, #83b9da 100.0%);
background: conic-gradient(from 210deg in oklch, oklch(92.13% 0.0496 220.08) 0.0%, oklch(91.62% 0.0505 220.37) 2.1%, oklch(91.00% 0.0516 220.69) 4.3%, oklch(90.29% 0.0529 221.04) 6.4%, oklch(89.50% 0.0543 221.43) 8.5%, oklch(88.64% 0.0558 221.86) 10.6%, oklch(87.71% 0.0575 222.32) 12.8%, oklch(86.74% 0.0592 222.81) 14.9%, oklch(85.73% 0.0610 223.34) 17.0%, oklch(84.69% 0.0629 223.90) 19.1%, oklch(83.64% 0.0647 224.50) 21.3%, oklch(82.59% 0.0666 225.13) 23.4%, oklch(81.54% 0.0684 225.80) 25.5%, oklch(80.51% 0.0701 226.50) 27.7%, oklch(79.52% 0.0718 227.23) 29.8%, oklch(78.56% 0.0734 228.00) 31.9%, oklch(77.65% 0.0749 228.81) 34.0%, oklch(76.68% 0.0765 229.76) 36.2%, oklch(75.64% 0.0781 230.84) 38.3%, oklch(74.54% 0.0798 232.04) 40.4%, oklch(73.40% 0.0816 233.33) 42.6%, oklch(72.25% 0.0833 234.67) 44.7%, oklch(71.11% 0.0851 236.05) 46.8%, oklch(69.99% 0.0868 237.43) 48.9%, oklch(68.91% 0.0884 238.78) 51.1%, oklch(67.89% 0.0899 240.09) 53.2%, oklch(66.95% 0.0913 241.32) 55.3%, oklch(66.12% 0.0925 242.44) 57.4%, oklch(65.41% 0.0935 243.43) 59.6%, oklch(64.84% 0.0943 244.27) 61.7%, oklch(64.43% 0.0948 244.91) 63.8%, oklch(64.21% 0.0951 245.35) 66.0%, oklch(64.19% 0.0950 245.54) 68.1%, oklch(64.40% 0.0945 245.50) 70.2%, oklch(64.83% 0.0937 245.26) 72.3%, oklch(65.43% 0.0926 244.83) 74.5%, oklch(66.18% 0.0913 244.25) 76.6%, oklch(67.05% 0.0898 243.55) 78.7%, oklch(68.02% 0.0881 242.75) 80.9%, oklch(69.04% 0.0863 241.89) 83.0%, oklch(70.10% 0.0845 240.99) 85.1%, oklch(71.16% 0.0827 240.07) 87.2%, oklch(72.20% 0.0809 239.18) 89.4%, oklch(73.18% 0.0792 238.33) 91.5%, oklch(74.08% 0.0777 237.55) 93.6%, oklch(74.87% 0.0763 236.87) 95.7%, oklch(75.51% 0.0752 236.32) 97.9%, oklch(75.98% 0.0744 235.93) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.921 | 0.05 | 220.1 |
| 2 | 0.78 | 0.074 | 228.5 |
| 3 | 0.642 | 0.095 | 245.4 |
| 4 | 0.76 | 0.074 | 235.9 |

## In these collections

- [Light UI gradients](https://grabient.com/light-ui-gradients)

## Other forms

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