Nazwany kolor · #786D5E
Sleeping Giant
Sleeping Giant to #786D5E: rgb(120 109 94), hsl(35 12% 42%), oklch(0.541 0.026 75.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Sleeping Giant color name →
#786D5E
oklch(0.541 0.026 75.6)
Konwersje koloru
- HEX
- #786d5e
- RGB
- rgb(120 109 94)
- HSL
- hsl(35 12% 42%)
- HWB
- hwb(35 37% 53%)
- OKLCH
- oklch(0.541 0.026 75.6)
- OKLab
- oklab(0.541 0.007 0.026)
- CIE Lab
- lab(46.74 2.49 10.06)
- LCH
- lch(46.74 10.37 76.1)
- CMYK
- cmyk(0% 9% 22% 53%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 857B6D
- 92887C
- 9F968B
- ACA59B
- B9B3AB
- C7C2BB
- D5D1CC
- E3E0DD
- F1EFEE
Odcienie ciemniejsze
- 675E51
- 574F44
- 484137
- 39332B
- 2A261F
- 1D1914
- 100D0A
- 050403
- 010100
Tony
- 796F61
- 7A7165
- 7A7368
- 7B756C
- 7C776F
- 7D7872
- 7E7A76
- 7E7C79
- 7F7E7D
Harmonie kolorów
Komplementarna +180°
- 786D5E
Sleeping Giant
- 65707E
≈ Buoyant
Analogowa -30° +30°
- 786D5E
Sleeping Giant
- 7D6A62
≈ Antique Earth
- 71705E
≈ Sage Green Light
Triada +120° +240°
- 786D5E
Sleeping Giant
- 5D7474
≈ Paradise City
- 756A7A
≈ Purple Sage
Komplementarna rozszczepiona +150° +210°
- 786D5E
Sleeping Giant
- 5F727B
≈ Desert Night
- 6D6D7E
≈ Mountain Haze
Tetrada +90° +180° +270°
- 786D5E
Sleeping Giant
- 61746B
≈ Cameroon Green
- 65707E
≈ Buoyant
- 7B6972
≈ Mystical Trip
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.06:1 · APCA Lc 75
Ag
FailNa czerni
WCAG 4.14:1 · APCA Lc 27
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.06:1 (AA) · APCA Lc 75
Contrast pairs
Fragmenty kodu
CSS
:root {
--sleeping-giant: #786d5e;
--sleeping-giant-rgb: 120 109 94;
--sleeping-giant-oklch: oklch(0.541 0.026 75.6);
}
.element {
color: var(--sleeping-giant);
background-color: hsl(35 12% 42%);
border-color: oklch(0.541 0.026 75.6);
}Tailwind CSS v4
@theme {
--color-sleeping-giant: #786d5e;
--color-sleeping-giant-50: #f9f4ed;
--color-sleeping-giant-100: #ede7de;
--color-sleeping-giant-200: #dbd3c8;
--color-sleeping-giant-300: #bfb6a9;
--color-sleeping-giant-400: #a89d8d;
--color-sleeping-giant-500: #918473;
--color-sleeping-giant-600: #7a7062;
--color-sleeping-giant-700: #62594e;
--color-sleeping-giant-800: #484138;
--color-sleeping-giant-900: #322d27;
--color-sleeping-giant-950: #1e1a15;
}SCSS
$sleeping-giant: #786d5e;
$sleeping-giant-rgb: 120, 109, 94;
$sleeping-giant-light: mix(#fff, $sleeping-giant, 20%);
$sleeping-giant-dark: mix(#000, $sleeping-giant, 20%);
.element {
color: $sleeping-giant;
box-shadow: 0 0 0 2px rgba($sleeping-giant, 0.35);
}