CSS Color: HotPink
Named CSS color HotPink — #FF69B4 in HEX, rgb(255, 105, 180) in RGB, hsl(330, 100%, 71%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | HotPink | color: HotPink; |
| HEX | #FF69B4 | color: #FF69B4; |
| RGB | rgb(255, 105, 180) | color: rgb(255, 105, 180); |
| HSL | hsl(330, 100%, 71%) | color: hsl(330, 100%, 71%); |
About HotPink
HotPink is a bold, vivid pink that demands attention. At hex `#FF69B4`, it has maximum red (255) with moderate green (105) and blue (180). Sitting at 330 degrees on the hue wheel with full saturation and 71% lightness, it is one of the most energetic CSS named colors.
In web design, HotPink is a powerful accent color used for bold CTAs, playful designs, and brands that embrace energy and fun. It appears in fashion, entertainment, and youth-oriented websites. T-Mobile's signature magenta is close to HotPink.
For accessibility, HotPink against white achieves approximately 2.6:1 contrast, failing WCAG for text. Use it as a decorative element or on dark backgrounds where it provides good contrast and vibrant energy.
HotPink is brighter and more orange-tinted than DeepPink. It pairs well with black, charcoal, teal, navy, and white. In Tailwind CSS, `pink-400` is a close match for this attention-grabbing pink.
FAQ
What is the hex code for HotPink?
The CSS named color HotPink has the hex code #FF69B4. You can use it in CSS as color: #FF69B4; or simply color: HotPink;.
What is HotPink in RGB?
In RGB notation, HotPink is rgb(255, 105, 180). Use it in CSS as color: rgb(255, 105, 180);.
What is HotPink in HSL?
In HSL notation, HotPink is hsl(330, 100%, 71%). Use it in CSS as color: hsl(330, 100%, 71%);.
What color category is HotPink?
HotPink belongs to the Pink color family in the CSS named colors specification.
Can I use the name "HotPink" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: HotPink; or background-color: HotPink; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert HotPink to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →