Nearest named color · #FDE68A
#FDE68A
Nearest named color: Quack Quack
#FDE68A (rgb(253 230 138), hsl(48 97% 77%), oklch(0.924 0.115 95.7)) is closest to the named color Quack Quack. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#FDE68A
oklch(0.924 0.115 95.7)
Color conversions
- HEX
- #fde68a
- RGB
- rgb(253 230 138)
- HSL
- hsl(48 97% 77%)
- HWB
- hwb(48 54% 1%)
- OKLCH
- oklch(0.924 0.115 95.7)
- OKLab
- oklab(0.924 -0.012 0.115)
- CIE Lab
- lab(91.74 -0.63 47.6)
- LCH
- lch(91.74 47.6 90.8)
- CMYK
- cmyk(0% 9% 45% 1%)
Tints · Shades · Tones
Tints
- FDE997
- FDEBA4
- FEEEB0
- FEF1BC
- FEF3C7
- FEF6D3
- FEF8DE
- FFFAE9
- FFFDF4
Shades
- DCC877
- BCAB65
- 9D8E53
- 7F7342
- 625932
- 474022
- 2D2814
- 161307
- 030301
Tones
- F0DB8A
- E3D18A
- D6C78A
- C9BC89
- BCB288
- B0A887
- A49E86
- 989484
- 8C8A82
Color harmonies
Complementary +180°
- FDE68A
Quack Quack
- DFE5FF
≈ Lavender Mist
Analogous -30° +30°
- FDE68A
Quack Quack
- FFE0C2
≈ Sand Muffin
- D3F49F
≈ Creamy Avocado
Triadic +120° +240°
- FDE68A
Quack Quack
- BAF1FF
≈ Northrend
- FFD9F5
≈ Strawberry Frost
Split-complementary +150° +210°
- FDE68A
Quack Quack
- D2E9FF
≈ Veiling Waterfalls
- EDDFFF
≈ Lavender Savour
Tetradic +90° +180° +270°
- FDE68A
Quack Quack
- 82FFF1
≈ Defence Matrix
- DFE5FF
≈ Lavender Mist
- FFDCE2
≈ It’s a Girl!
Contrast & accessibility
Ag
FailOn white
WCAG 1.24:1 · APCA Lc 12
Ag
AAAOn black
WCAG 16.86:1 · APCA Lc 92
Best text color: #000000
WCAG 16.86:1 (AAA) · APCA Lc 92
Contrast pairs
Code snippets
CSS
:root {
--quack-quack: #fde68a;
--quack-quack-rgb: 253 230 138;
--quack-quack-oklch: oklch(0.924 0.115 95.7);
}
.element {
color: var(--quack-quack);
background-color: hsl(48 97% 77%);
border-color: oklch(0.924 0.115 95.7);
}Tailwind CSS v4
@theme {
--color-quack-quack: #fde68a;
--color-quack-quack-50: #fef6d1;
--color-quack-quack-100: #f2e9bd;
--color-quack-quack-200: #e1d59d;
--color-quack-quack-300: #c7b872;
--color-quack-quack-400: #b39e47;
--color-quack-quack-500: #9d8504;
--color-quack-quack-600: #85700d;
--color-quack-quack-700: #6b5a0c;
--color-quack-quack-800: #504105;
--color-quack-quack-900: #372d04;
--color-quack-quack-950: #221a00;
}SCSS
$quack-quack: #fde68a;
$quack-quack-rgb: 253, 230, 138;
$quack-quack-light: mix(#fff, $quack-quack, 20%);
$quack-quack-dark: mix(#000, $quack-quack, 20%);
.element {
color: $quack-quack;
box-shadow: 0 0 0 2px rgba($quack-quack, 0.35);
}