Named color · #BAC08A
Jitterbug
Jitterbug is #BAC08A: rgb(186 192 138), hsl(67 30% 65%), oklch(0.79 0.073 113.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Jitterbug color name →
#BAC08A
oklch(0.79 0.073 113.2)
Color conversions
- HEX
- #bac08a
- RGB
- rgb(186 192 138)
- HSL
- hsl(67 30% 65%)
- HWB
- hwb(67 54% 25%)
- OKLCH
- oklch(0.79 0.073 113.2)
- OKLab
- oklab(0.79 -0.029 0.067)
- CIE Lab
- lab(76.22 -8.69 26.59)
- LCH
- lch(76.22 27.97 108.1)
- CMYK
- cmyk(3% 0% 28% 25%)
Tints · Shades · Tones
Tints
- C1C696
- C7CDA1
- CED3AD
- D5D9B9
- DCDFC4
- E3E6D0
- EAECDC
- F1F2E7
- F8F9F3
Shades
- A1A777
- 898E65
- 727653
- 5C5F42
- 464932
- 323422
- 1E2014
- 0D0E07
- 020201
Tones
- B4B989
- AEB389
- A8AC88
- A2A687
- 9CA086
- 979985
- 919384
- 8B8D83
- 868681
Color harmonies
Complementary +180°
- BAC08A
Jitterbug
- BCB2E5
≈ Purple Sand
Analogous -30° +30°
- BAC08A
Jitterbug
- D1B785
≈ Clumsy Caramel
- 9FC79D
≈ Gingko
Triadic +120° +240°
- BAC08A
Jitterbug
- 8BC3E2
≈ Club Cruise
- E0A8BE
≈ Apple Infusion
Split-complementary +150° +210°
- BAC08A
Jitterbug
- A2BBEA
≈ Teclis Blue
- D2ABD6
≈ Plink
Tetradic +90° +180° +270°
- BAC08A
Jitterbug
- 81C9CF
≈ Aqua Belt
- BCB2E5
≈ Purple Sand
- E6A9A5
≈ Coral Fountain
Contrast & accessibility
Ag
FailOn white
WCAG 1.91:1 · APCA Lc 36
Ag
AAAOn black
WCAG 10.99:1 · APCA Lc 66
Best text color: #000000
WCAG 10.99:1 (AAA) · APCA Lc 66
Contrast pairs
Code snippets
CSS
:root {
--jitterbug: #bac08a;
--jitterbug-rgb: 186 192 138;
--jitterbug-oklch: oklch(0.79 0.073 113.2);
}
.element {
color: var(--jitterbug);
background-color: hsl(67 30% 65%);
border-color: oklch(0.79 0.073 113.2);
}Tailwind CSS v4
@theme {
--color-jitterbug: #bac08a;
--color-jitterbug-50: #f4f8e1;
--color-jitterbug-100: #e6ebd0;
--color-jitterbug-200: #d3d8b6;
--color-jitterbug-300: #b6bc92;
--color-jitterbug-400: #9ea371;
--color-jitterbug-500: #868c52;
--color-jitterbug-600: #717646;
--color-jitterbug-700: #5b5e37;
--color-jitterbug-800: #434527;
--color-jitterbug-900: #2e301a;
--color-jitterbug-950: #1b1c0a;
}SCSS
$jitterbug: #bac08a;
$jitterbug-rgb: 186, 192, 138;
$jitterbug-light: mix(#fff, $jitterbug, 20%);
$jitterbug-dark: mix(#000, $jitterbug, 20%);
.element {
color: $jitterbug;
box-shadow: 0 0 0 2px rgba($jitterbug, 0.35);
}