Named color · #D1B871
Sweet Mustard
Sweet Mustard is #D1B871: rgb(209 184 113), hsl(44 51% 63%), oklch(0.788 0.095 90.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Sweet Mustard color name →
#D1B871
oklch(0.788 0.095 90.7)
Color conversions
- HEX
- #d1b871
- RGB
- rgb(209 184 113)
- HSL
- hsl(44 51% 63%)
- HWB
- hwb(44 44% 18%)
- OKLCH
- oklch(0.788 0.095 90.7)
- OKLab
- oklab(0.788 -0.001 0.095)
- CIE Lab
- lab(75.79 2.33 39.37)
- LCH
- lch(75.79 39.44 86.6)
- CMYK
- cmyk(0% 12% 46% 18%)
Tints · Shades · Tones
Tints
- D6BF80
- DAC68F
- DFCD9D
- E3D4AB
- E8DCB9
- ECE3C7
- F1EAD5
- F6F1E3
- FAF8F1
Shades
- B5A061
- 9B8852
- 817143
- 685B35
- 504527
- 39311A
- 231E0E
- 100C04
- 020201
Tones
- C9B274
- C0AD76
- B8A778
- B0A27A
- A89C7B
- A0967D
- 98917E
- 908B7F
- 88867F
Color harmonies
Complementary +180°
- D1B871
Sweet Mustard
- A3B7F8
≈ Wondrous Wisteria
Analogous -30° +30°
- D1B871
Sweet Mustard
- E7AC7B
≈ Melting Sunset
- B1C47E
≈ Gnome Green
Triadic +120° +240°
- D1B871
Sweet Mustard
- 69CBDC
≈ Betsy
- DEA4D7
≈ Exotic Violet
Split-complementary +150° +210°
- D1B871
Sweet Mustard
- 81C2F1
≈ Wasurenagusa Blue
- C4ACEE
≈ Purple Sand
Tetradic +90° +180° +270°
- D1B871
Sweet Mustard
- 6ECEBD
≈ Dip in the Pool
- A3B7F8
≈ Wondrous Wisteria
- EDA0B7
≈ Emperor’s Children
Contrast & accessibility
Ag
FailOn white
WCAG 1.94:1 · APCA Lc 37
Ag
AAAOn black
WCAG 10.80:1 · APCA Lc 65
Best text color: #000000
WCAG 10.80:1 (AAA) · APCA Lc 65
Contrast pairs
Code snippets
CSS
:root {
--sweet-mustard: #d1b871;
--sweet-mustard-rgb: 209 184 113;
--sweet-mustard-oklch: oklch(0.788 0.095 90.7);
}
.element {
color: var(--sweet-mustard);
background-color: hsl(44 51% 63%);
border-color: oklch(0.788 0.095 90.7);
}Tailwind CSS v4
@theme {
--color-sweet-mustard: #d1b871;
--color-sweet-mustard-50: #fef5d7;
--color-sweet-mustard-100: #f3e8c5;
--color-sweet-mustard-200: #e2d4a6;
--color-sweet-mustard-300: #c8b77f;
--color-sweet-mustard-400: #b49c5a;
--color-sweet-mustard-500: #9e8332;
--color-sweet-mustard-600: #856f2c;
--color-sweet-mustard-700: #6b5923;
--color-sweet-mustard-800: #504017;
--color-sweet-mustard-900: #372c0f;
--color-sweet-mustard-950: #221903;
}SCSS
$sweet-mustard: #d1b871;
$sweet-mustard-rgb: 209, 184, 113;
$sweet-mustard-light: mix(#fff, $sweet-mustard, 20%);
$sweet-mustard-dark: mix(#000, $sweet-mustard, 20%);
.element {
color: $sweet-mustard;
box-shadow: 0 0 0 2px rgba($sweet-mustard, 0.35);
}