Nazwany kolor · #9E8163
Hopsack
Hopsack to #9E8163: rgb(158 129 99), hsl(31 23% 50%), oklch(0.623 0.056 67.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Hopsack color name →
#9E8163
oklch(0.623 0.056 67.5)
Konwersje koloru
- HEX
- #9e8163
- RGB
- rgb(158 129 99)
- HSL
- hsl(31 23% 50%)
- HWB
- hwb(31 39% 38%)
- OKLCH
- oklch(0.623 0.056 67.5)
- OKLab
- oklab(0.623 0.021 0.051)
- CIE Lab
- lab(56.19 8.3 20.72)
- LCH
- lch(56.19 22.32 68.2)
- CMYK
- cmyk(0% 18% 37% 38%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- A88D72
- B19981
- BBA590
- C4B29F
- CEBEAF
- D8CBBF
- E1D8CE
- EBE5DE
- F5F2EF
Odcienie ciemniejsze
- 896F55
- 745E47
- 604E3A
- 4D3E2E
- 3A2E21
- 291F16
- 18120B
- 090603
- 010100
Tony
- 9B8166
- 988169
- 95816C
- 92816F
- 8F8172
- 8C8175
- 898178
- 86807B
- 83807D
Harmonie kolorów
Komplementarna +180°
- 9E8163
Hopsack
- 6C8BA7
≈ Scanda
Analogowa -30° +30°
- 9E8163
Hopsack
- A57C6F
≈ Fresh Cedar
- 908861
≈ Oregano Spice
Triada +120° +240°
- 9E8163
Hopsack
- 5F928D
≈ Pauley
- 907EA2
≈ Violet Chalk
Komplementarna rozszczepiona +150° +210°
- 9E8163
Hopsack
- 60909D
≈ Manitou Blue
- 7E84A9
≈ Enchanting Sky
Tetrada +90° +180° +270°
- 9E8163
Hopsack
- 6B927A
≈ Cool Bluegrass
- 6C8BA7
≈ Scanda
- 9E7A93
≈ Valerian
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.63:1 · APCA Lc 64
Ag
AANa czerni
WCAG 5.77:1 · APCA Lc 38
Najlepszy kolor tekstu: #000000
WCAG 5.77:1 (AA) · APCA Lc 38
Contrast pairs
Fragmenty kodu
CSS
:root {
--hopsack: #9e8163;
--hopsack-rgb: 158 129 99;
--hopsack-oklch: oklch(0.623 0.056 67.5);
}
.element {
color: var(--hopsack);
background-color: hsl(31 23% 50%);
border-color: oklch(0.623 0.056 67.5);
}Tailwind CSS v4
@theme {
--color-hopsack: #9e8163;
--color-hopsack-50: #fff3e5;
--color-hopsack-100: #f4e5d5;
--color-hopsack-200: #e4d1bb;
--color-hopsack-300: #cab399;
--color-hopsack-400: #b5997c;
--color-hopsack-500: #9f7f5e;
--color-hopsack-600: #876c50;
--color-hopsack-700: #6c5640;
--color-hopsack-800: #503f2e;
--color-hopsack-900: #382b1f;
--color-hopsack-950: #22180f;
}SCSS
$hopsack: #9e8163;
$hopsack-rgb: 158, 129, 99;
$hopsack-light: mix(#fff, $hopsack, 20%);
$hopsack-dark: mix(#000, $hopsack, 20%);
.element {
color: $hopsack;
box-shadow: 0 0 0 2px rgba($hopsack, 0.35);
}