Named color · #FFF5CF
Stereotypical Duck
Stereotypical Duck is #FFF5CF: rgb(255 245 207), hsl(48 100% 91%), oklch(0.968 0.05 95). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Stereotypical Duck color name →
#FFF5CF
oklch(0.968 0.05 95)
Color conversions
- HEX
- #fff5cf
- RGB
- rgb(255 245 207)
- HSL
- hsl(48 100% 91%)
- HWB
- hwb(48 81% 0%)
- OKLCH
- oklch(0.968 0.05 95)
- OKLab
- oklab(0.968 -0.004 0.05)
- CIE Lab
- lab(96.61 -0.96 19.65)
- LCH
- lch(96.61 19.67 92.8)
- CMYK
- cmyk(0% 4% 19% 0%)
Tints · Shades · Tones
Tints
- FFF6D4
- FFF7D9
- FFF8DE
- FFF9E2
- FFFAE7
- FFFBEC
- FFFCF1
- FFFDF6
- FFFEFA
Shades
- DED5B4
- BEB699
- 9E987F
- 807B67
- 635F4F
- 484438
- 2E2B23
- 161510
- 030302
Tones
- F2E9C7
- E4DDBF
- D7D1B7
- CAC5AF
- BDB9A7
- B1AD9F
- A4A297
- 98968F
- 8C8B88
Color harmonies
Complementary +180°
- FFF5CF
Stereotypical Duck
- F1F4FF
≈ Boysenberry Shadow
Analogous -30° +30°
- FFF5CF
Stereotypical Duck
- FFF2E6
≈ Doeskin
- EDFBD7
≈ Pastoral
Triadic +120° +240°
- FFF5CF
Stereotypical Duck
- E3F9FF
≈ Clear Skies
- FFEFFB
≈ Partial Pink
Split-complementary +150° +210°
- FFF5CF
Stereotypical Duck
- ECF6FF
≈ Placebo Blue
- F7F2FF
≈ Cloud Break
Tetradic +90° +180° +270°
- FFF5CF
Stereotypical Duck
- D4FFF8
≈ Ice
- F1F4FF
≈ Boysenberry Shadow
- FFF0F3
≈ Powder Puff
Contrast & accessibility
Ag
FailOn white
WCAG 1.09:1 · APCA Lc 0
Ag
AAAOn black
WCAG 19.21:1 · APCA Lc 101
Best text color: #000000
WCAG 19.21:1 (AAA) · APCA Lc 101
Contrast pairs
Code snippets
CSS
:root {
--stereotypical-duck: #fff5cf;
--stereotypical-duck-rgb: 255 245 207;
--stereotypical-duck-oklch: oklch(0.968 0.05 95);
}
.element {
color: var(--stereotypical-duck);
background-color: hsl(48 100% 91%);
border-color: oklch(0.968 0.05 95);
}Tailwind CSS v4
@theme {
--color-stereotypical-duck: #fff5cf;
--color-stereotypical-duck-50: #f9f6e5;
--color-stereotypical-duck-100: #ece8d6;
--color-stereotypical-duck-200: #dad5bd;
--color-stereotypical-duck-300: #beb89b;
--color-stereotypical-duck-400: #a89f7d;
--color-stereotypical-duck-500: #908660;
--color-stereotypical-duck-600: #7a7251;
--color-stereotypical-duck-700: #625b41;
--color-stereotypical-duck-800: #48422e;
--color-stereotypical-duck-900: #322e1f;
--color-stereotypical-duck-950: #1e1a0f;
}SCSS
$stereotypical-duck: #fff5cf;
$stereotypical-duck-rgb: 255, 245, 207;
$stereotypical-duck-light: mix(#fff, $stereotypical-duck, 20%);
$stereotypical-duck-dark: mix(#000, $stereotypical-duck, 20%);
.element {
color: $stereotypical-duck;
box-shadow: 0 0 0 2px rgba($stereotypical-duck, 0.35);
}