Nächste benannte Farbe · #FD57D5
#FD57D5
Nächste benannte Farbe: Purple Pizzazz
#FD57D5 (rgb(253 87 213), hsl(314 98% 67%), oklch(0.719 0.239 338.8)) liegt am nächsten an der benannten Farbe Purple Pizzazz. Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
#FD57D5
oklch(0.719 0.239 338.8)
Farbumrechnungen
- HEX
- #fd57d5
- RGB
- rgb(253 87 213)
- HSL
- hsl(314 98% 67%)
- HWB
- hwb(314 34% 1%)
- OKLCH
- oklch(0.719 0.239 338.8)
- OKLab
- oklab(0.719 0.222 -0.086)
- CIE Lab
- lab(63.93 72.67 -31.21)
- LCH
- lch(63.93 79.09 336.8)
- CMYK
- cmyk(0% 66% 16% 1%)
Tints · Shades · Tones
Tints
- FF6CDA
- FF7FDE
- FF91E3
- FFA2E7
- FFB2EB
- FFC2EF
- FFD1F3
- FFE1F7
- FFF0FB
Shades
- DC4BB9
- BC3E9E
- 9D3383
- 7F276A
- 621C51
- 47123A
- 2D0824
- 160310
- 030002
Tones
- F15FCC
- E566C4
- D96BBB
- CD70B3
- C174AA
- B577A2
- A87A99
- 9B7C91
- 8E7E89
Farbharmonien
Komplementär +180°
- FD57D5
Purple Pizzazz
- 00C37D
≈ Times Square Screens
Analog -30° +30°
- FD57D5
Purple Pizzazz
- C77CFF
≈ Rosy Fluffy Bedspread
- FF6B8D
≈ Berlin Pink
Triadisch +120° +240°
- FD57D5
Purple Pizzazz
- BCA400
≈ Sulphine Yellow
- 00B7DB
≈ Maldives
Geteilt komplementär +150° +210°
- FD57D5
Purple Pizzazz
- 7FB900
≈ Dark Lime
- 00BDB4
≈ Turquoise Topaz
Tetradisch +90° +180° +270°
- FD57D5
Purple Pizzazz
- E38F00
≈ Hotter Butter
- 00C37D
≈ Times Square Screens
- 4BAAFF
≈ Joust Blue
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.79:1 · APCA Lc 53
Ag
AAAAuf Schwarz
WCAG 7.50:1 · APCA Lc 49
Beste Textfarbe: #000000
WCAG 7.50:1 (AAA) · APCA Lc 49
Contrast pairs
Code-Snippets
CSS
:root {
--purple-pizzazz: #fd57d5;
--purple-pizzazz-rgb: 253 87 213;
--purple-pizzazz-oklch: oklch(0.719 0.239 338.8);
}
.element {
color: var(--purple-pizzazz);
background-color: hsl(314 98% 67%);
border-color: oklch(0.719 0.239 338.8);
}Tailwind CSS v4
@theme {
--color-purple-pizzazz: #fd57d5;
--color-purple-pizzazz-50: #ffdbff;
--color-purple-pizzazz-100: #ffc8ff;
--color-purple-pizzazz-200: #ffaaf3;
--color-purple-pizzazz-300: #ff80dc;
--color-purple-pizzazz-400: #f257cc;
--color-purple-pizzazz-500: #e016b9;
--color-purple-pizzazz-600: #be1a9c;
--color-purple-pizzazz-700: #98167d;
--color-purple-pizzazz-800: #710e60;
--color-purple-pizzazz-900: #4f0943;
--color-purple-pizzazz-950: #34002b;
}SCSS
$purple-pizzazz: #fd57d5;
$purple-pizzazz-rgb: 253, 87, 213;
$purple-pizzazz-light: mix(#fff, $purple-pizzazz, 20%);
$purple-pizzazz-dark: mix(#000, $purple-pizzazz, 20%);
.element {
color: $purple-pizzazz;
box-shadow: 0 0 0 2px rgba($purple-pizzazz, 0.35);
}