Graphite Black to Moonless Mystery Gradient
CSS
background: linear-gradient(90deg, #262a2b 0%, #1e2433 100%);
From Graphite Black (#262A2B) to Moonless Mystery (#1E2433). The two hues are 31° 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 | |
|---|---|---|---|---|---|
| Graphite Black | #262A2B | 38, 42, 43 | 192°, 6%, 16% | 12, 2, 0, 83 | |
| 25% (near Cinder) | #24292D | 36, 41, 45 | 207°, 11%, 16% | 20, 9, 0, 82 | |
| 50% (near Infinity) | #22272F | 34, 39, 47 | 217°, 16%, 16% | 28, 17, 0, 82 | |
| 75% (near Infinity) | #202631 | 32, 38, 49 | 219°, 21%, 16% | 35, 22, 0, 81 | |
| Moonless Mystery | #1E2433 | 30, 36, 51 | 223°, 26%, 16% | 41, 29, 0, 80 |
Halfway along, the gradient is #22272F, closest to the named color Infinity. 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.07:1, so the change is gentle.
Other ways to use it
- Top to bottom:
linear-gradient(180deg, #262a2b, #1e2433) - Diagonal:
linear-gradient(135deg, #262a2b, #1e2433) - Radial, from the center out:
radial-gradient(circle, #262a2b, #1e2433) - Tailwind CSS:
bg-gradient-to-r from-[#262a2b] to-[#1e2433]
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 Graphite Black to Moonless Mystery gradient?
It starts at #262A2B (Graphite Black) and ends at #1E2433 (Moonless Mystery), with #22272F in the middle.
How do I reverse the gradient?
Swap the two colors or change the angle from 90deg to 270deg: linear-gradient(270deg, #262a2b, #1e2433) runs from Moonless Mystery on the left to Graphite Black on the right.