Named color · #D4CB60
Quince
Quince is #D4CB60: rgb(212 203 96), hsl(55 57% 60%), oklch(0.828 0.129 104.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Quince color name →
#D4CB60
oklch(0.828 0.129 104.5)
Color conversions
- HEX
- #d4cb60
- RGB
- rgb(212 203 96)
- HSL
- hsl(55 57% 60%)
- HWB
- hwb(55 38% 17%)
- OKLCH
- oklch(0.828 0.129 104.5)
- OKLab
- oklab(0.828 -0.032 0.125)
- CIE Lab
- lab(80.83 -6.83 53.49)
- LCH
- lch(80.83 53.92 97.3)
- CMYK
- cmyk(0% 4% 55% 17%)
Tints · Shades · Tones
Tints
- D8D073
- DCD684
- E0DB95
- E5E0A5
- E9E6B4
- EDEBC3
- F2F0D2
- F6F5E1
- FAFAF0
Shades
- B8B052
- 9D9645
- 837D38
- 69652C
- 514D20
- 3A3715
- 24220A
- 100F03
- 020200
Tones
- CBC366
- C2BC6B
- BAB46F
- B1AD73
- A9A576
- A09E79
- 98967B
- 908F7D
- 88877F
Color harmonies
Complementary +180°
- D4CB60
Quince
- C0BFFF
≈ Dried Lilac
Analogous -30° +30°
- D4CB60
Quince
- F8BA5F
≈ Cochin Chicken
- A3D982
≈ Feijoa
Triadic +120° +240°
- D4CB60
Quince
- 66D7FF
≈ Heisenberg Blue
- FFA6DA
≈ Corinthian Pink
Split-complementary +150° +210°
- D4CB60
Quince
- A0CAFF
≈ Apocyan
- E5AEFF
≈ Mauve
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.67:1 · APCA Lc 30
Ag
AAAOn black
WCAG 12.51:1 · APCA Lc 73
Best text color: #000000
WCAG 12.51:1 (AAA) · APCA Lc 73
Contrast pairs
Code snippets
CSS
:root {
--quince: #d4cb60;
--quince-rgb: 212 203 96;
--quince-oklch: oklch(0.828 0.129 104.5);
}
.element {
color: var(--quince);
background-color: hsl(55 57% 60%);
border-color: oklch(0.828 0.129 104.5);
}Tailwind CSS v4
@theme {
--color-quince: #d4cb60;
--color-quince-50: #f9f8ce;
--color-quince-100: #edebba;
--color-quince-200: #dbd898;
--color-quince-300: #bfbc6b;
--color-quince-400: #aba23c;
--color-quince-500: #948900;
--color-quince-600: #7d7400;
--color-quince-700: #645d00;
--color-quince-800: #4b4300;
--color-quince-900: #342f00;
--color-quince-950: #201b00;
}SCSS
$quince: #d4cb60;
$quince-rgb: 212, 203, 96;
$quince-light: mix(#fff, $quince, 20%);
$quince-dark: mix(#000, $quince, 20%);
.element {
color: $quince;
box-shadow: 0 0 0 2px rgba($quince, 0.35);
}