Shot in the Dark to Scandinavian Liquorice Gradient
CSS
background: linear-gradient(90deg, #1d0d1d 0%, #1a1110 100%);
From Shot in the Dark (#1D0D1D) to Scandinavian Liquorice (#1A1110). The two hues are 66° apart on the color wheel, so the blend passes through a clearly different middle color.
Colors along the gradient
| Name | HEX | RGB | HSL | CMYK | |
|---|---|---|---|---|---|
| Shot in the Dark | #1D0D1D | 29, 13, 29 | 300°, 38%, 8% | 0, 55, 0, 89 | |
| 25% (near Shot in the Dark) | #1C0E1A | 28, 14, 26 | 309°, 33%, 8% | 0, 50, 7, 89 | |
| 50% (near Shot in the Dark) | #1C0F17 | 28, 15, 23 | 323°, 30%, 8% | 0, 46, 18, 89 | |
| 75% (near Scandinavian Liquorice) | #1B1013 | 27, 16, 19 | 344°, 26%, 8% | 0, 41, 30, 89 | |
| Scandinavian Liquorice | #1A1110 | 26, 17, 16 | 6°, 24%, 8% | 0, 35, 38, 90 |
Halfway along, the gradient is #1C0F17, closest to the named color Shot in the Dark. 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.00:1, so the change is gentle.
Other ways to use it
- Top to bottom:
linear-gradient(180deg, #1d0d1d, #1a1110) - Diagonal:
linear-gradient(135deg, #1d0d1d, #1a1110) - Radial, from the center out:
radial-gradient(circle, #1d0d1d, #1a1110) - Tailwind CSS:
bg-gradient-to-r from-[#1d0d1d] to-[#1a1110]
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 Shot in the Dark to Scandinavian Liquorice gradient?
It starts at #1D0D1D (Shot in the Dark) and ends at #1A1110 (Scandinavian Liquorice), with #1C0F17 in the middle.
How do I reverse the gradient?
Swap the two colors or change the angle from 90deg to 270deg: linear-gradient(270deg, #1d0d1d, #1a1110) runs from Scandinavian Liquorice on the left to Shot in the Dark on the right.