Couleur nommée · #CC2277
Prince Charming
Prince Charming correspond à #CC2277 : rgb(204 34 119), hsl(330 71% 47%), oklch(0.563 0.211 357). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Red mean? → · Prince Charming color name →
#CC2277
oklch(0.563 0.211 357)
Conversions de couleur
- HEX
- #cc2277
- RGB
- rgb(204 34 119)
- HSL
- hsl(330 71% 47%)
- HWB
- hwb(330 13% 20%)
- OKLCH
- oklch(0.563 0.211 357)
- OKLab
- oklab(0.563 0.21 -0.011)
- CIE Lab
- lab(46.58 67.5 -3.27)
- LCH
- lch(46.58 67.58 357.2)
- CMYK
- cmyk(0% 83% 42% 20%)
Teintes · Ombres · Tons
Teintes
- D44384
- DC5C91
- E3729E
- E987AB
- EF9BB9
- F3AFC6
- F7C3D4
- FBD7E2
- FDEBF1
Ombres
- B11C67
- 971657
- 7E1147
- 650B38
- 4E072A
- 37031C
- 220110
- 0F0005
- 020001
Tons
- C63578
- C04279
- BA4D7A
- B3567B
- AC5F7C
- A4667C
- 9C6D7D
- 94747E
- 8A7A7F
Harmonies de couleurs
Complémentaire +180°
- CC2277
Prince Charming
- 008974
≈ Industrial Turquoise
Analogue -30° +30°
- CC2277
Prince Charming
- B137B4
≈ Vivid Fuchsia
- D52325
≈ Flaming Cherry
Triadique +120° +240°
- CC2277
Prince Charming
- 717E00
≈ Flag Green
- 007EB4
≈ Artesian Water
Complémentaire divisée +150° +210°
- CC2277
Prince Charming
- 008E32
≈ North Texas Green
- 008592
≈ Painted Sea
Tétradique +90° +180° +270°
- CC2277
Prince Charming
- 927000
≈ Honey Yellow Green
- 008974
≈ Industrial Turquoise
- 3E66EF
≈ The Rainbow Fish
Contraste et accessibilité
Ag
AASur blanc
WCAG 5.16:1 · APCA Lc 74
Ag
FailSur noir
WCAG 4.06:1 · APCA Lc 28
Meilleure couleur de texte: #FFFFFF
WCAG 5.16:1 (AA) · APCA Lc 74
Contrast pairs
Extraits de code
CSS
:root {
--prince-charming: #cc2277;
--prince-charming-rgb: 204 34 119;
--prince-charming-oklch: oklch(0.563 0.211 357);
}
.element {
color: var(--prince-charming);
background-color: hsl(330 71% 47%);
border-color: oklch(0.563 0.211 357);
}Tailwind CSS v4
@theme {
--color-prince-charming: #cc2277;
--color-prince-charming-50: #ffddf4;
--color-prince-charming-100: #ffcbe6;
--color-prince-charming-200: #ffadd2;
--color-prince-charming-300: #ff85b5;
--color-prince-charming-400: #fa5da0;
--color-prince-charming-500: #e82988;
--color-prince-charming-600: #c42673;
--color-prince-charming-700: #9e1f5c;
--color-prince-charming-800: #751446;
--color-prince-charming-900: #530d30;
--color-prince-charming-950: #37001d;
}SCSS
$prince-charming: #cc2277;
$prince-charming-rgb: 204, 34, 119;
$prince-charming-light: mix(#fff, $prince-charming, 20%);
$prince-charming-dark: mix(#000, $prince-charming, 20%);
.element {
color: $prince-charming;
box-shadow: 0 0 0 2px rgba($prince-charming, 0.35);
}