Named color · #F0C420
Moon Yellow
Moon Yellow is #F0C420: rgb(240 196 32), hsl(47 87% 53%), oklch(0.835 0.165 91.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Moon Yellow color name →
#F0C420
oklch(0.835 0.165 91.7)
Color conversions
- HEX
- #f0c420
- RGB
- rgb(240 196 32)
- HSL
- hsl(47 87% 53%)
- HWB
- hwb(47 13% 6%)
- OKLCH
- oklch(0.835 0.165 91.7)
- OKLab
- oklab(0.835 -0.005 0.165)
- CIE Lab
- lab(81.32 6.11 77.45)
- LCH
- lch(81.32 77.69 85.5)
- CMYK
- cmyk(0% 18% 87% 6%)
Tints · Shades · Tones
Tints
- F2CA4A
- F3D165
- F5D77C
- F6DD91
- F8E3A5
- F9E9B7
- FBEECA
- FCF4DC
- FEFAED
Shades
- D1AA1A
- B29115
- 95780F
- 78610A
- 5D4A06
- 433503
- 2A2101
- 140E00
- 030200
Tones
- E4BD3A
- D9B749
- CDB055
- C2A95F
- B7A266
- AB9C6D
- A09573
- 958E78
- 8B877C
Color harmonies
Complementary +180°
- F0C420
Moon Yellow
- B6C7FF
≈ Light Periwinkle
Analogous -30° +30°
- F0C420
Moon Yellow
- FFB879
≈ Macaroni and Cheese
- B8D951
≈ Badass Grass
Triadic +120° +240°
- F0C420
Moon Yellow
- 06E1FF
≈ Vaporwave Blue
- FFA5F3
≈ Pink Wink
Split-complementary +150° +210°
- F0C420
Moon Yellow
- 94D1FF
≈ Long Island Sound
- D4BAFF
≈ Pink Illusion
Tetradic +90° +180° +270°
- F0C420
Moon Yellow
- 00E8D0
≈ MoS₂ Cyan
- B6C7FF
≈ Light Periwinkle
- FFAEC4
≈ Baby’s Blanket
Contrast & accessibility
Ag
FailOn white
WCAG 1.66:1 · APCA Lc 29
Ag
AAAOn black
WCAG 12.62:1 · APCA Lc 74
Best text color: #000000
WCAG 12.62:1 (AAA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--moon-yellow: #f0c420;
--moon-yellow-rgb: 240 196 32;
--moon-yellow-oklch: oklch(0.835 0.165 91.7);
}
.element {
color: var(--moon-yellow);
background-color: hsl(47 87% 53%);
border-color: oklch(0.835 0.165 91.7);
}Tailwind CSS v4
@theme {
--color-moon-yellow: #f0c420;
--color-moon-yellow-50: #fff5c0;
--color-moon-yellow-100: #fae8a9;
--color-moon-yellow-200: #ecd380;
--color-moon-yellow-300: #d4b547;
--color-moon-yellow-400: #c29900;
--color-moon-yellow-500: #ae7e00;
--color-moon-yellow-600: #936b00;
--color-moon-yellow-700: #765600;
--color-moon-yellow-800: #593e00;
--color-moon-yellow-900: #3e2a00;
--color-moon-yellow-950: #271800;
}SCSS
$moon-yellow: #f0c420;
$moon-yellow-rgb: 240, 196, 32;
$moon-yellow-light: mix(#fff, $moon-yellow, 20%);
$moon-yellow-dark: mix(#000, $moon-yellow, 20%);
.element {
color: $moon-yellow;
box-shadow: 0 0 0 2px rgba($moon-yellow, 0.35);
}