#500724 — Tints, Shades & Color Values
#500724 is a very dark, vivid pink. In Tailwind CSS this exact color is the utility class pink-950 (e.g. bg-pink-950, text-pink-950). Its nearest CSS named color is maroon (#800000). For readable text on a #500724 background, white text gives the strongest contrast (15.03:1). Because it is dark, #500724 suits text, navigation bars, and footers on light backgrounds, and its tints make natural hover and surface colors.
Color Values
| Hex | #500724 |
|---|---|
| RGB | rgb(80, 7, 36) |
| HSL | hsl(336, 84%, 17%) |
| HSV / HSB | 336°, 91%, 31% |
| Nearest named | maroon (#800000) |
Need these in another format? Use our hex to RGB converter for quick two-way conversion.
#500724 in Tailwind CSS (pink-950)
#500724 ships with Tailwind CSS as pink-950 — use it as bg-pink-950, text-pink-950, or border-pink-950. It sits at step 950 of the pink ramp; every other step links to its own page:
Browse the full Tailwind palette in the color library, or generate in-between steps with the tint & shade generator.
Tints of #500724 (Mixed with White)
Each step blends the base color toward white using new = old + (255 − old) × factor. Click a swatch to open it in the generator.
-
10% tint
#62203a -
20% tint
#733950 -
30% tint
#855166 -
40% tint
#966a7c -
50% tint
#a88392 -
60% tint
#b99ca7 -
70% tint
#cbb5bd -
80% tint
#dccdd3 -
90% tint
#eee6e9
Shades of #500724 (Mixed with Black)
Each step blends the base color toward black using new = old × (1 − factor).
-
10% shade
#480620 -
20% shade
#40061d -
30% shade
#380519 -
40% shade
#300416 -
50% shade
#280412 -
60% shade
#20030e -
70% shade
#18020b -
80% shade
#100107 -
90% shade
#080104
WCAG Contrast & Accessibility
Contrast ratios for text placed on a #500724 background. WCAG requires 4.5:1 for normal text (AA), 3:1 for large text (AA), and 7:1 for normal text (AAA).
| Text color | White text 15.03:1 — AA normal: Pass · AA large: Pass · AAA: Pass |
|---|---|
| Black text 1.40:1 — AA normal: Fail · AA large: Fail · AAA: Fail |
If neither pure white nor pure black reaches the level you need, pick a lighter tint of #500724 from the ramps above as the background instead — small lightness moves change contrast quickly. Test any other pair with the free contrast checker.
More pink colors in the library: #4A044E (fuchsia-950), #4C0519 (rose-950), #800080, #701A75 (fuchsia-900), #881337 (rose-900), #86198F (fuchsia-800).
Frequently Asked Questions
-
What color is #500724?
#500724 is a very dark, vivid pink —
rgb(80, 7, 36). Its nearest CSS named color ismaroon. In Tailwind CSS it ispink-950. -
How do I make tints and shades of #500724?
Mix #500724 with white for tints and with black for shades. A 20% tint of #500724 is
#733950and a 20% shade is#40061d— the full 10%–90% ramps are precomputed on this page, or open #500724 in the generator for finer steps. -
What text color is readable on #500724?
White text gives the strongest contrast on a #500724 background at 15.03:1, which passes WCAG AA and AAA for normal text.
-
What is the Tailwind CSS class for #500724?
pink-950— use it asbg-pink-950,text-pink-950, orborder-pink-950. The full pink 50–950 ramp is linked above.
Browse more colors in the color library, or start from any hex code on the HexTints homepage.
#500724? Put it on a free link-in-bio page →