Named color · #D0D557
Citrus Delight
Citrus Delight is #D0D557: rgb(208 213 87), hsl(62 60% 59%), oklch(0.845 0.148 111.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Citrus Delight color name →
#D0D557
oklch(0.845 0.148 111.3)
Color conversions
- HEX
- #d0d557
- RGB
- rgb(208 213 87)
- HSL
- hsl(62 60% 59%)
- HWB
- hwb(62 34% 16%)
- OKLCH
- oklch(0.845 0.148 111.3)
- OKLab
- oklab(0.845 -0.054 0.138)
- CIE Lab
- lab(83.08 -13.68 59.73)
- LCH
- lch(83.08 61.27 102.9)
- CMYK
- cmyk(2% 0% 59% 16%)
Tints · Shades · Tones
Tints
- D4DA6C
- D9DE7F
- DDE291
- E2E7A2
- E7EBB2
- EBEFC2
- F0F3D1
- F5F7E1
- FAFBF0
Shades
- B5B94B
- 9A9E3E
- 808333
- 676A27
- 4F511C
- 393A12
- 232408
- 101003
- 020200
Tones
- C8CC5F
- BFC466
- B7BB6B
- AFB370
- A7AA74
- 9FA277
- 97997A
- 8F917C
- 87887E
Color harmonies
Complementary +180°
- D0D557
Citrus Delight
- CCC3FF
≈ Innocent Snowdrop
Analogous -30° +30°
- D0D557
Citrus Delight
- FDC14A
≈ Nârenji Orange
- 93E487
≈ Snarky Mint
Triadic +120° +240°
- D0D557
Citrus Delight
- 8AD8FF
≈ Tranquil Pool
- FFB1D4
≈ Pink Cattleya
Split-complementary +150° +210°
- D0D557
Citrus Delight
- B0CDFF
≈ Night Snow
- F3B0FF
≈ Strawberry Buttercream
Tetradic +90° +180° +270°
- D0D557
Citrus Delight
- 00E7F3
≈ Whimsical Blue
- CCC3FF
≈ Innocent Snowdrop
- FFB7B4
≈ Young Salmon
Contrast & accessibility
Ag
FailOn white
WCAG 1.57:1 · APCA Lc 26
Ag
AAAOn black
WCAG 13.33:1 · APCA Lc 77
Best text color: #000000
WCAG 13.33:1 (AAA) · APCA Lc 77
Contrast pairs
Code snippets
CSS
:root {
--citrus-delight: #d0d557;
--citrus-delight-rgb: 208 213 87;
--citrus-delight-oklch: oklch(0.845 0.148 111.3);
}
.element {
color: var(--citrus-delight);
background-color: hsl(62 60% 59%);
border-color: oklch(0.845 0.148 111.3);
}Tailwind CSS v4
@theme {
--color-citrus-delight: #d0d557;
--color-citrus-delight-50: #f5faca;
--color-citrus-delight-100: #e7eeb5;
--color-citrus-delight-200: #d4dc91;
--color-citrus-delight-300: #b7c062;
--color-citrus-delight-400: #a2a629;
--color-citrus-delight-500: #8b8e00;
--color-citrus-delight-600: #767800;
--color-citrus-delight-700: #5e6000;
--color-citrus-delight-800: #474600;
--color-citrus-delight-900: #313000;
--color-citrus-delight-950: #1d1c00;
}SCSS
$citrus-delight: #d0d557;
$citrus-delight-rgb: 208, 213, 87;
$citrus-delight-light: mix(#fff, $citrus-delight, 20%);
$citrus-delight-dark: mix(#000, $citrus-delight, 20%);
.element {
color: $citrus-delight;
box-shadow: 0 0 0 2px rgba($citrus-delight, 0.35);
}