Benoemde kleur · #FF33CC
Razzle Dazzle Rose
Razzle Dazzle Rose is #FF33CC: rgb(255 51 204), hsl(315 100% 60%), oklch(0.69 0.271 340.9). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Pink mean? → · Razzle Dazzle Rose color name →
#FF33CC
oklch(0.69 0.271 340.9)
Kleurconversies
- HEX
- #ff33cc
- RGB
- rgb(255 51 204)
- HSL
- hsl(315 100% 60%)
- HWB
- hwb(315 20% 0%)
- OKLCH
- oklch(0.69 0.271 340.9)
- OKLab
- oklab(0.69 0.256 -0.089)
- CIE Lab
- lab(60.14 82.7 -31.92)
- LCH
- lch(60.14 88.65 338.9)
- CMYK
- cmyk(0% 80% 20% 0%)
Tinten · Schaduwen · Tonen
Tinten
- FF54D2
- FF6CD7
- FF82DC
- FF95E1
- FFA8E7
- FFBAEC
- FFCCF1
- FFDDF6
- FFEEFA
Schaduwen
- DE2BB1
- BE2397
- 9E1C7E
- 801465
- 630D4E
- 480737
- 2E0322
- 16010F
- 030002
Tonen
- F344C4
- E851BD
- DC5BB5
- D063AE
- C46AA6
- B7709F
- AA7597
- 9D798F
- 8F7D88
Kleurharmonieën
Complementair +180°
- FF33CC
Razzle Dazzle Rose
- 00B87B
≈ Green Teal
Analoog -30° +30°
- FF33CC
Razzle Dazzle Rose
- C768FF
≈ Jacaranda Pink
- FF567C
≈ Warm Pink
Triadisch +120° +240°
- FF33CC
Razzle Dazzle Rose
- AF9D00
≈ Lucky
- 00ACD2
≈ Hú Lán Blue
Gesplitst complementair +150° +210°
- FF33CC
Razzle Dazzle Rose
- 70B100
≈ Extra Life
- 00B2AD
≈ Laguna Green
Tetradisch +90° +180° +270°
- FF33CC
Razzle Dazzle Rose
- D48900
≈ Fleur de Sel Caramel
- 00B87B
≈ Green Teal
- 3A9FFF
≈ Sky Dancer
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 3.18:1 · APCA Lc 57
Ag
AAOp zwart
WCAG 6.59:1 · APCA Lc 45
Beste tekstkleur: #000000
WCAG 6.59:1 (AA) · APCA Lc 45
Contrast pairs
Codefragmenten
CSS
:root {
--razzle-dazzle-rose: #ff33cc;
--razzle-dazzle-rose-rgb: 255 51 204;
--razzle-dazzle-rose-oklch: oklch(0.69 0.271 340.9);
}
.element {
color: var(--razzle-dazzle-rose);
background-color: hsl(315 100% 60%);
border-color: oklch(0.69 0.271 340.9);
}Tailwind CSS v4
@theme {
--color-razzle-dazzle-rose: #ff33cc;
--color-razzle-dazzle-rose-50: #ffd6ff;
--color-razzle-dazzle-rose-100: #ffc3ff;
--color-razzle-dazzle-rose-200: #ffa2f3;
--color-razzle-dazzle-rose-300: #ff74db;
--color-razzle-dazzle-rose-400: #fe43cd;
--color-razzle-dazzle-rose-500: #ed00ba;
--color-razzle-dazzle-rose-600: #c8009d;
--color-razzle-dazzle-rose-700: #a1007e;
--color-razzle-dazzle-rose-800: #770060;
--color-razzle-dazzle-rose-900: #540044;
--color-razzle-dazzle-rose-950: #38002c;
}SCSS
$razzle-dazzle-rose: #ff33cc;
$razzle-dazzle-rose-rgb: 255, 51, 204;
$razzle-dazzle-rose-light: mix(#fff, $razzle-dazzle-rose, 20%);
$razzle-dazzle-rose-dark: mix(#000, $razzle-dazzle-rose, 20%);
.element {
color: $razzle-dazzle-rose;
box-shadow: 0 0 0 2px rgba($razzle-dazzle-rose, 0.35);
}