Named color · #FAF4D4
Cotton Cloth
Cotton Cloth is #FAF4D4: rgb(250 244 212), hsl(51 79% 91%), oklch(0.964 0.042 98.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Yellow mean? → · Cotton Cloth color name →
#FAF4D4
oklch(0.964 0.042 98.4)
Color conversions
- HEX
- #faf4d4
- RGB
- rgb(250 244 212)
- HSL
- hsl(51 79% 91%)
- HWB
- hwb(51 83% 2%)
- OKLCH
- oklch(0.964 0.042 98.4)
- OKLab
- oklab(0.964 -0.006 0.042)
- CIE Lab
- lab(96.04 -1.76 16.25)
- LCH
- lch(96.04 16.34 96.2)
- CMYK
- cmyk(0% 2% 15% 2%)
Tints · Shades · Tones
Tints
- FAF5D8
- FBF6DD
- FBF7E1
- FCF8E5
- FCFAEA
- FDFBEE
- FDFCF2
- FEFDF6
- FEFEFB
Shades
- D9D4B8
- BAB59D
- 9B9783
- 7D7A69
- 615E51
- 46443A
- 2D2B24
- 151410
- 030302
Tones
- EDE8CB
- E0DCC3
- D4D0BA
- C7C4B2
- BBB8A9
- AFADA1
- A3A199
- 979690
- 8B8B88
Color harmonies
Complementary +180°
- FAF4D4
Cotton Cloth
- F0F2FF
≈ Cloud Break
Analogous -30° +30°
- FAF4D4
Cotton Cloth
- FFF0E1
≈ Sugar Glaze
- EBF9DB
≈ Pastoral
Triadic +120° +240°
- FAF4D4
Cotton Cloth
- E1F8FF
≈ Glacial Day
- FFEDF9
≈ Partial Pink
Split-complementary +150° +210°
- FAF4D4
Cotton Cloth
- EAF4FF
≈ Moon White
- F7EFFF
≈ Cloud Break
Tetradic +90° +180° +270°
- FAF4D4
Cotton Cloth
- D4FDF8
≈ Ice
- F0F2FF
≈ Cloud Break
- FFEEF0
≈ Translucent Unicorn
Contrast & accessibility
Ag
FailOn white
WCAG 1.10:1 · APCA Lc 0
Ag
AAAOn black
WCAG 18.95:1 · APCA Lc 100
Best text color: #000000
WCAG 18.95:1 (AAA) · APCA Lc 100
Contrast pairs
Code snippets
CSS
:root {
--cotton-cloth: #faf4d4;
--cotton-cloth-rgb: 250 244 212;
--cotton-cloth-oklch: oklch(0.964 0.042 98.4);
}
.element {
color: var(--cotton-cloth);
background-color: hsl(51 79% 91%);
border-color: oklch(0.964 0.042 98.4);
}Tailwind CSS v4
@theme {
--color-cotton-cloth: #faf4d4;
--color-cotton-cloth-50: #f8f6e8;
--color-cotton-cloth-100: #ebe9d9;
--color-cotton-cloth-200: #d8d5c1;
--color-cotton-cloth-300: #bcb8a0;
--color-cotton-cloth-400: #a59f83;
--color-cotton-cloth-500: #8d8767;
--color-cotton-cloth-600: #777257;
--color-cotton-cloth-700: #605b46;
--color-cotton-cloth-800: #464332;
--color-cotton-cloth-900: #312e22;
--color-cotton-cloth-950: #1d1b11;
}SCSS
$cotton-cloth: #faf4d4;
$cotton-cloth-rgb: 250, 244, 212;
$cotton-cloth-light: mix(#fff, $cotton-cloth, 20%);
$cotton-cloth-dark: mix(#000, $cotton-cloth, 20%);
.element {
color: $cotton-cloth;
box-shadow: 0 0 0 2px rgba($cotton-cloth, 0.35);
}