Cor nomeada · #E9B7AC
Pink Cocoa
Pink Cocoa é #E9B7AC: rgb(233 183 172), hsl(11 58% 79%), oklch(0.821 0.06 32.6). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Pink mean? → · Pink Cocoa color name →
#E9B7AC
oklch(0.821 0.06 32.6)
Conversões de cor
- HEX
- #e9b7ac
- RGB
- rgb(233 183 172)
- HSL
- hsl(11 58% 79%)
- HWB
- hwb(11 67% 9%)
- OKLCH
- oklch(0.821 0.06 32.6)
- OKLab
- oklab(0.821 0.051 0.033)
- CIE Lab
- lab(78.8 17.47 12.9)
- LCH
- lch(78.8 21.72 36.4)
- CMYK
- cmyk(0% 21% 26% 9%)
Tons claros · Sombras · Tons
Tons claros
- ECBEB4
- EEC5BC
- F0CCC4
- F3D4CD
- F5DBD5
- F7E2DD
- F9E9E6
- FBF0EE
- FDF8F7
Sombras
- CB9F95
- AD877F
- 907069
- 745A54
- 5A4540
- 41312D
- 291E1B
- 130C0B
- 030201
Tons
- DEB1A8
- D4ACA3
- C9A69F
- BEA19A
- B49B96
- A99691
- 9F908D
- 958B89
- 8A8584
Harmonias de cor
Complementar +180°
- E9B7AC
Pink Cocoa
- 97D0DC
≈ Washed Blue
Análoga -30° +30°
- E9B7AC
Pink Cocoa
- E7B5C1
≈ Athena Pink
- E2BD9D
≈ Eggshell Paper
Tríade +120° +240°
- E9B7AC
Pink Cocoa
- A8D0B2
≈ Merrylyn
- B7C3ED
≈ Larkspur Bud
Complementar dividida +150° +210°
- E9B7AC
Pink Cocoa
- 99D2C8
≈ Opal Turquoise
- A3CAE9
≈ Island Light
Tétrade +90° +180° +270°
- E9B7AC
Pink Cocoa
- BDCBA0
≈ Marjoram
- 97D0DC
≈ Washed Blue
- CCBCE6
≈ Drifting Dream
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.77:1 · APCA Lc 33
Ag
AAASobre preto
WCAG 11.83:1 · APCA Lc 70
Melhor cor de texto: #000000
WCAG 11.83:1 (AAA) · APCA Lc 70
Contrast pairs
Trechos de código
CSS
:root {
--pink-cocoa: #e9b7ac;
--pink-cocoa-rgb: 233 183 172;
--pink-cocoa-oklch: oklch(0.821 0.06 32.6);
}
.element {
color: var(--pink-cocoa);
background-color: hsl(11 58% 79%);
border-color: oklch(0.821 0.06 32.6);
}Tailwind CSS v4
@theme {
--color-pink-cocoa: #e9b7ac;
--color-pink-cocoa-50: #fff0ea;
--color-pink-cocoa-100: #fbe1db;
--color-pink-cocoa-200: #edccc3;
--color-pink-cocoa-300: #d4ada3;
--color-pink-cocoa-400: #bf9288;
--color-pink-cocoa-500: #aa786d;
--color-pink-cocoa-600: #90655c;
--color-pink-cocoa-700: #73514a;
--color-pink-cocoa-800: #553b36;
--color-pink-cocoa-900: #3c2825;
--color-pink-cocoa-950: #251613;
}SCSS
$pink-cocoa: #e9b7ac;
$pink-cocoa-rgb: 233, 183, 172;
$pink-cocoa-light: mix(#fff, $pink-cocoa, 20%);
$pink-cocoa-dark: mix(#000, $pink-cocoa, 20%);
.element {
color: $pink-cocoa;
box-shadow: 0 0 0 2px rgba($pink-cocoa, 0.35);
}