Couleur nommée la plus proche · #F0DB8D
#F0DB8D
Couleur nommée la plus proche: Pineapple Whip
#F0DB8D (rgb(240 219 141), hsl(47 77% 75%), oklch(0.891 0.1 94.8)) est la plus proche de la couleur nommée Pineapple Whip. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#F0DB8D
oklch(0.891 0.1 94.8)
Conversions de couleur
- HEX
- #f0db8d
- RGB
- rgb(240 219 141)
- HSL
- hsl(47 77% 75%)
- HWB
- hwb(47 55% 6%)
- OKLCH
- oklch(0.891 0.1 94.8)
- OKLab
- oklab(0.891 -0.008 0.1)
- CIE Lab
- lab(87.86 -0.28 41.07)
- LCH
- lch(87.86 41.07 90.4)
- CMYK
- cmyk(0% 9% 41% 6%)
Teintes · Ombres · Tons
Teintes
- F1DF99
- F3E2A5
- F4E6B1
- F6EABC
- F7EDC8
- F9F1D3
- FAF5DE
- FCF8E9
- FDFCF4
Ombres
- D1BE7A
- B2A267
- 958755
- 786D44
- 5D5433
- 433C23
- 2A2614
- 141107
- 030201
Tons
- E4D28D
- D9C88C
- CDBF8B
- C2B68A
- B6AD89
- ABA488
- A09B86
- 959284
- 8B8982
Harmonies de couleurs
Complémentaire +180°
- F0DB8D
Pineapple Whip
- D0D9FF
≈ Icy Plains
Analogue -30° +30°
- F0DB8D
Pineapple Whip
- FFD2A7
≈ Opalescent Coral
- CCE79E
≈ Crystal Apple
Triadique +120° +240°
- F0DB8D
Pineapple Whip
- 96EAFF
≈ Alpine Expedition
- FFC7F2
≈ Rosy Maple Moth
Complémentaire divisée +150° +210°
- F0DB8D
Pineapple Whip
- BDE0FF
≈ Dithered Sky
- E5D1FF
≈ Mousse aux Pruneaux
Tétradique +90° +180° +270°
- F0DB8D
Pineapple Whip
- 88F1E4
≈ Turquoise Pearl
- D0D9FF
≈ Icy Plains
- FFCCD6
≈ Sweet Sixteen
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.37:1 · APCA Lc 18
Ag
AAASur noir
WCAG 15.22:1 · APCA Lc 85
Meilleure couleur de texte: #000000
WCAG 15.22:1 (AAA) · APCA Lc 85
Contrast pairs
Extraits de code
CSS
:root {
--pineapple-whip: #f0db8d;
--pineapple-whip-rgb: 240 219 141;
--pineapple-whip-oklch: oklch(0.891 0.1 94.8);
}
.element {
color: var(--pineapple-whip);
background-color: hsl(47 77% 75%);
border-color: oklch(0.891 0.1 94.8);
}Tailwind CSS v4
@theme {
--color-pineapple-whip: #f0db8d;
--color-pineapple-whip-50: #fdf6d6;
--color-pineapple-whip-100: #f1e9c3;
--color-pineapple-whip-200: #e0d5a4;
--color-pineapple-whip-300: #c6b87c;
--color-pineapple-whip-400: #b19e56;
--color-pineapple-whip-500: #9b852a;
--color-pineapple-whip-600: #837126;
--color-pineapple-whip-700: #695a1e;
--color-pineapple-whip-800: #4e4113;
--color-pineapple-whip-900: #372d0c;
--color-pineapple-whip-950: #211a01;
}SCSS
$pineapple-whip: #f0db8d;
$pineapple-whip-rgb: 240, 219, 141;
$pineapple-whip-light: mix(#fff, $pineapple-whip, 20%);
$pineapple-whip-dark: mix(#000, $pineapple-whip, 20%);
.element {
color: $pineapple-whip;
box-shadow: 0 0 0 2px rgba($pineapple-whip, 0.35);
}