Named color · #D6CA3D
Wattle
Wattle is #D6CA3D: rgb(214 202 61), hsl(55 65% 54%), oklch(0.825 0.155 104.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Wattle color name →
#D6CA3D
oklch(0.825 0.155 104.4)
Color conversions
- HEX
- #d6ca3d
- RGB
- rgb(214 202 61)
- HSL
- hsl(55 65% 54%)
- HWB
- hwb(55 24% 16%)
- OKLCH
- oklch(0.825 0.155 104.4)
- OKLab
- oklab(0.825 -0.039 0.15)
- CIE Lab
- lab(80.51 -7.09 67.41)
- LCH
- lch(80.51 67.78 96)
- CMYK
- cmyk(0% 6% 71% 16%)
Tints · Shades · Tones
Tints
- DAD059
- DED570
- E2DB84
- E6E097
- EAE5A9
- EEEBBB
- F2F0CC
- F6F5DD
- FBFAEE
Shades
- BAAF34
- 9E952B
- 847C22
- 6A641A
- 524D12
- 3B370A
- 252204
- 100F01
- 020200
Tones
- CDC34B
- C4BB55
- BBB45E
- B2AC65
- AAA56B
- A19E71
- 999675
- 908F79
- 88877D
Color harmonies
Complementary +180°
- D6CA3D
Wattle
- BEBEFF
≈ Dried Lilac
Analogous -30° +30°
- D6CA3D
Wattle
- FFB542
≈ Corona
- 9ADB70
≈ Tropical Light
Triadic +120° +240°
- D6CA3D
Wattle
- 62D6FF
≈ Heisenberg Blue
- FFA4D9
≈ Corinthian Pink
Split-complementary +150° +210°
- D6CA3D
Wattle
- 9EC9FF
≈ Apocyan
- E4ACFF
≈ Mauve
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.69:1 · APCA Lc 30
Ag
AAAOn black
WCAG 12.37:1 · APCA Lc 73
Best text color: #000000
WCAG 12.37:1 (AAA) · APCA Lc 73
Contrast pairs
Code snippets
CSS
:root {
--wattle: #d6ca3d;
--wattle-rgb: 214 202 61;
--wattle-oklch: oklch(0.825 0.155 104.4);
}
.element {
color: var(--wattle);
background-color: hsl(55 65% 54%);
border-color: oklch(0.825 0.155 104.4);
}Tailwind CSS v4
@theme {
--color-wattle: #d6ca3d;
--color-wattle-50: #faf9c6;
--color-wattle-100: #eeecb0;
--color-wattle-200: #dcd98a;
--color-wattle-300: #c1bc57;
--color-wattle-400: #aea205;
--color-wattle-500: #988900;
--color-wattle-600: #807400;
--color-wattle-700: #675d00;
--color-wattle-800: #4d4300;
--color-wattle-900: #362e00;
--color-wattle-950: #211b00;
}SCSS
$wattle: #d6ca3d;
$wattle-rgb: 214, 202, 61;
$wattle-light: mix(#fff, $wattle, 20%);
$wattle-dark: mix(#000, $wattle, 20%);
.element {
color: $wattle;
box-shadow: 0 0 0 2px rgba($wattle, 0.35);
}