Rose #ff007f

The flower that named half of romance.

RGB

255, 0, 127

HSL

330°, 100%, 50%

CMYK

0, 100, 50, 0

Luminance

0.2279

About Rose

Rose, #ff007f, is pink at full conviction — halfway between red and magenta, the color language borrowed from the flower for everything tender and slightly dramatic. From rose windows to rosé wine to rose gold phones, no bloom has colonized more vocabulary.

History

The rose named the color in a dozen languages centuries ago; heraldry’s Wars of the Roses branded English history with it. Rose gold — copper-blushed gold alloy — went from Fabergé’s Russia to the 2015 iPhone that made blush metal a global default.

Psychology

Rose is romance with agency — warmer than pink’s innocence, softer than red’s demand. Rose-tinted glasses are optimism’s official eyewear; the color performs affection confidently.

In design

Rose anchors beauty, dating and lifestyle design: #f43f5e-class roses are superb CTAs, and rose gold (#b76e79) remains the premium blush metal. On white, deep roses pass large-text AA; pair with sage, charcoal, cream and gold.

In culture

Sub rosa secrecy, rose windows, la vie en rose, the rose of every anthem and armistice: the flower is culture’s busiest metaphor, and the color inherits all of it.

Brands that own rose

Apple rose gold#b76e79 Tinder kin#fe3c72 Rosé wine shelf#f4c2c2 Lancôme kin#e75480 Tailwind rose#f43f5e

Shades of rose

Hot pink Deep pink Rose gold Blush Salmon pink Raspberry Tea rose Magenta

Every format

HEX	#ff007f
RGB	rgb(255, 0, 127)
HSL	hsl(330, 100%, 50%)
CMYK	cmyk(0%, 100%, 50%, 0%)
LAB	lab(54.9 84.5 4.6)
LCH	lch(54.9 84.6 3.1)
OKLCH	oklch(0.645 0.260 2.8)

Copy-ready code

/* CSS */
color: #ff007f;
background-color: #ff007f;
/* Tailwind (arbitrary) */
class="text-[#ff007f] bg-[#ff007f]"
/* SCSS */
$brand: #ff007f;
/* SwiftUI */
Color(red: 1.000, green: 0.000, blue: 0.498)
/* Android */
Color.parseColor("#ff007f")

Accessibility — WCAG contrast

#ff007f on white: 3.78:1

AA ✗ fail · AA-large ✓ · AAA ✗

#ff007f on black: 5.56:1

AA ✓ pass · AA-large ✓ · AAA ✗

true color

protanopia

deuteranopia

tritanopia

RGB percentages

Red100.0%

Green0.0%

Blue49.8%

CMYK percentages

Cyan0.0%

Magenta100.0%

Yellow50.2%

Key (black)0.0%

Color previews

#ff007f text on a black background

contrast 5.56:1

Card sample

#ff007f text on a white background

contrast 3.78:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #ff007f;

Background color

Panel with #ff007f background

background-color: #ff007f;

Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #ff007f;

Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(255, 0, 127, 0.45);

Div box shadow

Elevated card

box-shadow: 0 12px 32px -8px rgba(255, 0, 127, 0.45);

Border & gradient

Gradient panel

border: 3px solid #ff007f;
background: linear-gradient(135deg, #ff007f, #FF2B00);

Monochromatic scale

#3D001E #850042 #CC0066 #FF1489 #FF5CAD #FFA3D1 #FFD6EB

Palettes built from #ff007f

UI palette

Gradient stops

Accent trio

Warm–cool bridge

Shades — darker

#E60072 #CC0066 #B30059 #99004C #800040 #660033 #4D0026 #330019 #19000D

Tints — lighter

#FF1A8C #FF3399 #FF4DA5 #FF66B2 #FF80BF #FF99CC #FFB3D9 #FFCCE5 #FFE5F2

Hue & tone neighbors

#FF00D4 #FF00AA #FF0055 #FF002A #FF3399 #CC0066 #FF007F #E6197F

Color harmonies

Complement

Split-complement

Analogous

Triadic

Tetradic

Nearest named colors

crimson · ΔE 32.9 firebrick · ΔE 46.4 salmon · ΔE 47.9 orchid · ΔE 49.4 tomato · ΔE 50.1

Rose, answered

What is the hex code for rose?

Rose is #ff007f; UI rose centers on #f43f5e (Tailwind rose-500); rose gold is the muted metallic #b76e79.

Rose vs pink — what’s the difference?

Rose is pink matured: more red, more saturation, more intent. Pink whispers; rose declares.

What is rose gold exactly?

A gold-copper alloy (often ~75% gold, 22% copper) whose copper content blushes the metal. Digitally it maps near #b76e79 with lighter #e8c4bc highlights.

Work with #ff007f in the Color Lab

Contrast Checker →Palette Generator →Palette Pro →Scale Generator →CSS Code Generator →Color Blind Simulator →Accessibility Checker →Color Distance →