Named color · #FCDF39
Fluffy Duckling
Fluffy Duckling is #FCDF39: rgb(252 223 57), hsl(51 97% 61%), oklch(0.901 0.172 98.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Fluffy Duckling color name →
#FCDF39
oklch(0.901 0.172 98.7)
Color conversions
- HEX
- #fcdf39
- RGB
- rgb(252 223 57)
- HSL
- hsl(51 97% 61%)
- HWB
- hwb(51 22% 1%)
- OKLCH
- oklch(0.901 0.172 98.7)
- OKLab
- oklab(0.901 -0.026 0.17)
- CIE Lab
- lab(89.3 -1.43 78.04)
- LCH
- lch(89.3 78.05 91.1)
- CMYK
- cmyk(0% 12% 77% 1%)
Tints · Shades · Tones
Tints
- FCE35A
- FCE673
- FDEA88
- FDED9B
- FDF0AD
- FDF3BE
- FEF7CF
- FEF9DF
- FFFCEF
Shades
- DBC230
- BBA528
- 9C8A1F
- 7E6F17
- 625610
- 473D09
- 2D2704
- 161201
- 030200
Tones
- EFD54A
- E2CC57
- D5C260
- C8B968
- BCAF6E
- AFA673
- A39C78
- 97937B
- 8C897E
Color harmonies
Complementary +180°
- FCDF39
Fluffy Duckling
- D7DCFF
≈ Transparent Blue
Analogous -30° +30°
- FCDF39
Fluffy Duckling
- FFD6AB
≈ Nevada Morning
- BCF470
≈ Green Cow
Triadic +120° +240°
- FCDF39
Fluffy Duckling
- A8EBFF
≈ Beyond the Clouds
- FFCDEE
≈ Infra-White
Split-complementary +150° +210°
- FCDF39
Fluffy Duckling
- C6E2FF
≈ Fresh Water
- EAD4FF
≈ Rose Dragée
Tetradic +90° +180° +270°
- FCDF39
Fluffy Duckling
- 02FFF3
≈ Turquoise Blue
- D7DCFF
≈ Transparent Blue
- FFD1D7
≈ Love Fumes
Contrast & accessibility
Ag
FailOn white
WCAG 1.33:1 · APCA Lc 16
Ag
AAAOn black
WCAG 15.75:1 · APCA Lc 87
Best text color: #000000
WCAG 15.75:1 (AAA) · APCA Lc 87
Contrast pairs
Code snippets
CSS
:root {
--fluffy-duckling: #fcdf39;
--fluffy-duckling-rgb: 252 223 57;
--fluffy-duckling-oklch: oklch(0.901 0.172 98.7);
}
.element {
color: var(--fluffy-duckling);
background-color: hsl(51 97% 61%);
border-color: oklch(0.901 0.172 98.7);
}Tailwind CSS v4
@theme {
--color-fluffy-duckling: #fcdf39;
--color-fluffy-duckling-50: #fff7be;
--color-fluffy-duckling-100: #f4eaa7;
--color-fluffy-duckling-200: #e4d77d;
--color-fluffy-duckling-300: #cbb942;
--color-fluffy-duckling-400: #b99e00;
--color-fluffy-duckling-500: #a48400;
--color-fluffy-duckling-600: #8b7000;
--color-fluffy-duckling-700: #6f5900;
--color-fluffy-duckling-800: #544000;
--color-fluffy-duckling-900: #3a2c00;
--color-fluffy-duckling-950: #251900;
}SCSS
$fluffy-duckling: #fcdf39;
$fluffy-duckling-rgb: 252, 223, 57;
$fluffy-duckling-light: mix(#fff, $fluffy-duckling, 20%);
$fluffy-duckling-dark: mix(#000, $fluffy-duckling, 20%);
.element {
color: $fluffy-duckling;
box-shadow: 0 0 0 2px rgba($fluffy-duckling, 0.35);
}