Named color · #DDDD88
Garlic Toast
Garlic Toast is #DDDD88: rgb(221 221 136), hsl(60 56% 70%), oklch(0.879 0.107 108.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Garlic Toast color name →
#DDDD88
oklch(0.879 0.107 108.4)
Color conversions
- HEX
- #dddd88
- RGB
- rgb(221 221 136)
- HSL
- hsl(60 56% 70%)
- HWB
- hwb(60 53% 13%)
- OKLCH
- oklch(0.879 0.107 108.4)
- OKLab
- oklab(0.879 -0.034 0.102)
- CIE Lab
- lab(86.71 -9.08 41.67)
- LCH
- lch(86.71 42.65 102.3)
- CMYK
- cmyk(0% 0% 38% 13%)
Tints · Shades · Tones
Tints
- E0E195
- E4E4A1
- E7E8AE
- EAEBBA
- EEEEC5
- F1F2D1
- F4F5DD
- F8F8E8
- FBFCF4
Shades
- C0C075
- A4A463
- 888852
- 6E6E41
- 555531
- 3D3D22
- 262613
- 111106
- 020201
Tones
- D3D388
- CACA88
- C0C088
- B6B787
- ADAE87
- A4A486
- 9B9B85
- 929283
- 898982
Color harmonies
Complementary +180°
- DDDD88
Garlic Toast
- D5D1FF
≈ Pale Lavender
Analogous -30° +30°
- DDDD88
Garlic Toast
- FECF84
≈ Equatorial
- B4E8A3
≈ Pastel Pea
Triadic +120° +240°
- DDDD88
Garlic Toast
- A2E2FF
≈ Ganon Blue
- FFC3E0
≈ Sweet Romance
Split-complementary +150° +210°
- DDDD88
Garlic Toast
- C0D9FF
≈ Broad Daylight
- F2C4FF
≈ Light Lavender
Tetradic +90° +180° +270°
- DDDD88
Garlic Toast
- 76EDF1
≈ Dead Sea
- D5D1FF
≈ Pale Lavender
- FFC7C7
≈ Cinderella Pink
Contrast & accessibility
Ag
FailOn white
WCAG 1.42:1 · APCA Lc 20
Ag
AAAOn black
WCAG 14.77:1 · APCA Lc 83
Best text color: #000000
WCAG 14.77:1 (AAA) · APCA Lc 83
Contrast pairs
Code snippets
CSS
:root {
--garlic-toast: #dddd88;
--garlic-toast-rgb: 221 221 136;
--garlic-toast-oklch: oklch(0.879 0.107 108.4);
}
.element {
color: var(--garlic-toast);
background-color: hsl(60 56% 70%);
border-color: oklch(0.879 0.107 108.4);
}Tailwind CSS v4
@theme {
--color-garlic-toast: #dddd88;
--color-garlic-toast-50: #f6f9d6;
--color-garlic-toast-100: #e9ecc3;
--color-garlic-toast-200: #d6d9a4;
--color-garlic-toast-300: #babd7c;
--color-garlic-toast-400: #a4a355;
--color-garlic-toast-500: #8d8b28;
--color-garlic-toast-600: #777624;
--color-garlic-toast-700: #5f5e1d;
--color-garlic-toast-800: #474412;
--color-garlic-toast-900: #312f0b;
--color-garlic-toast-950: #1d1c01;
}SCSS
$garlic-toast: #dddd88;
$garlic-toast-rgb: 221, 221, 136;
$garlic-toast-light: mix(#fff, $garlic-toast, 20%);
$garlic-toast-dark: mix(#000, $garlic-toast, 20%);
.element {
color: $garlic-toast;
box-shadow: 0 0 0 2px rgba($garlic-toast, 0.35);
}