Named color · #ECDFCF
Natural Linen
Natural Linen is #ECDFCF: rgb(236 223 207), hsl(33 43% 87%), oklch(0.91 0.026 73.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Natural Linen color name →
#ECDFCF
oklch(0.91 0.026 73.2)
Color conversions
- HEX
- #ecdfcf
- RGB
- rgb(236 223 207)
- HSL
- hsl(33 43% 87%)
- HWB
- hwb(33 81% 7%)
- OKLCH
- oklch(0.91 0.026 73.2)
- OKLab
- oklab(0.91 0.007 0.025)
- CIE Lab
- lab(89.55 2.64 9.55)
- LCH
- lch(89.55 9.9 74.6)
- CMYK
- cmyk(0% 6% 12% 7%)
Tints · Shades · Tones
Tints
- EEE2D4
- F0E5D9
- F2E9DD
- F4ECE2
- F6EFE7
- F7F2EC
- F9F5F1
- FBF9F5
- FDFCFA
Shades
- CDC2B4
- AFA599
- 928A7F
- 766F67
- 5B564F
- 423D38
- 292723
- 131210
- 030202
Tones
- E1D5C7
- D5CBBF
- CAC2B7
- BFB8AF
- B5AEA7
- AAA59F
- 9F9B97
- 95928F
- 8A8988
Color harmonies
Complementary +180°
- ECDFCF
Natural Linen
- D6E3F2
≈ Aquarelle Purple
Analogous -30° +30°
- ECDFCF
Natural Linen
- F1DCD4
≈ American Yorkshire
- E4E2CF
≈ Au Natural
Triadic +120° +240°
- ECDFCF
Natural Linen
- CFE7E6
≈ Icicle Mint
- E7DDEE
≈ Lingering Lilac
Split-complementary +150° +210°
- ECDFCF
Natural Linen
- D0E5EE
≈ First Frost
- DEDFF2
≈ Lower Lavender
Tetradic +90° +180° +270°
- ECDFCF
Natural Linen
- D3E7DC
≈ Light Light Lichen
- D6E3F2
≈ Aquarelle Purple
- EEDBE6
≈ Mountain Heather
Contrast & accessibility
Ag
FailOn white
WCAG 1.31:1 · APCA Lc 15
Ag
AAAOn black
WCAG 16.02:1 · APCA Lc 88
Best text color: #000000
WCAG 16.02:1 (AAA) · APCA Lc 88
Contrast pairs
Code snippets
CSS
:root {
--natural-linen: #ecdfcf;
--natural-linen-rgb: 236 223 207;
--natural-linen-oklch: oklch(0.91 0.026 73.2);
}
.element {
color: var(--natural-linen);
background-color: hsl(33 43% 87%);
border-color: oklch(0.91 0.026 73.2);
}Tailwind CSS v4
@theme {
--color-natural-linen: #ecdfcf;
--color-natural-linen-50: #faf4ed;
--color-natural-linen-100: #ede7df;
--color-natural-linen-200: #dbd3c8;
--color-natural-linen-300: #bfb6a9;
--color-natural-linen-400: #a89c8e;
--color-natural-linen-500: #918474;
--color-natural-linen-600: #7b7062;
--color-natural-linen-700: #62594e;
--color-natural-linen-800: #484139;
--color-natural-linen-900: #322d27;
--color-natural-linen-950: #1e1a15;
}SCSS
$natural-linen: #ecdfcf;
$natural-linen-rgb: 236, 223, 207;
$natural-linen-light: mix(#fff, $natural-linen, 20%);
$natural-linen-dark: mix(#000, $natural-linen, 20%);
.element {
color: $natural-linen;
box-shadow: 0 0 0 2px rgba($natural-linen, 0.35);
}