Cherry Picking to Cold Press Coffee Gradient
CSS
background: linear-gradient(90deg, #620b15 0%, #6c2e09 100%);
From Cherry Picking (#620B15) to Cold Press Coffee (#6C2E09). The two hues are 29° 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 | |
|---|---|---|---|---|---|
| Cherry Picking | #620B15 | 98, 11, 21 | 353°, 80%, 21% | 0, 89, 79, 62 | |
| 25% (near Sanguine) | #651412 | 101, 20, 18 | 1°, 70%, 23% | 0, 80, 82, 60 | |
| 50% (near Prune) | #671D0F | 103, 29, 15 | 10°, 75%, 23% | 0, 72, 85, 60 | |
| 75% (near Cold Press Coffee) | #6A250C | 106, 37, 12 | 16°, 80%, 23% | 0, 65, 89, 58 | |
| Cold Press Coffee | #6C2E09 | 108, 46, 9 | 22°, 85%, 23% | 0, 57, 92, 58 |
Halfway along, the gradient is #671D0F, closest to the named color Prune. 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.29:1, so the change is gentle.
Other ways to use it
- Top to bottom:
linear-gradient(180deg, #620b15, #6c2e09) - Diagonal:
linear-gradient(135deg, #620b15, #6c2e09) - Radial, from the center out:
radial-gradient(circle, #620b15, #6c2e09) - Tailwind CSS:
bg-gradient-to-r from-[#620b15] to-[#6c2e09]
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 Cherry Picking to Cold Press Coffee gradient?
It starts at #620B15 (Cherry Picking) and ends at #6C2E09 (Cold Press Coffee), with #671D0F in the middle.
How do I reverse the gradient?
Swap the two colors or change the angle from 90deg to 270deg: linear-gradient(270deg, #620b15, #6c2e09) runs from Cold Press Coffee on the left to Cherry Picking on the right.