Couleur nommée · #B2C4BB
Hearth Frost
Hearth Frost correspond à #B2C4BB : rgb(178 196 187), hsl(150 13% 73%), oklch(0.804 0.023 164.4). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Gray mean? → · Hearth Frost color name →
#B2C4BB
oklch(0.804 0.023 164.4)
Conversions de couleur
- HEX
- #b2c4bb
- RGB
- rgb(178 196 187)
- HSL
- hsl(150 13% 73%)
- HWB
- hwb(150 70% 23%)
- OKLCH
- oklch(0.804 0.023 164.4)
- OKLab
- oklab(0.804 -0.022 0.006)
- CIE Lab
- lab(77.57 -7.67 2.32)
- LCH
- lch(77.57 8.01 163.1)
- CMYK
- cmyk(9% 0% 5% 23%)
Teintes · Ombres · Tons
Teintes
- BACAC2
- C1D0C8
- C9D5CF
- D0DBD6
- D8E1DD
- E0E7E3
- E7EDEA
- EFF3F1
- F7F9F8
Ombres
- 9AAAA2
- 83918A
- 6D7873
- 57615C
- 434A46
- 2F3532
- 1D211F
- 0C0E0D
- 010202
Tons
- ADBDB5
- A8B6AF
- A3AFA9
- 9EA8A3
- 99A19D
- 949B97
- 8F9491
- 8A8D8B
- 858786
Harmonies de couleurs
Complémentaire +180°
- B2C4BB
Hearth Frost
- CBB9C3
≈ Queen’s Violet
Analogue -30° +30°
- B2C4BB
Hearth Frost
- B9C3B4
≈ Belize Green
- AFC4C3
≈ Jungle Mist
Triadique +120° +240°
- B2C4BB
Hearth Frost
- BDBDCE
≈ A Stitch in Time
- CDBBB3
≈ Mothy
Complémentaire divisée +150° +210°
- B2C4BB
Hearth Frost
- C5BBCA
≈ Gentleman’s Suit
- CEB9BA
≈ Mediterranean Sunset
Tétradique +90° +180° +270°
- B2C4BB
Hearth Frost
- B5C0CE
≈ Mistral
- CBB9C3
≈ Queen’s Violet
- C8BDAF
≈ Creamy Mushroom
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.82:1 · APCA Lc 34
Ag
AAASur noir
WCAG 11.50:1 · APCA Lc 68
Meilleure couleur de texte: #000000
WCAG 11.50:1 (AAA) · APCA Lc 68
Contrast pairs
Extraits de code
CSS
:root {
--hearth-frost: #b2c4bb;
--hearth-frost-rgb: 178 196 187;
--hearth-frost-oklch: oklch(0.804 0.023 164.4);
}
.element {
color: var(--hearth-frost);
background-color: hsl(150 13% 73%);
border-color: oklch(0.804 0.023 164.4);
}Tailwind CSS v4
@theme {
--color-hearth-frost: #b2c4bb;
--color-hearth-frost-50: #eff7f4;
--color-hearth-frost-100: #e1eae6;
--color-hearth-frost-200: #cbd8d2;
--color-hearth-frost-300: #adbbb5;
--color-hearth-frost-400: #92a39b;
--color-hearth-frost-500: #798b82;
--color-hearth-frost-600: #66766e;
--color-hearth-frost-700: #525e58;
--color-hearth-frost-800: #3b4540;
--color-hearth-frost-900: #29302c;
--color-hearth-frost-950: #171c19;
}SCSS
$hearth-frost: #b2c4bb;
$hearth-frost-rgb: 178, 196, 187;
$hearth-frost-light: mix(#fff, $hearth-frost, 20%);
$hearth-frost-dark: mix(#000, $hearth-frost, 20%);
.element {
color: $hearth-frost;
box-shadow: 0 0 0 2px rgba($hearth-frost, 0.35);
}