Maroon Colors  ·  Color Library

Palettes / Colors / #FD63BE

#FD63BE — Light Vivid Pink

#FD63BE is a pink color we call Light Vivid Pink, closest to the named color HotPink (#FF69B4). It belongs to the pink family.

Color name

Closest CSS keyword: hotpink (#FF69B4) — not an exact match. CSS hotpink gives you #FF69B4, a different color; use #FD63BE when you need this exact shade.

Sources: common names follow widely used color-name references; CSS keywords and their hex values follow the CSS Color specification.

#FD63BE is a warm-leaning pink color associated with playfulness, romance and softness. It is saturated enough to be the accent — buttons, highlights and calls to action — while neutrals do the quiet work around it.

Its strongest partner is its complement #63FDA3; it also sits naturally between #F063FD and #FD6370. In the palettes below you can see it working alongside real color combinations from our collection.

#FD63BE · RGB 253, 99, 190

Download PNG swatch SVG

Color values

HEX#FD63BE
RGB253, 99, 190
HSL325°, 97%, 69%
HSV325°, 61%, 99%
CMYK0%, 61%, 25%, 1%
XYZ54.26, 33.52, 52.33
Yxy33.52, 0.3873, 0.2393
CIE-Lab64.58, 67.45, -17.72
Hunter Lab57.90, 70.16, -16.83

RGB & CMYK percentages

Red 99% · Green 39% · Blue 75%

Cyan 0% · Magenta 61% · Yellow 25% · Key 1%

CMYK values are unprofiled approximations for screen reference — not a print-proofing guarantee.

Previews

Sample text in #FD63BE on black
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sample text in #FD63BE on white
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CSS code for #FD63BE

.text { color: #FD63BE; }
.background { background-color: #FD63BE; }
.border { border: 3px solid #FD63BE; }
.text-rgb { color: rgb(253, 99, 190); }
.text-hsl { color: hsl(325, 97%, 69%); }
.text-shadow-hex { text-shadow: 4px 4px 2px #FD63BE; }
.text-shadow-rgba { text-shadow: 4px 4px 2px rgba(253, 99, 190, 0.8); }
.box-shadow-hex { box-shadow: 1px 1px 3px 2px #FD63BE; }
.box-shadow-rgba { box-shadow: 1px 1px 3px 2px rgba(253, 99, 190, 0.8); }

HTML: <p style="color:#FD63BE">Text here</p> · <div style="background-color:#FD63BE">Div content here</div>

Shades of #FD63BE

#FC45B0#FC22A1#FB0494#D8037F#BA036E#970259#790247#550132#370121#14000C

Tints of #FD63BE

#FD72C3#FD7CC7#FD8BCE#FD9BD4#FEAADB#FEB4DF#FEC3E5#FED2EC#FEDCF0#FFEBF6

Tones of #FD63BE

#F26EBB#E679B9#DB84B7#D18FB5#C69AB4#BBA5B2

Color harmonies

Complementary — #63FDA3:

Analogous:

Triadic:

Contrast & accessibility

Against white text2.73:1 Fails
Against black text7.70:1 AAA

Best text color on #FD63BE: #000000.

Semi-transparent (opacity) text on #FD63BE

Text set with opacity blends into the background, so its real contrast is lower than the solid ratios above. Choose a text color and an opacity to see the blended color and its true ratio:

100%
Sample heading text
Smaller body text shows the effect best.

Blended color: · Contrast against #FD63BE: ·

How #FD63BE looks with color blindness

Simulated with standard Machado color-vision-deficiency matrices — useful when this color carries meaning in charts, maps or interfaces:

Protanopia · #BAB9A8Deuteranopia · #C3CFA3Tritanopia · #F59793

Closest design-system colors

The nearest matches in the Tailwind CSS, Material Design and Bootstrap palettes — handy when you need a framework class instead of a raw hex:

Tailwind pink 500 · #EC4899Tailwind fuchsia 500 · #D946EFTailwind fuchsia 600 · #C026D3

Palettes with a similar color

These palettes use a close neighbour of #FD63BE rather than the exact color:

Palette Fbf5a7
#FBF5A7 · #FF97D0 · #FF62BB · #B331F1
Palette 5d12d2
#5D12D2 · #B931FC · #FF6AC2 · #FFE5E5
Palette Fff6fb
#FFF6FB · #FFBEE3 · #FC5BB6 · #FF0592
Palette 462c7d
#462C7D · #831C91 · #D552A3 · #FF70BF
Lucky Tempest
#0C192C · #44FC95 · #65FA1D · #F957B3
Palette 000000
#000000 · #9929EA · #FF5FCF · #FAEB92

Similar colors

The closest colors that actually appear in our palette collection — click any to open its page:

#FF62BB#FF6AC2#FC5BB6#FF70BF#F957B3#FF5FCF#FF5BAE#EE60B2#F26ECA#FF71CD#F375C2#FB4EBD

Browse neighbouring colors

← #FD63BD  ·  #FD63BF →

Frequently asked questions

What color is #FD63BE?

#FD63BE is Light Vivid Pink, a pink color (RGB 253, 99, 190). Its closest standard named color is HotPink.

What is the RGB and HSL of #FD63BE?

#FD63BE is RGB 253, 99, 190 — HSL 325°, 97%, 69% — CMYK 0%, 61%, 25%, 1%.

What colors go with #FD63BE?

Its complement is #63FDA3; analogous partners are #F063FD and #FD6370. It also appears in 6+ palettes in our collection.

Can I use #FD63BE for text?

Black text on #FD63BE has a contrast ratio of 7.70:1 (passes WCAG AA); white text gives 2.73:1.