Hot Pink Color (#FF69B4)

#FF69B4rgb(255, 105, 180)

Hot Pink is a CSS named color defined as hex code #FF69B4. Its hue sits at 330°, closer to magenta than the pale pinks, and its full red channel with a lifted blue channel gives it a bright, saturated look that stands out on screen.

Color Overview & Formats

CSS: hotpinkLuminance: 0.3466
HEX
#FF69B4
RGB
rgb(255, 105, 180)
HSL
hsl(330, 100%, 71%)
Hot Pink (#FF69B4) Color Format Conversions
FormatSyntax / ValuesNotesAction
HEX#FF69B46-digit hex web code
RGBrgb(255, 105, 180)Red, Green, Blue channels (0-255)
HSLhsl(330, 100%, 71%)Hue (330°), Saturation (100%), Lightness (71%)
HSV / HSBhsv(330, 59%, 100%)Hue, Saturation (59%), Value/Brightness (100%)
CMYKcmyk(0%, 59%, 29%, 0%)Digital mathematical approximation (non-print)
OKLCHoklch(0.728 0.197 352.0)Perceptually uniform color space (CSS Color 4 approximation)
CSS Implementation & Quick Steps
background-color: #FF69B4; /* or hotpink */
  1. Select color format: Choose the desired format (HEX #FF69B4, RGB, or HSL).
  2. Copy the code: Click the copy button or press Tab+Enter to store in clipboard.
  3. Pair with black text: Black text on Hot Pink reaches 7.93:1 (WCAG AAA).

What Colors Go With Hot Pink?

These 6 colors all go well with Hot Pink (#FF69B4), and each one is a standard CSS named color. The ratio is the WCAG 2.2 contrast of that color on Hot Pink: at 4.5:1 or above it works for text; below that, use it for backgrounds and accents.

Black

#000000
7.93:1Text-safe

The strongest partner: maximum contrast for bold, graphic layouts.

5.61:1Text-safe

A softer alternative to black that still carries text on hot pink.

Indigo

#4B0082
4.89:1Text-safe

A deep violet that stays in the same cool-pink family.

Gold

#FFD700
1.89:1Background / accent

A playful, high-energy accent for festive and retail designs.

Turquoise

#40E0D0
1.61:1Background / accent

A bright blue-green that clashes on purpose for a retro look.

White

#FFFFFF
2.65:1Background / accent

Clean space around hot pink blocks; not for text on hot pink.

Harmonious Palettes & Tints

The palettes below are algorithmically generated across standard intervals based on Hot Pink (HSL 330°). Each group offers full palette copy and live preview:

Complementary Harmony

Hue rotated 180 degrees on the HSL wheel (330° to 150°), keeping the original saturation and lightness.

Hot Pink
#FF69B4
Complement (150°)
#69FFB4
Live UI Component Mockup
Component Header SampleBlack text on Hot Pink: 7.93:1 (WCAG AAA).
Button style preview

Analogous Harmony

Hues 30 degrees either side (300° and 0°), keeping the original saturation and lightness.

Analogous (300°)
#FF69FF
Hot Pink
#FF69B4
Analogous (0°)
#FF6969
Live UI Component Mockup
Component Header SampleBlack text on Hot Pink: 7.93:1 (WCAG AAA).
Button style preview

Triadic Harmony

Hues spaced evenly by 120 degrees (90° and 210°), keeping the original saturation and lightness.

Hot Pink
#FF69B4
Triadic (90°)
#B4FF69
Triadic (210°)
#69B4FF
Live UI Component Mockup
Component Header SampleBlack text on Hot Pink: 7.93:1 (WCAG AAA).
Button style preview

Tints & Shades

Mixed with white (tints) and black (shades) in sRGB at 60% and 30%.

Tint 60%
#FFC3E1
Tint 30%
#FF96CB
Hot Pink
#FF69B4
Shade 30%
#B34A7E
Shade 60%
#662A48
Live UI Component Mockup
Component Header SampleBlack text on Hot Pink: 7.93:1 (WCAG AAA).
Button style preview

WCAG 2.2 Text Readability & Contrast Check

Under WCAG 2.2 criteria, regular body text requires at least 4.5:1 (AA) and large text requires at least 3.0:1. The table below displays calculated contrast ratios:

Text Contrast Ratios on Hot Pink (#FF69B4)
Foreground ColorContrast RatioNormal Text (AA)Large Text (AA)Normal Text AAA (>= 7.0:1)
Pure Black (#000000)
7.93:1PassPassPass
Pure White (#FFFFFF)
2.65:1FailFailFail
Dark Charcoal (#212529)
5.83:1PassPassFail
Mid Gray (#666666)
2.17:1FailFailFail

Interactive Contrast Tester

Enter text foreground and background colors to verify WCAG legibility:

Calculated Ratio:
7.93:1
Normal: Pass AAALarge: Pass AAA
Large Heading Sample (18pt Bold)

This is sample body text rendered directly to verify contrast and readability.

Hot Pink Background Download

Download standard 1920x1080 solid desktop wallpaper or generate mobile wallpaper:

Hot Pink 1920x1080 solid color background wallpaper previewStandard Wallpaper: 1920x1080 PNG (#FF69B4)

Download Options

All wallpaper files precisely match the W3C standard color value:

Download 1920x1080 PNG

CSS Standard & Usage Notes

hotpink = #ff69b4 (rgb(255, 105, 180))
W3C CSS Color 4

UI Design & Accessibility Guidelines

Hot Pink works best as an accent: buttons, highlights, badges and brand marks. Black text on Hot Pink passes WCAG AA and AAA; white text does not reach the 3:1 large-text minimum, so avoid white labels on Hot Pink buttons.

Published: · Modified: · Editorial: SwatchAtlas Editorial Team

Frequently Asked Questions (FAQ)

Can I use black text on Hot Pink?

Yes. Black text on Hot Pink has a WCAG 2.2 contrast ratio of 7.93:1, passing both AA (4.5:1) and AAA (7:1) at every text size.

Can I use white text on Hot Pink?

No. White text on Hot Pink has a WCAG 2.2 contrast ratio of only 2.65:1, below the 3:1 minimum even for large text.

What colors go with Hot Pink?

Black, Midnight Blue, Indigo, Gold, Turquoise and White all go well with Hot Pink. Black (7.93:1), Midnight Blue (5.61:1) and Indigo (4.89:1) have enough contrast for text on Hot Pink; Gold, Turquoise and White work better as a background or accent.

Is Hot Pink the same as Deep Pink?

No. Hot Pink (#FF69B4) is lighter and softer, while Deep Pink (#FF1493) is darker and more intense. Both lean toward magenta, with hues of 330° and 328°.