Nazwany kolor · #89A0B0
Qiān Hūi Grey
Qiān Hūi Grey to #89A0B0: rgb(137 160 176), hsl(205 20% 61%), oklch(0.693 0.035 238.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Qiān Hūi Grey color name →
#89A0B0
oklch(0.693 0.035 238.4)
Konwersje koloru
- HEX
- #89a0b0
- RGB
- rgb(137 160 176)
- HSL
- hsl(205 20% 61%)
- HWB
- hwb(205 54% 31%)
- OKLCH
- oklch(0.693 0.035 238.4)
- OKLab
- oklab(0.693 -0.018 -0.03)
- CIE Lab
- lab(64.48 -5.64 -11.17)
- LCH
- lch(64.48 12.52 243.2)
- CMYK
- cmyk(22% 9% 0% 31%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 94A9B8
- A0B2BF
- ABBCC7
- B7C5CF
- C3CFD7
- CFD8DF
- DBE2E7
- E7EBEF
- F3F5F7
Odcienie ciemniejsze
- 768B99
- 647682
- 53616C
- 424E56
- 313B42
- 22292E
- 14191C
- 07090B
- 010101
Tony
- 889DAB
- 879AA6
- 8796A1
- 86939D
- 859098
- 848D93
- 838A8E
- 828689
- 818385
Harmonie kolorów
Komplementarna +180°
- 89A0B0
Qiān Hūi Grey
- AE9887
≈ Quicksand
Analogowa -30° +30°
- 89A0B0
Qiān Hūi Grey
- 84A3A8
≈ Tourmaline
- 939CB3
≈ Skyline
Triada +120° +240°
- 89A0B0
Qiān Hūi Grey
- B0949C
≈ Legendary Lilac
- 9AA088
≈ Flagstone Quartzite
Komplementarna rozszczepiona +150° +210°
- 89A0B0
Qiān Hūi Grey
- B19590
≈ Thatch
- A59C84
≈ Windmill Park
Tetrada +90° +180° +270°
- 89A0B0
Qiān Hūi Grey
- A995A7
≈ Windsor Haze
- AE9887
≈ Quicksand
- 8EA391
≈ Wintessa
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.72:1 · APCA Lc 53
Ag
AAANa czerni
WCAG 7.71:1 · APCA Lc 49
Najlepszy kolor tekstu: #000000
WCAG 7.71:1 (AAA) · APCA Lc 49
Contrast pairs
Fragmenty kodu
CSS
:root {
--qian-hui-grey: #89a0b0;
--qian-hui-grey-rgb: 137 160 176;
--qian-hui-grey-oklch: oklch(0.693 0.035 238.4);
}
.element {
color: var(--qian-hui-grey);
background-color: hsl(205 20% 61%);
border-color: oklch(0.693 0.035 238.4);
}Tailwind CSS v4
@theme {
--color-qian-hui-grey: #89a0b0;
--color-qian-hui-grey-50: #edf7fe;
--color-qian-hui-grey-100: #deeaf3;
--color-qian-hui-grey-200: #c8d7e2;
--color-qian-hui-grey-300: #a8bac8;
--color-qian-hui-grey-400: #8ca2b1;
--color-qian-hui-grey-500: #718a9b;
--color-qian-hui-grey-600: #607583;
--color-qian-hui-grey-700: #4d5d69;
--color-qian-hui-grey-800: #37444d;
--color-qian-hui-grey-900: #262f36;
--color-qian-hui-grey-950: #141c21;
}SCSS
$qian-hui-grey: #89a0b0;
$qian-hui-grey-rgb: 137, 160, 176;
$qian-hui-grey-light: mix(#fff, $qian-hui-grey, 20%);
$qian-hui-grey-dark: mix(#000, $qian-hui-grey, 20%);
.element {
color: $qian-hui-grey;
box-shadow: 0 0 0 2px rgba($qian-hui-grey, 0.35);
}