Cor nomeada · #BCCBC4
Soothing Spring
Soothing Spring é #BCCBC4: rgb(188 203 196), hsl(152 13% 77%), oklch(0.829 0.019 166.3). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Soothing Spring color name →
#BCCBC4
oklch(0.829 0.019 166.3)
Conversões de cor
- HEX
- #bccbc4
- RGB
- rgb(188 203 196)
- HSL
- hsl(152 13% 77%)
- HWB
- hwb(152 74% 20%)
- OKLCH
- oklch(0.829 0.019 166.3)
- OKLab
- oklab(0.829 -0.018 0.005)
- CIE Lab
- lab(80.37 -6.28 1.66)
- LCH
- lch(80.37 6.5 165.2)
- CMYK
- cmyk(7% 0% 3% 20%)
Tons claros · Sombras · Tons
Tons claros
- C3D0CA
- C9D5D0
- D0DAD5
- D6E0DB
- DDE5E1
- E4EAE7
- EBEFED
- F1F4F3
- F8FAF9
Sombras
- A3B0AA
- 8B9691
- 737D78
- 5D6561
- 474D4A
- 323735
- 1F2221
- 0D0F0E
- 020202
Tons
- B6C3BD
- B0BCB6
- AAB4AF
- A4ACA8
- 9EA5A1
- 989D9B
- 929694
- 8C8E8D
- 868787
Harmonias de cor
Complementar +180°
- BCCBC4
Soothing Spring
- D1C2C9
≈ Bassinet
Análoga -30° +30°
- BCCBC4
Soothing Spring
- C1CABE
≈ Willow Green
- B9CBCB
≈ Blue Shale
Tríade +120° +240°
- BCCBC4
Soothing Spring
- C5C5D3
≈ Kiri Mist
- D2C3BD
≈ Josephine
Complementar dividida +150° +210°
- BCCBC4
Soothing Spring
- CCC3CF
≈ Orchid Hush
- D3C2C2
≈ Wishy-Washy Brown
Tétrade +90° +180° +270°
- BCCBC4
Soothing Spring
- BFC8D3
≈ Northern Exposure
- D1C2C9
≈ Bassinet
- CEC5BA
≈ Zebra Finch
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.68:1 · APCA Lc 30
Ag
AAASobre preto
WCAG 12.47:1 · APCA Lc 73
Melhor cor de texto: #000000
WCAG 12.47:1 (AAA) · APCA Lc 73
Contrast pairs
Trechos de código
CSS
:root {
--soothing-spring: #bccbc4;
--soothing-spring-rgb: 188 203 196;
--soothing-spring-oklch: oklch(0.829 0.019 166.3);
}
.element {
color: var(--soothing-spring);
background-color: hsl(152 13% 77%);
border-color: oklch(0.829 0.019 166.3);
}Tailwind CSS v4
@theme {
--color-soothing-spring: #bccbc4;
--color-soothing-spring-50: #f0f7f4;
--color-soothing-spring-100: #e2eae7;
--color-soothing-spring-200: #cdd7d3;
--color-soothing-spring-300: #afbbb5;
--color-soothing-spring-400: #94a29c;
--color-soothing-spring-500: #7b8a83;
--color-soothing-spring-600: #68756f;
--color-soothing-spring-700: #535e59;
--color-soothing-spring-800: #3d4541;
--color-soothing-spring-900: #2a2f2c;
--color-soothing-spring-950: #171c1a;
}SCSS
$soothing-spring: #bccbc4;
$soothing-spring-rgb: 188, 203, 196;
$soothing-spring-light: mix(#fff, $soothing-spring, 20%);
$soothing-spring-dark: mix(#000, $soothing-spring, 20%);
.element {
color: $soothing-spring;
box-shadow: 0 0 0 2px rgba($soothing-spring, 0.35);
}