Color con nombre más cercano · #F7B8CF
#F7B8CF
Color con nombre más cercano: Pink Marshmallow
#F7B8CF (rgb(247 184 207), hsl(338 80% 85%), oklch(0.847 0.078 355.2)) se parece más al color con nombre Pink Marshmallow. Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
#F7B8CF
oklch(0.847 0.078 355.2)
Conversiones de color
- 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%)
Tintes · Sombras · Tonos
Tintes
- F8BFD4
- F9C6D8
- FBCDDD
- FBD4E2
- FCDCE7
- FDE3EC
- FEEAF0
- FEF1F5
- FFF8FA
Sombras
- D7A0B4
- B78899
- 99717F
- 7C5B67
- 60454F
- 453138
- 2C1E23
- 150C10
- 030202
Tonos
- EBB2C7
- DFADBF
- D3A7B7
- C7A2AF
- BB9CA7
- AF969F
- A39197
- 978B8F
- 8C8688
Armonías de color
Complementario +180°
- F7B8CF
Pink Marshmallow
- 95DECA
≈ Beach Glass
Análogo -30° +30°
- F7B8CF
Pink Marshmallow
- E8BCE9
≈ Lovecloud
- FCB9B3
≈ Mexican Milk
Triádico +120° +240°
- F7B8CF
Pink Marshmallow
- CAD399
≈ Pistachio Cream
- 9AD6F9
≈ Juzcar Blue
Complementario dividido +150° +210°
- F7B8CF
Pink Marshmallow
- ADDBAE
≈ Big Spender
- 8DDCE5
≈ Paradisiacal Getaway
Tetrádico +90° +180° +270°
- F7B8CF
Pink Marshmallow
- E4C992
≈ Abstract
- 95DECA
≈ Beach Glass
- B5CDFF
≈ Ice Cold Stare
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.65:1 · APCA Lc 29
Ag
AAASobre negro
WCAG 12.71:1 · APCA Lc 74
Mejor color de texto: #000000
WCAG 12.71:1 (AAA) · APCA Lc 74
Contrast pairs
Fragmentos de código
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);
}