Couleur nommée · #FFE989
Quack Quack
Quack Quack correspond à #FFE989 : rgb(255 233 137), hsl(49 100% 77%), oklch(0.932 0.119 96.8). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Yellow mean? → · Quack Quack color name →
#FFE989
oklch(0.932 0.119 96.8)
Conversions de couleur
- HEX
- #ffe989
- RGB
- rgb(255 233 137)
- HSL
- hsl(49 100% 77%)
- HWB
- hwb(49 54% 0%)
- OKLCH
- oklch(0.932 0.119 96.8)
- OKLab
- oklab(0.932 -0.014 0.118)
- CIE Lab
- lab(92.65 -1.34 49.23)
- LCH
- lch(92.65 49.25 91.6)
- CMYK
- cmyk(0% 9% 46% 0%)
Teintes · Ombres · Tons
Teintes
- FFEB96
- FFEEA3
- FFF0B0
- FFF2BC
- FFF5C7
- FFF7D3
- FFF9DE
- FFFBE9
- FFFDF4
Ombres
- DECB76
- BEAD64
- 9E9053
- 807442
- 635A31
- 484122
- 2E2914
- 161307
- 030301
Tons
- F2DE8A
- E4D38A
- D7C98A
- CABE89
- BDB488
- B1A987
- A49F86
- 989484
- 8C8A82
Harmonies de couleurs
Complémentaire +180°
- FFE989
Quack Quack
- E2E7FF
≈ Lavender Mist
Analogue -30° +30°
- FFE989
Quack Quack
- FFE3C7
≈ Wild Maple
- D3F8A0
≈ Creamy Avocado
Triadique +120° +240°
- FFE989
Quack Quack
- C3F2FF
≈ Heaven’s Gate
- FFDDF5
≈ Silky Pink
Complémentaire divisée +150° +210°
- FFE989
Quack Quack
- D7EBFF
≈ Cloudless
- F0E2FF
≈ Lavender Savour
Tétradique +90° +180° +270°
- FFE989
Quack Quack
- 93FFF4
≈ Hello Winter
- E2E7FF
≈ Lavender Mist
- FFDFE4
≈ Pink Pleasure
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.21:1 · APCA Lc 11
Ag
AAASur noir
WCAG 17.26:1 · APCA Lc 94
Meilleure couleur de texte: #000000
WCAG 17.26:1 (AAA) · APCA Lc 94
Contrast pairs
Extraits de code
CSS
:root {
--quack-quack: #ffe989;
--quack-quack-rgb: 255 233 137;
--quack-quack-oklch: oklch(0.932 0.119 96.8);
}
.element {
color: var(--quack-quack);
background-color: hsl(49 100% 77%);
border-color: oklch(0.932 0.119 96.8);
}Tailwind CSS v4
@theme {
--color-quack-quack: #ffe989;
--color-quack-quack-50: #fdf6d0;
--color-quack-quack-100: #f2e9bc;
--color-quack-quack-200: #e1d69b;
--color-quack-quack-300: #c7b96f;
--color-quack-quack-400: #b29e43;
--color-quack-quack-500: #9d8500;
--color-quack-quack-600: #857101;
--color-quack-quack-700: #6a5a04;
--color-quack-quack-800: #4f4101;
--color-quack-quack-900: #372d02;
--color-quack-quack-950: #221a00;
}SCSS
$quack-quack: #ffe989;
$quack-quack-rgb: 255, 233, 137;
$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);
}