Named color · #D4CA8E
Royal Goblet
Royal Goblet is #D4CA8E: rgb(212 202 142), hsl(51 45% 69%), oklch(0.833 0.079 99.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Royal Goblet color name →
#D4CA8E
oklch(0.833 0.079 99.8)
Color conversions
- HEX
- #d4ca8e
- RGB
- rgb(212 202 142)
- HSL
- hsl(51 45% 69%)
- HWB
- hwb(51 56% 17%)
- OKLCH
- oklch(0.833 0.079 99.8)
- OKLab
- oklab(0.833 -0.014 0.078)
- CIE Lab
- lab(81.09 -3 31.35)
- LCH
- lch(81.09 31.5 95.5)
- CMYK
- cmyk(0% 5% 33% 17%)
Tints · Shades · Tones
Tints
- D8CF9A
- DCD5A5
- E1DAB0
- E5DFBC
- E9E5C7
- EDEAD2
- F2EFDD
- F6F4E9
- FBFAF4
Shades
- B8AF7B
- 9D9568
- 837C56
- 696444
- 514D34
- 3A3724
- 242215
- 100F07
- 020201
Tones
- CBC28D
- C3BB8C
- BAB38B
- B1AC8A
- A9A488
- A19D87
- 989685
- 908E84
- 888782
Color harmonies
Complementary +180°
- D4CA8E
Royal Goblet
- BDC3FC
≈ Light Periwinkle
Analogous -30° +30°
- D4CA8E
Royal Goblet
- EAC090
≈ Homeward Bound
- B8D39D
≈ In Good Taste
Triadic +120° +240°
- D4CA8E
Royal Goblet
- 8CD5EC
≈ Slightly Spritzig
- ECB5D9
≈ Soft Cashmere
Split-complementary +150° +210°
- D4CA8E
Royal Goblet
- A1CDFA
≈ Baby Blue
- D8BBEF
≈ Beefy Pink
Tetradic +90° +180° +270°
- D4CA8E
Royal Goblet
- 89D9D3
≈ Rainwater
- BDC3FC
≈ Light Periwinkle
- F7B3BD
≈ Powder Rose
Contrast & accessibility
Ag
FailOn white
WCAG 1.66:1 · APCA Lc 29
Ag
AAAOn black
WCAG 12.63:1 · APCA Lc 74
Best text color: #000000
WCAG 12.63:1 (AAA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--royal-goblet: #d4ca8e;
--royal-goblet-rgb: 212 202 142;
--royal-goblet-oklch: oklch(0.833 0.079 99.8);
}
.element {
color: var(--royal-goblet);
background-color: hsl(51 45% 69%);
border-color: oklch(0.833 0.079 99.8);
}Tailwind CSS v4
@theme {
--color-royal-goblet: #d4ca8e;
--color-royal-goblet-50: #f9f6dd;
--color-royal-goblet-100: #ede9cc;
--color-royal-goblet-200: #dbd6b0;
--color-royal-goblet-300: #bfb98b;
--color-royal-goblet-400: #a9a069;
--color-royal-goblet-500: #928746;
--color-royal-goblet-600: #7c733d;
--color-royal-goblet-700: #635c30;
--color-royal-goblet-800: #4a4321;
--color-royal-goblet-900: #332e16;
--color-royal-goblet-950: #1f1b07;
}SCSS
$royal-goblet: #d4ca8e;
$royal-goblet-rgb: 212, 202, 142;
$royal-goblet-light: mix(#fff, $royal-goblet, 20%);
$royal-goblet-dark: mix(#000, $royal-goblet, 20%);
.element {
color: $royal-goblet;
box-shadow: 0 0 0 2px rgba($royal-goblet, 0.35);
}