Lavender Blush Color (#FFF0F5)

#FFF0F5rgb(255, 240, 245)

Lavender Blush is a CSS named color defined as hex code #FFF0F5. It is the palest color in the pink family, a near-white with a faint cool pink cast. At RGB(255, 240, 245) the difference from pure white is subtle but visible side by side.

Color Overview & Formats

CSS: lavenderblushLuminance: 0.9017
HEX
#FFF0F5
RGB
rgb(255, 240, 245)
HSL
hsl(340, 100%, 97%)
Lavender Blush (#FFF0F5) Color Format Conversions
FormatSyntax / ValuesNotesAction
HEX#FFF0F56-digit hex web code
RGBrgb(255, 240, 245)Red, Green, Blue channels (0-255)
HSLhsl(340, 100%, 97%)Hue (340°), Saturation (100%), Lightness (97%)
HSV / HSBhsv(340, 6%, 100%)Hue, Saturation (6%), Value/Brightness (100%)
CMYKcmyk(0%, 6%, 4%, 0%)Digital mathematical approximation (non-print)
OKLCHoklch(0.968 0.017 355.1)Perceptually uniform color space (CSS Color 4 approximation)
CSS Implementation & Quick Steps
background-color: #FFF0F5; /* or lavenderblush */
  1. Select color format: Choose the desired format (HEX #FFF0F5, RGB, or HSL).
  2. Copy the code: Click the copy button or press Tab+Enter to store in clipboard.
  3. Pair with black text: Black text on Lavender Blush reaches 19.03:1 (WCAG AAA).

What Colors Go With Lavender Blush?

These 6 colors all go well with Lavender Blush (#FFF0F5), and each one is a standard CSS named color. The ratio is the WCAG 2.2 contrast of that color on Lavender Blush: at 4.5:1 or above it works for text; below that, use it for backgrounds and accents.

Dark Slate Blue

#483D8B
8.22:1Text-safe

A deep blue-violet for text and headings with a lavender mood.

7.62:1Text-safe

A rich purple that brings out the cool pink cast.

Dim Gray

#696969
4.98:1Text-safe

A neutral gray for body text in soft, minimal layouts.

Thistle

#D8BFD8
1.54:1Background / accent

A pale mauve for subtle tonal layering.

Plum

#DDA0DD
1.88:1Background / accent

A light purple accent for icons and highlights.

2.82:1Background / accent

A dusty rose accent for a stronger pink moment.

Harmonious Palettes & Tints

The palettes below are algorithmically generated across standard intervals based on Lavender Blush (HSL 340°). Each group offers full palette copy and live preview:

Complementary Harmony

Hue rotated 180 degrees on the HSL wheel (340° to 160°), keeping the original saturation and lightness.

Lavender Blush
#FFF0F5
Complement (160°)
#F0FFFA
Live UI Component Mockup
Component Header SampleBlack text on Lavender Blush: 19.03:1 (WCAG AAA).
Button style preview

Analogous Harmony

Hues 30 degrees either side (310° and 10°), keeping the original saturation and lightness.

Analogous (310°)
#FFF0FC
Lavender Blush
#FFF0F5
Analogous (10°)
#FFF3F0
Live UI Component Mockup
Component Header SampleBlack text on Lavender Blush: 19.03:1 (WCAG AAA).
Button style preview

Triadic Harmony

Hues spaced evenly by 120 degrees (100° and 220°), keeping the original saturation and lightness.

Lavender Blush
#FFF0F5
Triadic (100°)
#F5FFF0
Triadic (220°)
#F0F5FF
Live UI Component Mockup
Component Header SampleBlack text on Lavender Blush: 19.03:1 (WCAG AAA).
Button style preview

Tints & Shades

Mixed with white (tints) and black (shades) in sRGB at 60% and 30%.

Tint 60%
#FFF9FB
Tint 30%
#FFF5F8
Lavender Blush
#FFF0F5
Shade 30%
#B3A8AC
Shade 60%
#666062
Live UI Component Mockup
Component Header SampleBlack text on Lavender Blush: 19.03:1 (WCAG AAA).
Button style preview

WCAG 2.2 Text Readability & Contrast Check

Under WCAG 2.2 criteria, regular body text requires at least 4.5:1 (AA) and large text requires at least 3.0:1. The table below displays calculated contrast ratios:

Text Contrast Ratios on Lavender Blush (#FFF0F5)
Foreground ColorContrast RatioNormal Text (AA)Large Text (AA)Normal Text AAA (>= 7.0:1)
Pure Black (#000000)
19.03:1PassPassPass
Pure White (#FFFFFF)
1.10:1FailFailFail
Dark Charcoal (#212529)
13.98:1PassPassPass
Mid Gray (#666666)
5.20:1PassPassFail

Interactive Contrast Tester

Enter text foreground and background colors to verify WCAG legibility:

Calculated Ratio:
19.03:1
Normal: Pass AAALarge: Pass AAA
Large Heading Sample (18pt Bold)

This is sample body text rendered directly to verify contrast and readability.

Lavender Blush Background Download

Download standard 1920x1080 solid desktop wallpaper or generate mobile wallpaper:

Lavender Blush 1920x1080 solid color background wallpaper previewStandard Wallpaper: 1920x1080 PNG (#FFF0F5)

Download Options

All wallpaper files precisely match the W3C standard color value:

Download 1920x1080 PNG

CSS Standard & Usage Notes

lavenderblush = #fff0f5 (rgb(255, 240, 245))
W3C CSS Color 4

UI Design & Accessibility Guidelines

Lavender Blush is a background color: page fills, alternating table rows, hover states and cards. Treat it like an off-white and set dark text on it; black text passes WCAG AAA.

Published: · Modified: · Editorial: SwatchAtlas Editorial Team

Frequently Asked Questions (FAQ)

Can I use black text on Lavender Blush?

Yes. Black text on Lavender Blush has a WCAG 2.2 contrast ratio of 19.03:1, passing both AA (4.5:1) and AAA (7:1) at every text size.

Can I use white text on Lavender Blush?

No. White text on Lavender Blush has a WCAG 2.2 contrast ratio of only 1.1:1, below the 3:1 minimum even for large text.

What colors go with Lavender Blush?

Dark Slate Blue, Rebecca Purple, Dim Gray, Thistle, Plum and Pale Violet Red all go well with Lavender Blush. Dark Slate Blue (8.22:1), Rebecca Purple (7.62:1) and Dim Gray (4.98:1) have enough contrast for text on Lavender Blush; Thistle, Plum and Pale Violet Red work better as a background or accent.

Is Lavender Blush purple?

No. Despite the name, Lavender Blush (#FFF0F5) has a pink hue of 340° and is almost white. The CSS color Lavender (#E6E6FA) is the one with a blue-violet hue.