Benannte Farbe · #F504C9
Mademoiselle Pink
Mademoiselle Pink ist #F504C9: rgb(245 4 201), hsl(311 97% 49%), oklch(0.657 0.286 339). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Pink mean? → · Mademoiselle Pink color name →
#F504C9
oklch(0.657 0.286 339)
Farbumrechnungen
- HEX
- #f504c9
- RGB
- rgb(245 4 201)
- HSL
- hsl(311 97% 49%)
- HWB
- hwb(311 2% 4%)
- OKLCH
- oklch(0.657 0.286 339)
- OKLab
- oklab(0.657 0.267 -0.102)
- CIE Lab
- lab(56.03 86.39 -36.75)
- LCH
- lch(56.03 93.88 337)
- CMYK
- cmyk(0% 98% 18% 4%)
Tints · Shades · Tones
Tints
- F941CF
- FD5FD5
- FF77DA
- FF8DE0
- FFA1E5
- FFB5EB
- FFC8F0
- FFDAF5
- FFEDFA
Shades
- D503AE
- B60295
- 98017C
- 7B0164
- 5F014C
- 440036
- 2B0022
- 15000F
- 030002
Tones
- EB2FC2
- E042BB
- D550B3
- CA5AAC
- BF63A5
- B46A9E
- A87196
- 9B778F
- 8E7C88
Farbharmonien
Komplementär +180°
- F504C9
Mademoiselle Pink
- 00AC6F
≈ Secret Garden
Analog -30° +30°
- F504C9
Mademoiselle Pink
- BD56FF
≈ Jacaranda Pink
- FF3072
≈ Office Neon Light
Triadisch +120° +240°
- F504C9
Mademoiselle Pink
- A79200
≈ Bark Sawdust
- 00A2C2
≈ Scuba Blue
Geteilt komplementär +150° +210°
- F504C9
Mademoiselle Pink
- 6FA400
≈ Herbal Lift
- 00A7A0
≈ Jadestone
Tetradisch +90° +180° +270°
- F504C9
Mademoiselle Pink
- C97E00
≈ Bamboo Brown
- 00AC6F
≈ Secret Garden
- 0095FA
≈ Starfleet Blue
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 3.65:1 · APCA Lc 61
Ag
AAAuf Schwarz
WCAG 5.74:1 · APCA Lc 40
Beste Textfarbe: #000000
WCAG 5.74:1 (AA) · APCA Lc 40
Contrast pairs
Code-Snippets
CSS
:root {
--mademoiselle-pink: #f504c9;
--mademoiselle-pink-rgb: 245 4 201;
--mademoiselle-pink-oklch: oklch(0.657 0.286 339);
}
.element {
color: var(--mademoiselle-pink);
background-color: hsl(311 97% 49%);
border-color: oklch(0.657 0.286 339);
}Tailwind CSS v4
@theme {
--color-mademoiselle-pink: #f504c9;
--color-mademoiselle-pink-50: #ffd5ff;
--color-mademoiselle-pink-100: #ffc1ff;
--color-mademoiselle-pink-200: #ff9ff8;
--color-mademoiselle-pink-300: #ff70e2;
--color-mademoiselle-pink-400: #ff39d4;
--color-mademoiselle-pink-500: #ef00c2;
--color-mademoiselle-pink-600: #ca00a4;
--color-mademoiselle-pink-700: #a30083;
--color-mademoiselle-pink-800: #780065;
--color-mademoiselle-pink-900: #550047;
--color-mademoiselle-pink-950: #39002e;
}SCSS
$mademoiselle-pink: #f504c9;
$mademoiselle-pink-rgb: 245, 4, 201;
$mademoiselle-pink-light: mix(#fff, $mademoiselle-pink, 20%);
$mademoiselle-pink-dark: mix(#000, $mademoiselle-pink, 20%);
.element {
color: $mademoiselle-pink;
box-shadow: 0 0 0 2px rgba($mademoiselle-pink, 0.35);
}