Couleur nommée la plus proche · #F7B8CF
#F7B8CF
Couleur nommée la plus proche: Pink Marshmallow
#F7B8CF (rgb(247 184 207), hsl(338 80% 85%), oklch(0.847 0.078 355.2)) est la plus proche de la couleur nommée Pink Marshmallow. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#F7B8CF
oklch(0.847 0.078 355.2)
Conversions de couleur
- HEX
- #f7b8cf
- RGB
- rgb(247 184 207)
- HSL
- hsl(338 80% 85%)
- HWB
- hwb(338 72% 3%)
- OKLCH
- oklch(0.847 0.078 355.2)
- OKLab
- oklab(0.847 0.078 -0.007)
- CIE Lab
- lab(81.2 25.95 -2.22)
- LCH
- lch(81.2 26.05 355.1)
- CMYK
- cmyk(0% 26% 16% 3%)
Teintes · Ombres · Tons
Teintes
- F8BFD4
- F9C6D8
- FBCDDD
- FBD4E2
- FCDCE7
- FDE3EC
- FEEAF0
- FEF1F5
- FFF8FA
Ombres
- D7A0B4
- B78899
- 99717F
- 7C5B67
- 60454F
- 453138
- 2C1E23
- 150C10
- 030202
Tons
- EBB2C7
- DFADBF
- D3A7B7
- C7A2AF
- BB9CA7
- AF969F
- A39197
- 978B8F
- 8C8688
Harmonies de couleurs
Complémentaire +180°
- F7B8CF
Pink Marshmallow
- 95DECA
≈ Beach Glass
Analogue -30° +30°
- F7B8CF
Pink Marshmallow
- E8BCE9
≈ Lovecloud
- FCB9B3
≈ Mexican Milk
Triadique +120° +240°
- F7B8CF
Pink Marshmallow
- CAD399
≈ Pistachio Cream
- 9AD6F9
≈ Juzcar Blue
Complémentaire divisée +150° +210°
- F7B8CF
Pink Marshmallow
- ADDBAE
≈ Big Spender
- 8DDCE5
≈ Paradisiacal Getaway
Tétradique +90° +180° +270°
- F7B8CF
Pink Marshmallow
- E4C992
≈ Abstract
- 95DECA
≈ Beach Glass
- B5CDFF
≈ Ice Cold Stare
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.65:1 · APCA Lc 29
Ag
AAASur noir
WCAG 12.71:1 · APCA Lc 74
Meilleure couleur de texte: #000000
WCAG 12.71:1 (AAA) · APCA Lc 74
Contrast pairs
Extraits de code
CSS
:root {
--pink-marshmallow: #f7b8cf;
--pink-marshmallow-rgb: 247 184 207;
--pink-marshmallow-oklch: oklch(0.847 0.078 355.2);
}
.element {
color: var(--pink-marshmallow);
background-color: hsl(338 80% 85%);
border-color: oklch(0.847 0.078 355.2);
}Tailwind CSS v4
@theme {
--color-pink-marshmallow: #f7b8cf;
--color-pink-marshmallow-50: #ffecf5;
--color-pink-marshmallow-100: #ffdee8;
--color-pink-marshmallow-200: #f1c7d4;
--color-pink-marshmallow-300: #d9a7b8;
--color-pink-marshmallow-400: #c48ba1;
--color-pink-marshmallow-500: #b07089;
--color-pink-marshmallow-600: #945f74;
--color-pink-marshmallow-700: #774c5c;
--color-pink-marshmallow-800: #583745;
--color-pink-marshmallow-900: #3d262f;
--color-pink-marshmallow-950: #27141c;
}SCSS
$pink-marshmallow: #f7b8cf;
$pink-marshmallow-rgb: 247, 184, 207;
$pink-marshmallow-light: mix(#fff, $pink-marshmallow, 20%);
$pink-marshmallow-dark: mix(#000, $pink-marshmallow, 20%);
.element {
color: $pink-marshmallow;
box-shadow: 0 0 0 2px rgba($pink-marshmallow, 0.35);
}