Couleur nommée · #FF77AA
Raspberry Glaze
Raspberry Glaze correspond à #FF77AA : rgb(255 119 170), hsl(338 100% 73%), oklch(0.743 0.173 358.6). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Red mean? → · Raspberry Glaze color name →
#FF77AA
oklch(0.743 0.173 358.6)
Conversions de couleur
- HEX
- #ff77aa
- RGB
- rgb(255 119 170)
- HSL
- hsl(338 100% 73%)
- HWB
- hwb(338 47% 0%)
- OKLCH
- oklch(0.743 0.173 358.6)
- OKLab
- oklab(0.743 0.173 -0.004)
- CIE Lab
- lab(67.95 56.43 -0.93)
- LCH
- lch(67.95 56.43 359.1)
- CMYK
- cmyk(0% 53% 33% 0%)
Teintes · Ombres · Tons
Teintes
- FF86B2
- FF94BA
- FFA2C3
- FFB0CB
- FFBDD4
- FFCBDC
- FFD8E5
- FFE5EE
- FFF2F6
Ombres
- DE6793
- BE577D
- 9E4768
- 803853
- 632A3F
- 481C2D
- 2E101B
- 16050B
- 030101
Tons
- F379A6
- E77BA1
- DA7D9D
- CE7E99
- C17F95
- B58091
- A8808C
- 9B8088
- 8E8084
Harmonies de couleurs
Complémentaire +180°
- FF77AA
Raspberry Glaze
- 00C7AD
≈ Amazonite
Analogue -30° +30°
- FF77AA
Raspberry Glaze
- E580E1
≈ Lavender Magenta
- FF8171
≈ Fusion Coral
Triadique +120° +240°
- FF77AA
Raspberry Glaze
- A2B906
≈ Citrus
- 34B7FF
≈ Cherenkov Radiation
Complémentaire divisée +150° +210°
- FF77AA
Raspberry Glaze
- 4CC86A
≈ Zombie Green
- 00C1D6
≈ The Crowd Roars!
Tétradique +90° +180° +270°
- FF77AA
Raspberry Glaze
- D3A500
≈ Mouldy Ochre
- 00C7AD
≈ Amazonite
- 89A7FF
≈ Fennel Flower
Contraste et accessibilité
Ag
FailSur blanc
WCAG 2.47:1 · APCA Lc 48
Ag
AAASur noir
WCAG 8.47:1 · APCA Lc 54
Meilleure couleur de texte: #000000
WCAG 8.47:1 (AAA) · APCA Lc 54
Contrast pairs
Extraits de code
CSS
:root {
--raspberry-glaze: #ff77aa;
--raspberry-glaze-rgb: 255 119 170;
--raspberry-glaze-oklch: oklch(0.743 0.173 358.6);
}
.element {
color: var(--raspberry-glaze);
background-color: hsl(338 100% 73%);
border-color: oklch(0.743 0.173 358.6);
}Tailwind CSS v4
@theme {
--color-raspberry-glaze: #ff77aa;
--color-raspberry-glaze-50: #ffe1f2;
--color-raspberry-glaze-100: #ffd0e5;
--color-raspberry-glaze-200: #ffb5d0;
--color-raspberry-glaze-300: #fe90b3;
--color-raspberry-glaze-400: #ec6d9d;
--color-raspberry-glaze-500: #da4784;
--color-raspberry-glaze-600: #b83d70;
--color-raspberry-glaze-700: #94315a;
--color-raspberry-glaze-800: #6e2244;
--color-raspberry-glaze-900: #4d172f;
--color-raspberry-glaze-950: #33071b;
}SCSS
$raspberry-glaze: #ff77aa;
$raspberry-glaze-rgb: 255, 119, 170;
$raspberry-glaze-light: mix(#fff, $raspberry-glaze, 20%);
$raspberry-glaze-dark: mix(#000, $raspberry-glaze, 20%);
.element {
color: $raspberry-glaze;
box-shadow: 0 0 0 2px rgba($raspberry-glaze, 0.35);
}