Color con nombre · #DBC2B4
Marshmallow Cocoa
Marshmallow Cocoa es #DBC2B4: rgb(219 194 180), hsl(22 35% 78%), oklch(0.831 0.034 51.2). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Gray mean? → · Marshmallow Cocoa color name →
#DBC2B4
oklch(0.831 0.034 51.2)
Conversiones de color
- HEX
- #dbc2b4
- RGB
- rgb(219 194 180)
- HSL
- hsl(22 35% 78%)
- HWB
- hwb(22 71% 14%)
- OKLCH
- oklch(0.831 0.034 51.2)
- OKLab
- oklab(0.831 0.022 0.027)
- CIE Lab
- lab(80.29 7.49 10.48)
- LCH
- lch(80.29 12.87 54.5)
- CMYK
- cmyk(0% 11% 18% 14%)
Tintes · Sombras · Tonos
Tintes
- DFC8BB
- E2CEC3
- E6D4CA
- EADAD2
- EDE0D9
- F1E6E1
- F4ECE8
- F8F3F0
- FBF9F7
Sombras
- BEA89C
- A28F85
- 87776E
- 6D6058
- 544944
- 3C3430
- 26201D
- 110E0C
- 020202
Tonos
- D2BBAF
- C8B4A9
- BFAEA4
- B6A79F
- ADA09A
- A49A95
- 9B938F
- 928D8A
- 898685
Armonías de color
Complementario +180°
- DBC2B4
Marshmallow Cocoa
- B2CCDA
≈ Arctic Circle
Análogo -30° +30°
- DBC2B4
Marshmallow Cocoa
- DEBFBE
≈ Strawflower
- D3C6AF
≈ Parlour Taupe
Triádico +120° +240°
- DBC2B4
Marshmallow Cocoa
- B2CFC5
≈ Steamy Spring
- C7C4DD
≈ Violet Sweet Pea
Complementario dividido +150° +210°
- DBC2B4
Marshmallow Cocoa
- AFCFD1
≈ Clinical Soft Blue
- BBC8DF
≈ Penna
Tetrádico +90° +180° +270°
- DBC2B4
Marshmallow Cocoa
- BCCEB9
≈ Sunlit Sea
- B2CCDA
≈ Arctic Circle
- D2C1D6
≈ Seedless Grape
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.69:1 · APCA Lc 30
Ag
AAASobre negro
WCAG 12.38:1 · APCA Lc 73
Mejor color de texto: #000000
WCAG 12.38:1 (AAA) · APCA Lc 73
Contrast pairs
Fragmentos de código
CSS
:root {
--marshmallow-cocoa: #dbc2b4;
--marshmallow-cocoa-rgb: 219 194 180;
--marshmallow-cocoa-oklch: oklch(0.831 0.034 51.2);
}
.element {
color: var(--marshmallow-cocoa);
background-color: hsl(22 35% 78%);
border-color: oklch(0.831 0.034 51.2);
}Tailwind CSS v4
@theme {
--color-marshmallow-cocoa: #dbc2b4;
--color-marshmallow-cocoa-50: #fef3ec;
--color-marshmallow-cocoa-100: #f2e5dd;
--color-marshmallow-cocoa-200: #e1d1c7;
--color-marshmallow-cocoa-300: #c6b3a7;
--color-marshmallow-cocoa-400: #b0998c;
--color-marshmallow-cocoa-500: #9a8072;
--color-marshmallow-cocoa-600: #826d60;
--color-marshmallow-cocoa-700: #68574d;
--color-marshmallow-cocoa-800: #4d3f38;
--color-marshmallow-cocoa-900: #352b26;
--color-marshmallow-cocoa-950: #201915;
}SCSS
$marshmallow-cocoa: #dbc2b4;
$marshmallow-cocoa-rgb: 219, 194, 180;
$marshmallow-cocoa-light: mix(#fff, $marshmallow-cocoa, 20%);
$marshmallow-cocoa-dark: mix(#000, $marshmallow-cocoa, 20%);
.element {
color: $marshmallow-cocoa;
box-shadow: 0 0 0 2px rgba($marshmallow-cocoa, 0.35);
}