Linen
Introducing Linen (#FAF0E6), a soft off-white with a distinct character. This hue moves beyond simple neutrality, carrying a subtle, creamy warmth. Its understated complexity gives it a refined quality, making it a compelling choice for designers seeking a gentle, yet expressive, base color.
What color is Linen?
Linen is a gentle, off-white neutral with a distinct warmth, inspired by the color of natural linen fabric.
Its appearance is defined by soft yellow and beige undertones, creating a creamy, organic feel that stands apart from cooler, more sterile whites.
What meaning does the color Linen (#FAF0E6) convey in UI design?
Named after the classic textile, the color Linen symbolizes purity, relaxation, and a quiet, understated elegance rooted in the natural world.
In design, Linen (#FAF0E6) communicates authenticity and timelessness, offering a sense of calm that helps create serene and grounded visual compositions.
How do I use Linen in UI design?
In design, Linen (#FAF0E6) works best as a background color, offering a warmer, more organic alternative to stark white. For proper accessibility, it requires high-contrast pairings, such as dark text. It complements earthy tones like deep greens and browns for a natural feel, or a rich navy blue for a timeless combination. For a more energetic palette, try a single, bright accent like a fiery orange.
While not as widespread as pure white, warm off-whites similar to Linen are used by brands aiming for an approachable feel. Burger King’s retro-inspired rebrand and the soft document pages in Coda are prime examples. Choosing a color like Linen can help a design stand out with a subtle warmth that feels less clinical and more considered.
To see these principles in action, use the tools below. You can explore curated palettes, test color contrast for accessibility, and preview how Linen appears in the real UI components of top brands.
Using Linen color codes
Using the hex code #FAF0E6 is the most direct way to specify Linen in digital design tools and CSS. For consistency across projects, always use this exact value to maintain color fidelity.
Different projects call for different color models. While a hex code is standard for the web, you'll need its RGB equivalent for most screen-based applications or its CMYK values for print. Formats like HSL offer intuitive ways to adjust color, while LAB, LCH, and XYZ provide device-independent definitions critical for professional color management.
We've converted #FAF0E6 into a range of popular formats below. You can copy the exact codes you need for your project.
Analogous
Analogous colors sit next to each other on the color wheel. For Linen, these adjacent hues produce a cohesive and tranquil palette.
Complementary
Complementary colors are opposites on the color wheel. When paired with Linen, these hues create a striking, high-contrast visual effect, making both colors pop.
Split Complementary
The split complementary palette for Linen uses the two colors adjacent to its direct complement, creating a vibrant, high-contrast look that's easier to balance.
Triadic
Triadic palettes are formed by three colors spaced evenly on the color wheel. With Linen as a base, this creates a vibrant, high-contrast combination.
Tetradic
A tetradic scheme uses two complementary color pairs, forming a rectangle on the color wheel. Explore palettes that build upon Linen with this model.
Square
A square color scheme uses four colors equidistant on the color wheel. This method creates a vibrant, high-contrast palette with Linen (#FAF0E6) as its foundation.
Text Color
Background Color
Your Catchy Large Text Goes Here
Shades
Shades of Linen are created by adding black, resulting in darker, weightier tones.
Tints
Tints are lighter variations of Linen, created by mixing in white for a softer feel.
Tones
Tones of Linen are created by adding gray, resulting in softer, muted variations.
Hues
Hues are variations of Linen's base color, differing in intensity or temperature to create distinct moods.
Never run out of inspiration again.
Use Mobbin for free as long as you like or get full access with any of our paid plans.
