Nearest named color · #F0DB8D
#F0DB8D
Nearest named color: Pineapple Whip
#F0DB8D (rgb(240 219 141), hsl(47 77% 75%), oklch(0.891 0.1 94.8)) is closest to the named color Pineapple Whip. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#F0DB8D
oklch(0.891 0.1 94.8)
Color conversions
- 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%)
Tints · Shades · Tones
Tints
- F1DF99
- F3E2A5
- F4E6B1
- F6EABC
- F7EDC8
- F9F1D3
- FAF5DE
- FCF8E9
- FDFCF4
Shades
- D1BE7A
- B2A267
- 958755
- 786D44
- 5D5433
- 433C23
- 2A2614
- 141107
- 030201
Tones
- E4D28D
- D9C88C
- CDBF8B
- C2B68A
- B6AD89
- ABA488
- A09B86
- 959284
- 8B8982
Color harmonies
Complementary +180°
- F0DB8D
Pineapple Whip
- D0D9FF
≈ Icy Plains
Analogous -30° +30°
- F0DB8D
Pineapple Whip
- FFD2A7
≈ Opalescent Coral
- CCE79E
≈ Crystal Apple
Triadic +120° +240°
- F0DB8D
Pineapple Whip
- 96EAFF
≈ Alpine Expedition
- FFC7F2
≈ Rosy Maple Moth
Split-complementary +150° +210°
- F0DB8D
Pineapple Whip
- BDE0FF
≈ Dithered Sky
- E5D1FF
≈ Mousse aux Pruneaux
Tetradic +90° +180° +270°
- F0DB8D
Pineapple Whip
- 88F1E4
≈ Turquoise Pearl
- D0D9FF
≈ Icy Plains
- FFCCD6
≈ Sweet Sixteen
Contrast & accessibility
Ag
FailOn white
WCAG 1.37:1 · APCA Lc 18
Ag
AAAOn black
WCAG 15.22:1 · APCA Lc 85
Best text color: #000000
WCAG 15.22:1 (AAA) · APCA Lc 85
Contrast pairs
Code snippets
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);
}