Cor nomeada · #BEC3BB
Comfort Grey
Comfort Grey é #BEC3BB: rgb(190 195 187), hsl(97 6% 75%), oklch(0.811 0.012 133.4). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Comfort Grey color name →
#BEC3BB
oklch(0.811 0.012 133.4)
Conversões de cor
- HEX
- #bec3bb
- RGB
- rgb(190 195 187)
- HSL
- hsl(97 6% 75%)
- HWB
- hwb(97 73% 24%)
- OKLCH
- oklch(0.811 0.012 133.4)
- OKLab
- oklab(0.811 -0.008 0.009)
- CIE Lab
- lab(78.22 -2.89 3.4)
- LCH
- lch(78.22 4.46 130.4)
- CMYK
- cmyk(3% 0% 4% 24%)
Tons claros · Sombras · Tons
Tons claros
- C4C9C2
- CBCFC8
- D1D5CF
- D8DBD6
- DEE1DD
- E5E7E3
- EBEDEA
- F2F3F1
- F8F9F8
Sombras
- A5A9A2
- 8C908A
- 757873
- 5E605C
- 484A46
- 333432
- 1F201F
- 0D0E0D
- 020202
Tons
- B8BCB5
- B1B5AF
- ABAEA9
- A5A8A3
- 9EA19D
- 989A97
- 929491
- 8C8D8B
- 868686
Harmonias de cor
Complementar +180°
- BEC3BB
Comfort Grey
- C4BFC7
≈ Grape Mist
Análoga -30° +30°
- BEC3BB
Comfort Grey
- C2C2B9
≈ Baby Barn Owl
- BAC4BF
≈ Tiara
Tríade +120° +240°
- BEC3BB
Comfort Grey
- BCC2C9
≈ Metallic
- C9BEBF
≈ Nantucket Mist
Complementar dividida +150° +210°
- BEC3BB
Comfort Grey
- C0C0C9
≈ Lavender Oil
- C7BEC3
≈ Glass Bead
Tétrade +90° +180° +270°
- BEC3BB
Comfort Grey
- B9C3C7
≈ Metallic
- C4BFC7
≈ Grape Mist
- C9BFBB
≈ Worn Silver
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.79:1 · APCA Lc 33
Ag
AAASobre preto
WCAG 11.71:1 · APCA Lc 69
Melhor cor de texto: #000000
WCAG 11.71:1 (AAA) · APCA Lc 69
Contrast pairs
Trechos de código
CSS
:root {
--comfort-grey: #bec3bb;
--comfort-grey-rgb: 190 195 187;
--comfort-grey-oklch: oklch(0.811 0.012 133.4);
}
.element {
color: var(--comfort-grey);
background-color: hsl(97 6% 75%);
border-color: oklch(0.811 0.012 133.4);
}Tailwind CSS v4
@theme {
--color-comfort-grey: #bec3bb;
--color-comfort-grey-50: #f3f6f2;
--color-comfort-grey-100: #e6e9e5;
--color-comfort-grey-200: #d2d5d0;
--color-comfort-grey-300: #b5b9b3;
--color-comfort-grey-400: #9ba099;
--color-comfort-grey-500: #838880;
--color-comfort-grey-600: #6f736c;
--color-comfort-grey-700: #595c56;
--color-comfort-grey-800: #41433f;
--color-comfort-grey-900: #2d2e2b;
--color-comfort-grey-950: #1a1b19;
}SCSS
$comfort-grey: #bec3bb;
$comfort-grey-rgb: 190, 195, 187;
$comfort-grey-light: mix(#fff, $comfort-grey, 20%);
$comfort-grey-dark: mix(#000, $comfort-grey, 20%);
.element {
color: $comfort-grey;
box-shadow: 0 0 0 2px rgba($comfort-grey, 0.35);
}