Cloudless to Icy Plains Gradient
CSS
background: linear-gradient(90deg, #d6eafc 0%, #cfdafb 100%);
From Cloudless (#D6EAFC) to Icy Plains (#CFDAFB). The two hues are 17° apart on the color wheel, close enough that the blend stays clean without a muddy middle.
Colors along the gradient
| Name | HEX | RGB | HSL | CMYK | |
|---|---|---|---|---|---|
| Cloudless | #D6EAFC | 214, 234, 252 | 208°, 86%, 91% | 15, 7, 0, 1 | |
| 25% (near Cloudless) | #D4E6FC | 212, 230, 252 | 213°, 87%, 91% | 16, 9, 0, 1 | |
| 50% (near Cloudless) | #D3E2FC | 211, 226, 252 | 218°, 87%, 91% | 16, 10, 0, 1 | |
| 75% (near Icy Plains) | #D1DEFB | 209, 222, 251 | 221°, 84%, 90% | 17, 12, 0, 2 | |
| Icy Plains | #CFDAFB | 207, 218, 251 | 225°, 85%, 90% | 18, 13, 0, 2 |
Halfway along, the gradient is #D3E2FC, closest to the named color Cloudless. The stops are mixed in RGB, the way browsers draw a linear gradient by default.
Text on this gradient
Black text reads best on both ends, so one text color works across the whole gradient. The two end colors have a contrast ratio of 1.13:1, so the change is gentle.
Other ways to use it
- Top to bottom:
linear-gradient(180deg, #d6eafc, #cfdafb) - Diagonal:
linear-gradient(135deg, #d6eafc, #cfdafb) - Radial, from the center out:
radial-gradient(circle, #d6eafc, #cfdafb) - Tailwind CSS:
bg-gradient-to-r from-[#d6eafc] to-[#cfdafb]
Gradients like this work well for page headers, buttons, cards and slide backgrounds. Keep body text on a solid color for the best readability.
Questions
What are the HEX codes of the Cloudless to Icy Plains gradient?
It starts at #D6EAFC (Cloudless) and ends at #CFDAFB (Icy Plains), with #D3E2FC in the middle.
How do I reverse the gradient?
Swap the two colors or change the angle from 90deg to 270deg: linear-gradient(270deg, #d6eafc, #cfdafb) runs from Icy Plains on the left to Cloudless on the right.