Couleur nommée la plus proche · #BE8E99
#BE8E99
Couleur nommée la plus proche: Punched Pink
#BE8E99 (rgb(190 142 153), hsl(346 27% 65%), oklch(0.696 0.06 3.6)) est la plus proche de la couleur nommée Punched Pink. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#BE8E99
oklch(0.696 0.06 3.6)
Conversions de couleur
- HEX
- #be8e99
- RGB
- rgb(190 142 153)
- HSL
- hsl(346 27% 65%)
- HWB
- hwb(346 56% 25%)
- OKLCH
- oklch(0.696 0.06 3.6)
- OKLab
- oklab(0.696 0.06 0.004)
- CIE Lab
- lab(63.98 19.98 1.64)
- LCH
- lch(63.98 20.05 4.7)
- CMYK
- cmyk(0% 25% 19% 25%)
Teintes · Ombres · Tons
Teintes
- C599A3
- CBA4AD
- D2AFB7
- D9BAC1
- DFC5CB
- E6D1D5
- ECDCDF
- F2E8EA
- F9F3F4
Ombres
- A57B84
- 8C6870
- 75565D
- 5E444A
- 483438
- 332427
- 1F1517
- 0D0708
- 020101
Tons
- B88D96
- B28B94
- AC8A91
- A5898F
- 9F878C
- 99868A
- 938487
- 8D8385
- 868282
Harmonies de couleurs
Complémentaire +180°
- BE8E99
Punched Pink
- 72AAA1
≈ Twining Vine
Analogue -30° +30°
- BE8E99
Punched Pink
- B590AD
≈ Tiny Ribbons
- BF9085
≈ Revival Rose
Triadique +120° +240°
- BE8E99
Punched Pink
- 95A47B
≈ Huntington Garden
- 7DA2C0
≈ Far Horizons
Complémentaire divisée +150° +210°
- BE8E99
Punched Pink
- 81A88C
≈ Catnip
- 71A7B4
≈ Blue Chiffon
Tétradique +90° +180° +270°
- BE8E99
Punched Pink
- A99D73
≈ Fresh Olive
- 72AAA1
≈ Twining Vine
- 919BC3
≈ Lavender Lustre
Contraste et accessibilité
Ag
FailSur blanc
WCAG 2.79:1 · APCA Lc 54
Ag
AAASur noir
WCAG 7.51:1 · APCA Lc 48
Meilleure couleur de texte: #000000
WCAG 7.51:1 (AAA) · APCA Lc 48
Contrast pairs
Extraits de code
CSS
:root {
--punched-pink: #be8e99;
--punched-pink-rgb: 190 142 153;
--punched-pink-oklch: oklch(0.696 0.06 3.6);
}
.element {
color: var(--punched-pink);
background-color: hsl(346 27% 65%);
border-color: oklch(0.696 0.06 3.6);
}Tailwind CSS v4
@theme {
--color-punched-pink: #be8e99;
--color-punched-pink-50: #ffeef2;
--color-punched-pink-100: #fbe0e5;
--color-punched-pink-200: #eccad0;
--color-punched-pink-300: #d3abb3;
--color-punched-pink-400: #be909a;
--color-punched-pink-500: #a97682;
--color-punched-pink-600: #8f646e;
--color-punched-pink-700: #725058;
--color-punched-pink-800: #543a41;
--color-punched-pink-900: #3b282d;
--color-punched-pink-950: #25161a;
}SCSS
$punched-pink: #be8e99;
$punched-pink-rgb: 190, 142, 153;
$punched-pink-light: mix(#fff, $punched-pink, 20%);
$punched-pink-dark: mix(#000, $punched-pink, 20%);
.element {
color: $punched-pink;
box-shadow: 0 0 0 2px rgba($punched-pink, 0.35);
}