Cor nomeada · #B4C4CA
Lighthouse Shadows
Lighthouse Shadows é #B4C4CA: rgb(180 196 202), hsl(196 17% 75%), oklch(0.81 0.019 222.2). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Lighthouse Shadows color name →
#B4C4CA
oklch(0.81 0.019 222.2)
Conversões de cor
- HEX
- #b4c4ca
- RGB
- rgb(180 196 202)
- HSL
- hsl(196 17% 75%)
- HWB
- hwb(196 71% 21%)
- OKLCH
- oklch(0.81 0.019 222.2)
- OKLab
- oklab(0.81 -0.014 -0.013)
- CIE Lab
- lab(78.06 -4.76 -4.99)
- LCH
- lch(78.06 6.9 226.3)
- CMYK
- cmyk(11% 3% 0% 21%)
Tons claros · Sombras · Tons
Tons claros
- BBCACF
- C3D0D4
- CAD5DA
- D2DBDF
- D9E1E4
- E1E7EA
- E8EDEF
- F0F3F4
- F7F9FA
Sombras
- 9CAAAF
- 859195
- 6E787C
- 586164
- 444A4D
- 303537
- 1D2122
- 0C0E0F
- 020202
Tons
- AFBDC2
- A9B6BB
- A4AFB3
- 9FA8AC
- 9AA1A4
- 959B9D
- 8F9496
- 8A8D8E
- 858787
Harmonias de cor
Complementar +180°
- B4C4CA
Lighthouse Shadows
- CDBDB7
≈ Barely Mauve
Análoga -30° +30°
- B4C4CA
Lighthouse Shadows
- B3C5C4
≈ Misty Blue
- B8C2CD
≈ Icebreaker
Tríade +120° +240°
- B4C4CA
Lighthouse Shadows
- CABCC4
≈ Lady Fingers
- C3C2B3
≈ Moonshine
Complementar dividida +150° +210°
- B4C4CA
Lighthouse Shadows
- CDBCBD
≈ Silentropae Cloud
- C9BFB4
≈ Crumbling Statue
Tétrade +90° +180° +270°
- B4C4CA
Lighthouse Shadows
- C5BDCA
≈ Gentleman’s Suit
- CDBDB7
≈ Barely Mauve
- BCC4B7
≈ Breezy Day
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.79:1 · APCA Lc 33
Ag
AAASobre preto
WCAG 11.68:1 · APCA Lc 69
Melhor cor de texto: #000000
WCAG 11.68:1 (AAA) · APCA Lc 69
Contrast pairs
Trechos de código
CSS
:root {
--lighthouse-shadows: #b4c4ca;
--lighthouse-shadows-rgb: 180 196 202;
--lighthouse-shadows-oklch: oklch(0.81 0.019 222.2);
}
.element {
color: var(--lighthouse-shadows);
background-color: hsl(196 17% 75%);
border-color: oklch(0.81 0.019 222.2);
}Tailwind CSS v4
@theme {
--color-lighthouse-shadows: #b4c4ca;
--color-lighthouse-shadows-50: #f0f6f9;
--color-lighthouse-shadows-100: #e1e9ed;
--color-lighthouse-shadows-200: #ccd6da;
--color-lighthouse-shadows-300: #adbabf;
--color-lighthouse-shadows-400: #93a1a7;
--color-lighthouse-shadows-500: #798990;
--color-lighthouse-shadows-600: #667479;
--color-lighthouse-shadows-700: #525d61;
--color-lighthouse-shadows-800: #3b4447;
--color-lighthouse-shadows-900: #292f31;
--color-lighthouse-shadows-950: #161c1d;
}SCSS
$lighthouse-shadows: #b4c4ca;
$lighthouse-shadows-rgb: 180, 196, 202;
$lighthouse-shadows-light: mix(#fff, $lighthouse-shadows, 20%);
$lighthouse-shadows-dark: mix(#000, $lighthouse-shadows, 20%);
.element {
color: $lighthouse-shadows;
box-shadow: 0 0 0 2px rgba($lighthouse-shadows, 0.35);
}