Nazwany kolor · #9D7F62
Weaver’s Tool
Weaver’s Tool to #9D7F62: rgb(157 127 98), hsl(29 23% 50%), oklch(0.617 0.056 65.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Weaver’s Tool color name →
#9D7F62
oklch(0.617 0.056 65.5)
Konwersje koloru
- HEX
- #9d7f62
- RGB
- rgb(157 127 98)
- HSL
- hsl(29 23% 50%)
- HWB
- hwb(29 38% 38%)
- OKLCH
- oklch(0.617 0.056 65.5)
- OKLab
- oklab(0.617 0.023 0.051)
- CIE Lab
- lab(55.54 8.85 20.4)
- LCH
- lch(55.54 22.24 66.5)
- CMYK
- cmyk(0% 19% 38% 38%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- A78B71
- B09880
- BAA48F
- C4B19F
- CDBDAE
- D7CABE
- E1D7CE
- EBE4DE
- F5F2EE
Odcienie ciemniejsze
- 886E54
- 735D47
- 5F4C3A
- 4C3C2D
- 3A2D21
- 281F16
- 18110B
- 090603
- 010100
Tony
- 9A7F65
- 977F68
- 95806C
- 92806F
- 8F8072
- 8C8075
- 898078
- 86807A
- 83807D
Harmonie kolorów
Komplementarna +180°
- 9D7F62
Weaver’s Tool
- 6A89A5
≈ Sporty Blue
Analogowa -30° +30°
- 9D7F62
Weaver’s Tool
- A47A6F
≈ Burnished Brown
- 8F865F
≈ Owlet
Triada +120° +240°
- 9D7F62
Weaver’s Tool
- 5E918A
≈ Thermal Spring
- 8D7DA1
≈ Violet Chalk
Komplementarna rozszczepiona +150° +210°
- 9D7F62
Weaver’s Tool
- 5E8E9B
≈ Cabana Blue
- 7C83A7
≈ Romanesque
Tetrada +90° +180° +270°
- 9D7F62
Weaver’s Tool
- 6B9077
≈ Cool Bluegrass
- 6A89A5
≈ Sporty Blue
- 9B7993
≈ Valerian
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.71:1 · APCA Lc 65
Ag
AANa czerni
WCAG 5.64:1 · APCA Lc 37
Najlepszy kolor tekstu: #000000
WCAG 5.64:1 (AA) · APCA Lc 37
Contrast pairs
Fragmenty kodu
CSS
:root {
--weaver-s-tool: #9d7f62;
--weaver-s-tool-rgb: 157 127 98;
--weaver-s-tool-oklch: oklch(0.617 0.056 65.5);
}
.element {
color: var(--weaver-s-tool);
background-color: hsl(29 23% 50%);
border-color: oklch(0.617 0.056 65.5);
}Tailwind CSS v4
@theme {
--color-weaver-s-tool: #9d7f62;
--color-weaver-s-tool-50: #fff3e5;
--color-weaver-s-tool-100: #f5e5d5;
--color-weaver-s-tool-200: #e5d0bc;
--color-weaver-s-tool-300: #cbb39a;
--color-weaver-s-tool-400: #b6987c;
--color-weaver-s-tool-500: #a07f5f;
--color-weaver-s-tool-600: #876c51;
--color-weaver-s-tool-700: #6c5640;
--color-weaver-s-tool-800: #503e2e;
--color-weaver-s-tool-900: #382b1f;
--color-weaver-s-tool-950: #22180f;
}SCSS
$weaver-s-tool: #9d7f62;
$weaver-s-tool-rgb: 157, 127, 98;
$weaver-s-tool-light: mix(#fff, $weaver-s-tool, 20%);
$weaver-s-tool-dark: mix(#000, $weaver-s-tool, 20%);
.element {
color: $weaver-s-tool;
box-shadow: 0 0 0 2px rgba($weaver-s-tool, 0.35);
}