Nazwany kolor · #C8CAB5
Whispering Pine
Whispering Pine to #C8CAB5: rgb(200 202 181), hsl(66 17% 75%), oklch(0.832 0.029 111.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Whispering Pine color name →
#C8CAB5
oklch(0.832 0.029 111.4)
Konwersje koloru
- HEX
- #c8cab5
- RGB
- rgb(200 202 181)
- HSL
- hsl(66 17% 75%)
- HWB
- hwb(66 71% 21%)
- OKLCH
- oklch(0.832 0.029 111.4)
- OKLab
- oklab(0.832 -0.01 0.027)
- CIE Lab
- lab(80.73 -3.45 10.28)
- LCH
- lch(80.73 10.84 108.5)
- CMYK
- cmyk(1% 0% 10% 21%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- CDCFBC
- D3D4C4
- D8DACB
- DEDFD2
- E3E4DA
- E9EAE1
- EEEFE8
- F4F4F0
- F9FAF7
Odcienie ciemniejsze
- AEAF9D
- 949586
- 7B7C6F
- 636459
- 4C4D44
- 363730
- 21221D
- 0F0F0C
- 020202
Tony
- C1C2B0
- B9BBAA
- B2B3A5
- AAACA0
- A3A49A
- 9C9D95
- 959690
- 8E8E8A
- 878785
Harmonie kolorów
Komplementarna +180°
- C8CAB5
Whispering Pine
- C7C5DA
≈ Violet Sweet Pea
Analogowa -30° +30°
- C8CAB5
Whispering Pine
- D1C6B3
≈ Lover’s Hideaway
- BECDBC
≈ Jade Tinge
Triada +120° +240°
- C8CAB5
Whispering Pine
- B6CCD7
≈ Light Topaz Soft Blue
- D8C1CA
≈ Old Mission Pink
Komplementarna rozszczepiona +150° +210°
- C8CAB5
Whispering Pine
- BEC8DB
≈ Light Pearl Soft Blue
- D1C2D3
≈ Seedless Grape
Tetrada +90° +180° +270°
- C8CAB5
Whispering Pine
- B3CED0
≈ Turquoise Grey
- C7C5DA
≈ Violet Sweet Pea
- DAC1C0
≈ Peony Blush
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.67:1 · APCA Lc 29
Ag
AAANa czerni
WCAG 12.57:1 · APCA Lc 73
Najlepszy kolor tekstu: #000000
WCAG 12.57:1 (AAA) · APCA Lc 73
Contrast pairs
Fragmenty kodu
CSS
:root {
--whispering-pine: #c8cab5;
--whispering-pine-rgb: 200 202 181;
--whispering-pine-oklch: oklch(0.832 0.029 111.4);
}
.element {
color: var(--whispering-pine);
background-color: hsl(66 17% 75%);
border-color: oklch(0.832 0.029 111.4);
}Tailwind CSS v4
@theme {
--color-whispering-pine: #c8cab5;
--color-whispering-pine-50: #f5f6ed;
--color-whispering-pine-100: #e7e9de;
--color-whispering-pine-200: #d4d6c8;
--color-whispering-pine-300: #b7b9a9;
--color-whispering-pine-400: #9fa08d;
--color-whispering-pine-500: #868873;
--color-whispering-pine-600: #727361;
--color-whispering-pine-700: #5b5c4e;
--color-whispering-pine-800: #434338;
--color-whispering-pine-900: #2e2f26;
--color-whispering-pine-950: #1b1b15;
}SCSS
$whispering-pine: #c8cab5;
$whispering-pine-rgb: 200, 202, 181;
$whispering-pine-light: mix(#fff, $whispering-pine, 20%);
$whispering-pine-dark: mix(#000, $whispering-pine, 20%);
.element {
color: $whispering-pine;
box-shadow: 0 0 0 2px rgba($whispering-pine, 0.35);
}