Named color · #ECBF55
Luminous Apricot
Luminous Apricot is #ECBF55: rgb(236 191 85), hsl(42 80% 63%), oklch(0.825 0.133 86). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Luminous Apricot color name →
#ECBF55
oklch(0.825 0.133 86)
Color conversions
- HEX
- #ecbf55
- RGB
- rgb(236 191 85)
- HSL
- hsl(42 80% 63%)
- HWB
- hwb(42 33% 7%)
- OKLCH
- oklch(0.825 0.133 86)
- OKLab
- oklab(0.825 0.009 0.133)
- CIE Lab
- lab(79.93 8.42 58.18)
- LCH
- lch(79.93 58.79 81.8)
- CMYK
- cmyk(0% 19% 64% 7%)
Tints · Shades · Tones
Tints
- EEC66A
- F0CC7D
- F2D38F
- F4D9A0
- F6E0B0
- F8E6C0
- FAECD0
- FBF3E0
- FDF9EF
Shades
- CDA649
- AF8D3D
- 927531
- 765E26
- 5B481C
- 423311
- 291F08
- 130D02
- 030200
Tones
- E1B95D
- D6B363
- CBAC69
- C0A66E
- B5A072
- AA9976
- 9F9379
- 958D7C
- 8A867E
Color harmonies
Complementary +180°
- ECBF55
Luminous Apricot
- ABC5FF
≈ Night Snow
Analogous -30° +30°
- ECBF55
Luminous Apricot
- FFB27B
≈ Isn’t It Just Peachy
- C1D066
≈ Sonic Lime
Triadic +120° +240°
- ECBF55
Luminous Apricot
- 30DEF0
≈ Cold Heights
- F2A7F4
≈ Pinky Swear
Split-complementary +150° +210°
- ECBF55
Luminous Apricot
- 82D0FF
≈ Drift on the Sea
- CBB9FF
≈ Lavender Tonic
Tetradic +90° +180° +270°
- ECBF55
Luminous Apricot
- 4DE2C2
≈ Ocean in a Bowl
- ABC5FF
≈ Night Snow
- FFA8C8
≈ Taffy Pink
Contrast & accessibility
Ag
FailOn white
WCAG 1.72:1 · APCA Lc 31
Ag
AAAOn black
WCAG 12.15:1 · APCA Lc 72
Best text color: #000000
WCAG 12.15:1 (AAA) · APCA Lc 72
Contrast pairs
Code snippets
CSS
:root {
--luminous-apricot: #ecbf55;
--luminous-apricot-rgb: 236 191 85;
--luminous-apricot-oklch: oklch(0.825 0.133 86);
}
.element {
color: var(--luminous-apricot);
background-color: hsl(42 80% 63%);
border-color: oklch(0.825 0.133 86);
}Tailwind CSS v4
@theme {
--color-luminous-apricot: #ecbf55;
--color-luminous-apricot-50: #fff4ca;
--color-luminous-apricot-100: #fae6b6;
--color-luminous-apricot-200: #ecd292;
--color-luminous-apricot-300: #d4b463;
--color-luminous-apricot-400: #c19830;
--color-luminous-apricot-500: #ad7d00;
--color-luminous-apricot-600: #926a00;
--color-luminous-apricot-700: #755500;
--color-luminous-apricot-800: #583d00;
--color-luminous-apricot-900: #3d2a00;
--color-luminous-apricot-950: #271700;
}SCSS
$luminous-apricot: #ecbf55;
$luminous-apricot-rgb: 236, 191, 85;
$luminous-apricot-light: mix(#fff, $luminous-apricot, 20%);
$luminous-apricot-dark: mix(#000, $luminous-apricot, 20%);
.element {
color: $luminous-apricot;
box-shadow: 0 0 0 2px rgba($luminous-apricot, 0.35);
}