Named color · #E08771
Guava Jam
Guava Jam is #E08771: rgb(224 135 113), hsl(12 64% 66%), oklch(0.712 0.115 34.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Guava Jam color name →
#E08771
oklch(0.712 0.115 34.7)
Color conversions
- HEX
- #e08771
- RGB
- rgb(224 135 113)
- HSL
- hsl(12 64% 66%)
- HWB
- hwb(12 44% 12%)
- OKLCH
- oklch(0.712 0.115 34.7)
- OKLab
- oklab(0.712 0.094 0.065)
- CIE Lab
- lab(65.71 33.3 27.13)
- LCH
- lch(65.71 42.95 39.2)
- CMYK
- cmyk(0% 40% 50% 12%)
Tints · Shades · Tones
Tints
- E4937F
- E89F8D
- ECAB9B
- EFB7A9
- F3C3B7
- F6CFC5
- F8DBD3
- FBE7E2
- FDF3F0
Shades
- C37561
- A66352
- 8A5143
- 704135
- 563127
- 3E211A
- 27130E
- 120604
- 020101
Tones
- D78773
- CD8775
- C48677
- BB8678
- B1857A
- A8847B
- 9E837C
- 94827E
- 8A817F
Color harmonies
Complementary +180°
- E08771
Guava Jam
- 30B4CE
≈ Ocean Sigh
Analogous -30° +30°
- E08771
Guava Jam
- DE8399
≈ Rose Soiree
- D39250
≈ Salt Caramel
Triadic +120° +240°
- E08771
Guava Jam
- 62B782
≈ Green Garter
- 8D9CEA
≈ Cold Lips
Split-complementary +150° +210°
- E08771
Guava Jam
- 31B9AB
≈ Message Green
- 60A9E5
≈ Acapulco Dive
Tetradic +90° +180° +270°
- E08771
Guava Jam
- 92AF5C
≈ Asparagus Cream
- 30B4CE
≈ Ocean Sigh
- B390DC
≈ Pale Purple
Contrast & accessibility
Ag
FailOn white
WCAG 2.66:1 · APCA Lc 52
Ag
AAAOn black
WCAG 7.87:1 · APCA Lc 50
Best text color: #000000
WCAG 7.87:1 (AAA) · APCA Lc 50
Contrast pairs
Code snippets
CSS
:root {
--guava-jam: #e08771;
--guava-jam-rgb: 224 135 113;
--guava-jam-oklch: oklch(0.712 0.115 34.7);
}
.element {
color: var(--guava-jam);
background-color: hsl(12 64% 66%);
border-color: oklch(0.712 0.115 34.7);
}Tailwind CSS v4
@theme {
--color-guava-jam: #e08771;
--color-guava-jam-50: #ffebdf;
--color-guava-jam-100: #ffdbcd;
--color-guava-jam-200: #ffc4b2;
--color-guava-jam-300: #eba38e;
--color-guava-jam-400: #d98570;
--color-guava-jam-500: #c66750;
--color-guava-jam-600: #a75845;
--color-guava-jam-700: #864636;
--color-guava-jam-800: #643228;
--color-guava-jam-900: #46221b;
--color-guava-jam-950: #2d110b;
}SCSS
$guava-jam: #e08771;
$guava-jam-rgb: 224, 135, 113;
$guava-jam-light: mix(#fff, $guava-jam, 20%);
$guava-jam-dark: mix(#000, $guava-jam, 20%);
.element {
color: $guava-jam;
box-shadow: 0 0 0 2px rgba($guava-jam, 0.35);
}