Nazwany kolor · #9FBDAD
White Spruce
White Spruce to #9FBDAD: rgb(159 189 173), hsl(148 19% 68%), oklch(0.771 0.04 162.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Green mean? → · White Spruce color name →
#9FBDAD
oklch(0.771 0.04 162.1)
Konwersje koloru
- HEX
- #9fbdad
- RGB
- rgb(159 189 173)
- HSL
- hsl(148 19% 68%)
- HWB
- hwb(148 62% 26%)
- OKLCH
- oklch(0.771 0.04 162.1)
- OKLab
- oklab(0.771 -0.038 0.012)
- CIE Lab
- lab(74.02 -12.95 4.55)
- LCH
- lch(74.02 13.72 160.6)
- CMYK
- cmyk(16% 0% 8% 26%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- A8C3B5
- B2CABD
- BBD1C5
- C5D7CD
- CEDED5
- D8E4DE
- E2EBE6
- EBF2EE
- F5F8F7
Odcienie ciemniejsze
- 8AA496
- 758C7F
- 61746A
- 4D5D55
- 3B4741
- 29332D
- 181F1B
- 090D0B
- 010201
Tony
- 9CB7A8
- 99B1A4
- 96AA9F
- 93A49B
- 909E96
- 8D9892
- 89928D
- 868C89
- 838684
Harmonie kolorów
Komplementarna +180°
- 9FBDAD
White Spruce
- C7ABBC
≈ Desireé
Analogowa -30° +30°
- 9FBDAD
White Spruce
- ABBAA1
≈ Winter Squash
- 98BDBB
≈ Lap Pool Blue
Triada +120° +240°
- 9FBDAD
White Spruce
- B0B2CE
≈ Purple Freedom
- CCADA1
≈ Art Deco Pink
Komplementarna rozszczepiona +150° +210°
- 9FBDAD
White Spruce
- BDAEC7
≈ Fancy Pansy
- CDABAE
≈ Vista
Tetrada +90° +180° +270°
- 9FBDAD
White Spruce
- A3B7CE
≈ Misted Eve
- C7ABBC
≈ Desireé
- C5B19A
≈ Sandrock
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.02:1 · APCA Lc 39
Ag
AAANa czerni
WCAG 10.35:1 · APCA Lc 63
Najlepszy kolor tekstu: #000000
WCAG 10.35:1 (AAA) · APCA Lc 63
Contrast pairs
Fragmenty kodu
CSS
:root {
--white-spruce: #9fbdad;
--white-spruce-rgb: 159 189 173;
--white-spruce-oklch: oklch(0.771 0.04 162.1);
}
.element {
color: var(--white-spruce);
background-color: hsl(148 19% 68%);
border-color: oklch(0.771 0.04 162.1);
}Tailwind CSS v4
@theme {
--color-white-spruce: #9fbdad;
--color-white-spruce-50: #ebf9f2;
--color-white-spruce-100: #ddece4;
--color-white-spruce-200: #c6dad0;
--color-white-spruce-300: #a6beb2;
--color-white-spruce-400: #8aa697;
--color-white-spruce-500: #6f8f7e;
--color-white-spruce-600: #5e796b;
--color-white-spruce-700: #4b6155;
--color-white-spruce-800: #37473e;
--color-white-spruce-900: #25312a;
--color-white-spruce-950: #141d18;
}SCSS
$white-spruce: #9fbdad;
$white-spruce-rgb: 159, 189, 173;
$white-spruce-light: mix(#fff, $white-spruce, 20%);
$white-spruce-dark: mix(#000, $white-spruce, 20%);
.element {
color: $white-spruce;
box-shadow: 0 0 0 2px rgba($white-spruce, 0.35);
}