Cor nomeada mais próxima · #F7B8CF
#F7B8CF
Cor nomeada mais próxima: Pink Marshmallow
#F7B8CF (rgb(247 184 207), hsl(338 80% 85%), oklch(0.847 0.078 355.2)) é mais próxima da cor nomeada Pink Marshmallow. Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
#F7B8CF
oklch(0.847 0.078 355.2)
Conversões de cor
- 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%)
Tons claros · Sombras · Tons
Tons claros
- F8BFD4
- F9C6D8
- FBCDDD
- FBD4E2
- FCDCE7
- FDE3EC
- FEEAF0
- FEF1F5
- FFF8FA
Sombras
- D7A0B4
- B78899
- 99717F
- 7C5B67
- 60454F
- 453138
- 2C1E23
- 150C10
- 030202
Tons
- EBB2C7
- DFADBF
- D3A7B7
- C7A2AF
- BB9CA7
- AF969F
- A39197
- 978B8F
- 8C8688
Harmonias de cor
Complementar +180°
- F7B8CF
Pink Marshmallow
- 95DECA
≈ Beach Glass
Análoga -30° +30°
- F7B8CF
Pink Marshmallow
- E8BCE9
≈ Lovecloud
- FCB9B3
≈ Mexican Milk
Tríade +120° +240°
- F7B8CF
Pink Marshmallow
- CAD399
≈ Pistachio Cream
- 9AD6F9
≈ Juzcar Blue
Complementar dividida +150° +210°
- F7B8CF
Pink Marshmallow
- ADDBAE
≈ Big Spender
- 8DDCE5
≈ Paradisiacal Getaway
Tétrade +90° +180° +270°
- F7B8CF
Pink Marshmallow
- E4C992
≈ Abstract
- 95DECA
≈ Beach Glass
- B5CDFF
≈ Ice Cold Stare
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.65:1 · APCA Lc 29
Ag
AAASobre preto
WCAG 12.71:1 · APCA Lc 74
Melhor cor de texto: #000000
WCAG 12.71:1 (AAA) · APCA Lc 74
Contrast pairs
Trechos 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);
}