Nächste benannte Farbe · #78774E
#78774E
Nächste benannte Farbe: Tree Hugger
#78774E (rgb(120 119 78), hsl(59 21% 39%), oklch(0.56 0.059 107)) liegt am nächsten an der benannten Farbe Tree Hugger. Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
#78774E
oklch(0.56 0.059 107)
Farbumrechnungen
- HEX
- #78774e
- RGB
- rgb(120 119 78)
- HSL
- hsl(59 21% 39%)
- HWB
- hwb(59 31% 53%)
- OKLCH
- oklch(0.56 0.059 107)
- OKLab
- oklab(0.56 -0.017 0.056)
- CIE Lab
- lab(49.33 -4.67 22.75)
- LCH
- lch(49.33 23.22 101.6)
- CMYK
- cmyk(0% 1% 35% 53%)
Tints · Shades · Tones
Tints
- 85845F
- 919170
- 9E9E81
- ACAB92
- B9B9A4
- C7C7B5
- D4D5C7
- E2E3DA
- F1F1EC
Shades
- 676743
- 575738
- 48472D
- 393823
- 2A2A19
- 1D1C0F
- 101007
- 050502
- 010100
Tones
- 797853
- 7A7959
- 7A7A5E
- 7B7B63
- 7C7C68
- 7D7D6D
- 7D7D72
- 7E7E76
- 7F7F7B
Farbharmonien
Komplementär +180°
- 78774E
Tree Hugger
- 726F96
≈ Silk Crepe Mauve
Analog -30° +30°
- 78774E
Tree Hugger
- 88704D
≈ Golden Freesia
- 647D5A
≈ Silver Willow Green
Triadisch +120° +240°
- 78774E
Tree Hugger
- 4E7C8F
≈ Coelin Blue
- 8F667B
≈ Sweet Violet
Geteilt komplementär +150° +210°
- 78774E
Tree Hugger
- 5E7697
≈ Rushing River
- 836A8C
≈ Beauty
Tetradisch +90° +180° +270°
- 78774E
Tree Hugger
- 487F80
≈ Paradiso
- 726F96
≈ Silk Crepe Mauve
- 946668
≈ Roseland
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 4.61:1 · APCA Lc 72
Ag
AAAuf Schwarz
WCAG 4.54:1 · APCA Lc 30
Beste Textfarbe: #FFFFFF
WCAG 4.61:1 (AA) · APCA Lc 72
Contrast pairs
Code-Snippets
CSS
:root {
--tree-hugger: #78774e;
--tree-hugger-rgb: 120 119 78;
--tree-hugger-oklch: oklch(0.56 0.059 107);
}
.element {
color: var(--tree-hugger);
background-color: hsl(59 21% 39%);
border-color: oklch(0.56 0.059 107);
}Tailwind CSS v4
@theme {
--color-tree-hugger: #78774e;
--color-tree-hugger-50: #f6f7e4;
--color-tree-hugger-100: #e9ead4;
--color-tree-hugger-200: #d6d7ba;
--color-tree-hugger-300: #b9ba98;
--color-tree-hugger-400: #a2a179;
--color-tree-hugger-500: #8a895b;
--color-tree-hugger-600: #75744d;
--color-tree-hugger-700: #5e5d3e;
--color-tree-hugger-800: #45442c;
--color-tree-hugger-900: #302f1d;
--color-tree-hugger-950: #1c1b0d;
}SCSS
$tree-hugger: #78774e;
$tree-hugger-rgb: 120, 119, 78;
$tree-hugger-light: mix(#fff, $tree-hugger, 20%);
$tree-hugger-dark: mix(#000, $tree-hugger, 20%);
.element {
color: $tree-hugger;
box-shadow: 0 0 0 2px rgba($tree-hugger, 0.35);
}