Named color · #F9F4E5
Cotton Fluff
Cotton Fluff is #F9F4E5: rgb(249 244 229), hsl(45 62% 94%), oklch(0.967 0.02 91.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Cotton Fluff color name →
#F9F4E5
oklch(0.967 0.02 91.6)
Color conversions
- HEX
- #f9f4e5
- RGB
- rgb(249 244 229)
- HSL
- hsl(45 62% 94%)
- HWB
- hwb(45 90% 2%)
- OKLCH
- oklch(0.967 0.02 91.6)
- OKLab
- oklab(0.967 -0.001 0.02)
- CIE Lab
- lab(96.28 -0.15 7.88)
- LCH
- lch(96.28 7.88 91.1)
- CMYK
- cmyk(0% 2% 8% 2%)
Tints · Shades · Tones
Tints
- FAF5E8
- FAF6EA
- FBF7ED
- FBF8EF
- FCFAF2
- FDFBF5
- FDFCF7
- FEFDFA
- FEFEFC
Shades
- D9D4C7
- B9B5AA
- 9A978E
- 7D7A72
- 615E58
- 46443F
- 2C2B28
- 151412
- 030303
Tones
- ECE8DA
- E0DCD0
- D3D0C6
- C7C4BB
- BBB8B1
- AFADA7
- A3A19D
- 979693
- 8B8B8A
Color harmonies
Complementary +180°
- F9F4E5
Cotton Fluff
- F0F4FF
≈ Boysenberry Shadow
Analogous -30° +30°
- F9F4E5
Cotton Fluff
- FFF1E7
≈ Pico Ivory
- F2F7E8
≈ Garden Dawn
Triadic +120° +240°
- F9F4E5
Cotton Fluff
- E5F8FC
≈ Clear Skies
- FDEFFA
≈ Partial Pink
Split-complementary +150° +210°
- F9F4E5
Cotton Fluff
- EAF6FF
≈ Clear Skies
- F6F1FF
≈ Cloud Break
Tetradic +90° +180° +270°
- F9F4E5
Cotton Fluff
- E6F9F5
≈ Melting Glacier
- F0F4FF
≈ Boysenberry Shadow
- FFF0F3
≈ Powder Puff
Contrast & accessibility
Ag
FailOn white
WCAG 1.09:1 · APCA Lc 0
Ag
AAAOn black
WCAG 19.09:1 · APCA Lc 101
Best text color: #000000
WCAG 19.09:1 (AAA) · APCA Lc 101
Contrast pairs
Code snippets
CSS
:root {
--cotton-fluff: #f9f4e5;
--cotton-fluff-rgb: 249 244 229;
--cotton-fluff-oklch: oklch(0.967 0.02 91.6);
}
.element {
color: var(--cotton-fluff);
background-color: hsl(45 62% 94%);
border-color: oklch(0.967 0.02 91.6);
}Tailwind CSS v4
@theme {
--color-cotton-fluff: #f9f4e5;
--color-cotton-fluff-50: #f7f5ef;
--color-cotton-fluff-100: #eae8e0;
--color-cotton-fluff-200: #d7d4cb;
--color-cotton-fluff-300: #bbb7ac;
--color-cotton-fluff-400: #a39e91;
--color-cotton-fluff-500: #8b8677;
--color-cotton-fluff-600: #767165;
--color-cotton-fluff-700: #5e5b51;
--color-cotton-fluff-800: #45423a;
--color-cotton-fluff-900: #302e28;
--color-cotton-fluff-950: #1c1a16;
}SCSS
$cotton-fluff: #f9f4e5;
$cotton-fluff-rgb: 249, 244, 229;
$cotton-fluff-light: mix(#fff, $cotton-fluff, 20%);
$cotton-fluff-dark: mix(#000, $cotton-fluff, 20%);
.element {
color: $cotton-fluff;
box-shadow: 0 0 0 2px rgba($cotton-fluff, 0.35);
}