Named color · #E2CD52
Citrus Spice
Citrus Spice is #E2CD52: rgb(226 205 82), hsl(51 71% 60%), oklch(0.843 0.143 99.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Citrus Spice color name →
#E2CD52
oklch(0.843 0.143 99.6)
Color conversions
- HEX
- #e2cd52
- RGB
- rgb(226 205 82)
- HSL
- hsl(51 71% 60%)
- HWB
- hwb(51 32% 11%)
- OKLCH
- oklch(0.843 0.143 99.6)
- OKLab
- oklab(0.843 -0.024 0.141)
- CIE Lab
- lab(82.49 -2.72 61.75)
- LCH
- lch(82.49 61.81 92.5)
- CMYK
- cmyk(0% 9% 64% 11%)
Tints · Shades · Tones
Tints
- E5D268
- E8D87C
- EADD8E
- EDE29F
- F0E7B0
- F3ECC0
- F6F1D0
- F9F6E0
- FCFAF0
Shades
- C4B246
- A8983B
- 8C7E2F
- 716625
- 574E1A
- 3E3811
- 272308
- 120F02
- 030200
Tones
- D8C55B
- CDBE62
- C3B668
- B9AE6E
- AFA672
- A69F76
- 9C9779
- 938F7C
- 89887E
Color harmonies
Complementary +180°
- E2CD52
Citrus Spice
- C0C7FF
≈ Light Periwinkle
Analogous -30° +30°
- E2CD52
Citrus Spice
- FFBD6E
≈ Cinnamon Buff
- ADDE76
≈ Melissa
Triadic +120° +240°
- E2CD52
Citrus Spice
- 68DDFF
≈ Athena Blue
- FFADE4
≈ Fresh Gum
Split-complementary +150° +210°
- E2CD52
Citrus Spice
- A3D0FF
≈ Baby Blue
- E0B9FF
≈ Lavender Fragrance
Tetradic +90° +180° +270°
- E2CD52
Citrus Spice
- 1DE9DF
≈ Bright Turquoise
- C0C7FF
≈ Light Periwinkle
- FFB4BF
≈ Matt Pink
Contrast & accessibility
Ag
FailOn white
WCAG 1.60:1 · APCA Lc 27
Ag
AAAOn black
WCAG 13.08:1 · APCA Lc 76
Best text color: #000000
WCAG 13.08:1 (AAA) · APCA Lc 76
Contrast pairs
Code snippets
CSS
:root {
--citrus-spice: #e2cd52;
--citrus-spice-rgb: 226 205 82;
--citrus-spice-oklch: oklch(0.843 0.143 99.6);
}
.element {
color: var(--citrus-spice);
background-color: hsl(51 71% 60%);
border-color: oklch(0.843 0.143 99.6);
}Tailwind CSS v4
@theme {
--color-citrus-spice: #e2cd52;
--color-citrus-spice-50: #fdf7c8;
--color-citrus-spice-100: #f1eab3;
--color-citrus-spice-200: #e0d78f;
--color-citrus-spice-300: #c6ba5e;
--color-citrus-spice-400: #b39f23;
--color-citrus-spice-500: #9e8600;
--color-citrus-spice-600: #857100;
--color-citrus-spice-700: #6b5b00;
--color-citrus-spice-800: #504200;
--color-citrus-spice-900: #382d00;
--color-citrus-spice-950: #221a00;
}SCSS
$citrus-spice: #e2cd52;
$citrus-spice-rgb: 226, 205, 82;
$citrus-spice-light: mix(#fff, $citrus-spice, 20%);
$citrus-spice-dark: mix(#000, $citrus-spice, 20%);
.element {
color: $citrus-spice;
box-shadow: 0 0 0 2px rgba($citrus-spice, 0.35);
}