Named color · #F3D64F
Fresh Pineapple
Fresh Pineapple is #F3D64F: rgb(243 214 79), hsl(49 87% 63%), oklch(0.877 0.153 96.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Fresh Pineapple color name →
#F3D64F
oklch(0.877 0.153 96.9)
Color conversions
- HEX
- #f3d64f
- RGB
- rgb(243 214 79)
- HSL
- hsl(49 87% 63%)
- HWB
- hwb(49 31% 5%)
- OKLCH
- oklch(0.877 0.153 96.9)
- OKLab
- oklab(0.877 -0.018 0.152)
- CIE Lab
- lab(86.32 -0.16 67.4)
- LCH
- lch(86.32 67.4 90.1)
- CMYK
- cmyk(0% 12% 67% 5%)
Tints · Shades · Tones
Tints
- F4DA67
- F5DF7C
- F6E38F
- F8E7A0
- F9ECB1
- FAF0C1
- FBF4D1
- FCF7E0
- FEFBF0
Shades
- D3BA44
- B49E38
- 97842E
- 7A6A23
- 5E5219
- 443B10
- 2B2507
- 141002
- 030200
Tones
- E7CD59
- DBC562
- CFBC68
- C3B36E
- B8AB72
- ACA276
- A19A7A
- 96917C
- 8B897E
Color harmonies
Complementary +180°
- F3D64F
Fresh Pineapple
- CCD4FF
≈ Pale Phthalo Blue
Analogous -30° +30°
- F3D64F
Fresh Pineapple
- FFCB97
≈ Peach Orange
- BBE975
≈ Pisco Sour
Triadic +120° +240°
- F3D64F
Fresh Pineapple
- 8AE6FF
≈ Winter Wizard
- FFBFED
≈ Pink Quartz
Split-complementary +150° +210°
- F3D64F
Fresh Pineapple
- B5DBFF
≈ Broad Daylight
- E4CAFF
≈ Lens Flare Pink
Tetradic +90° +180° +270°
- F3D64F
Fresh Pineapple
- 05F6E7
≈ Bright Aqua
- CCD4FF
≈ Pale Phthalo Blue
- FFC4CF
≈ Cotton Candy Comet
Contrast & accessibility
Ag
FailOn white
WCAG 1.44:1 · APCA Lc 21
Ag
AAAOn black
WCAG 14.54:1 · APCA Lc 82
Best text color: #000000
WCAG 14.54:1 (AAA) · APCA Lc 82
Contrast pairs
Code snippets
CSS
:root {
--fresh-pineapple: #f3d64f;
--fresh-pineapple-rgb: 243 214 79;
--fresh-pineapple-oklch: oklch(0.877 0.153 96.9);
}
.element {
color: var(--fresh-pineapple);
background-color: hsl(49 87% 63%);
border-color: oklch(0.877 0.153 96.9);
}Tailwind CSS v4
@theme {
--color-fresh-pineapple: #f3d64f;
--color-fresh-pineapple-50: #fff7c5;
--color-fresh-pineapple-100: #f4e9af;
--color-fresh-pineapple-200: #e4d688;
--color-fresh-pineapple-300: #cbb855;
--color-fresh-pineapple-400: #b89d00;
--color-fresh-pineapple-500: #a38300;
--color-fresh-pineapple-600: #8a6f00;
--color-fresh-pineapple-700: #6f5900;
--color-fresh-pineapple-800: #534000;
--color-fresh-pineapple-900: #3a2c00;
--color-fresh-pineapple-950: #241900;
}SCSS
$fresh-pineapple: #f3d64f;
$fresh-pineapple-rgb: 243, 214, 79;
$fresh-pineapple-light: mix(#fff, $fresh-pineapple, 20%);
$fresh-pineapple-dark: mix(#000, $fresh-pineapple, 20%);
.element {
color: $fresh-pineapple;
box-shadow: 0 0 0 2px rgba($fresh-pineapple, 0.35);
}