Nazwany kolor · #BAD7AE
Bleached Spruce
Bleached Spruce to #BAD7AE: rgb(186 215 174), hsl(102 34% 76%), oklch(0.847 0.064 136.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Green mean? → · Bleached Spruce color name →
#BAD7AE
oklch(0.847 0.064 136.6)
Konwersje koloru
- HEX
- #bad7ae
- RGB
- rgb(186 215 174)
- HSL
- hsl(102 34% 76%)
- HWB
- hwb(102 68% 16%)
- OKLCH
- oklch(0.847 0.064 136.6)
- OKLab
- oklab(0.847 -0.046 0.044)
- CIE Lab
- lab(83.02 -15.61 16.95)
- LCH
- lch(83.02 23.05 132.6)
- CMYK
- cmyk(13% 0% 19% 16%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- C1DBB6
- C8DFBE
- CEE3C6
- D5E7CE
- DCEBD6
- E3EFDE
- EAF3E6
- F1F7EF
- F8FBF7
Odcienie ciemniejsze
- A1BB97
- 899F80
- 72856A
- 5C6B55
- 465241
- 323B2E
- 1E251C
- 0D110B
- 020201
Tony
- B4CEA9
- AEC5A5
- A8BCA0
- A3B39C
- 9DAB97
- 97A292
- 91998E
- 8B9189
- 868885
Harmonie kolorów
Komplementarna +180°
- BAD7AE
Bleached Spruce
- DEC1E9
≈ Glittering Gemstone
Analogowa -30° +30°
- BAD7AE
Bleached Spruce
- D1D0A0
≈ Calming Effect
- A5DBC4
≈ Shanghai Jade
Triada +120° +240°
- BAD7AE
Bleached Spruce
- B2CFF7
≈ Ice Cold Stare
- F4BDBE
≈ Petals Unfolding
Komplementarna rozszczepiona +150° +210°
- BAD7AE
Bleached Spruce
- C9C7F5
≈ Soap
- EDBDD5
≈ Sweet Taffy
Tetrada +90° +180° +270°
- BAD7AE
Bleached Spruce
- A1D6ED
≈ Soft Summer Rain
- DEC1E9
≈ Glittering Gemstone
- F1C1AA
≈ Cosmetic Peach
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.56:1 · APCA Lc 26
Ag
AAANa czerni
WCAG 13.41:1 · APCA Lc 77
Najlepszy kolor tekstu: #000000
WCAG 13.41:1 (AAA) · APCA Lc 77
Contrast pairs
Fragmenty kodu
CSS
:root {
--bleached-spruce: #bad7ae;
--bleached-spruce-rgb: 186 215 174;
--bleached-spruce-oklch: oklch(0.847 0.064 136.6);
}
.element {
color: var(--bleached-spruce);
background-color: hsl(102 34% 76%);
border-color: oklch(0.847 0.064 136.6);
}Tailwind CSS v4
@theme {
--color-bleached-spruce: #bad7ae;
--color-bleached-spruce-50: #ecfae8;
--color-bleached-spruce-100: #deedd9;
--color-bleached-spruce-200: #c7dbc1;
--color-bleached-spruce-300: #a8c0a0;
--color-bleached-spruce-400: #8da882;
--color-bleached-spruce-500: #739066;
--color-bleached-spruce-600: #617a57;
--color-bleached-spruce-700: #4e6245;
--color-bleached-spruce-800: #394731;
--color-bleached-spruce-900: #273121;
--color-bleached-spruce-950: #151d11;
}SCSS
$bleached-spruce: #bad7ae;
$bleached-spruce-rgb: 186, 215, 174;
$bleached-spruce-light: mix(#fff, $bleached-spruce, 20%);
$bleached-spruce-dark: mix(#000, $bleached-spruce, 20%);
.element {
color: $bleached-spruce;
box-shadow: 0 0 0 2px rgba($bleached-spruce, 0.35);
}