Arctic Nights to Stay the Night Gradient
CSS
background: linear-gradient(90deg, #345c61 0%, #314662 100%);
From Arctic Nights (#345C61) to Stay the Night (#314662). The two hues are 28° 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 | |
|---|---|---|---|---|---|
| Arctic Nights | #345C61 | 52, 92, 97 | 187°, 30%, 29% | 46, 5, 0, 62 | |
| 25% (near Arctic Nights) | #335761 | 51, 87, 97 | 193°, 31%, 29% | 47, 10, 0, 62 | |
| 50% (near Outer Space) | #335162 | 51, 81, 98 | 202°, 32%, 29% | 48, 17, 0, 62 | |
| 75% (near Bluedgeons) | #324C62 | 50, 76, 98 | 208°, 32%, 29% | 49, 22, 0, 62 | |
| Stay the Night | #314662 | 49, 70, 98 | 214°, 33%, 29% | 50, 29, 0, 62 |
Halfway along, the gradient is #335162, closest to the named color Outer Space. The stops are mixed in RGB, the way browsers draw a linear gradient by default.
Text on this gradient
White 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.31:1, so the change is gentle.
Other ways to use it
- Top to bottom:
linear-gradient(180deg, #345c61, #314662) - Diagonal:
linear-gradient(135deg, #345c61, #314662) - Radial, from the center out:
radial-gradient(circle, #345c61, #314662) - Tailwind CSS:
bg-gradient-to-r from-[#345c61] to-[#314662]
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 Arctic Nights to Stay the Night gradient?
It starts at #345C61 (Arctic Nights) and ends at #314662 (Stay the Night), with #335162 in the middle.
How do I reverse the gradient?
Swap the two colors or change the angle from 90deg to 270deg: linear-gradient(270deg, #345c61, #314662) runs from Stay the Night on the left to Arctic Nights on the right.