Named color · #787B54
Bonsai
Bonsai is #787B54: rgb(120 123 84), hsl(65 19% 41%), oklch(0.57 0.056 111.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Bonsai color name →
#787B54
oklch(0.57 0.056 111.8)
Color conversions
- HEX
- #787b54
- RGB
- rgb(120 123 84)
- HSL
- hsl(65 19% 41%)
- HWB
- hwb(65 33% 52%)
- OKLCH
- oklch(0.57 0.056 111.8)
- OKLab
- oklab(0.57 -0.021 0.052)
- CIE Lab
- lab(50.59 -6.18 21)
- LCH
- lch(50.59 21.89 106.4)
- CMYK
- cmyk(2% 0% 32% 52%)
Tints · Shades · Tones
Tints
- 858764
- 919474
- 9EA185
- ACAE96
- B9BBA7
- C7C8B8
- D4D6C9
- E2E3DB
- F1F1ED
Shades
- 676A48
- 575A3C
- 484A31
- 393A26
- 2A2C1B
- 1D1E11
- 101008
- 050502
- 010100
Tones
- 797C59
- 7A7C5D
- 7A7D62
- 7B7D66
- 7C7E6B
- 7D7E6F
- 7D7F73
- 7E7F78
- 7F807C
Color harmonies
Complementary +180°
- 787B54
Bonsai
- 787296
≈ Rhythm
Analogous -30° +30°
- 787B54
Bonsai
- 887451
≈ Pyrite Slate Green
- 658061
≈ Emerald City
Triadic +120° +240°
- 787B54
Bonsai
- 557E93
≈ Technical Blue
- 926A7B
≈ Copper Pink
Split-complementary +150° +210°
- 787B54
Bonsai
- 657899
≈ Chicory Flower
- 876D8C
≈ Mauveine
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 4.41:1 · APCA Lc 71
Ag
AAOn black
WCAG 4.75:1 · APCA Lc 31
Best text color: #000000
WCAG 4.75:1 (AA) · APCA Lc 31
Contrast pairs
Code snippets
CSS
:root {
--bonsai: #787b54;
--bonsai-rgb: 120 123 84;
--bonsai-oklch: oklch(0.57 0.056 111.8);
}
.element {
color: var(--bonsai);
background-color: hsl(65 19% 41%);
border-color: oklch(0.57 0.056 111.8);
}Tailwind CSS v4
@theme {
--color-bonsai: #787b54;
--color-bonsai-50: #f5f7e5;
--color-bonsai-100: #e7ead5;
--color-bonsai-200: #d3d7bc;
--color-bonsai-300: #b7bb9a;
--color-bonsai-400: #9fa27c;
--color-bonsai-500: #878a5e;
--color-bonsai-600: #727550;
--color-bonsai-700: #5b5e40;
--color-bonsai-800: #43442d;
--color-bonsai-900: #2f2f1f;
--color-bonsai-950: #1b1c0e;
}SCSS
$bonsai: #787b54;
$bonsai-rgb: 120, 123, 84;
$bonsai-light: mix(#fff, $bonsai, 20%);
$bonsai-dark: mix(#000, $bonsai, 20%);
.element {
color: $bonsai;
box-shadow: 0 0 0 2px rgba($bonsai, 0.35);
}