Light Pink Color (#FFB6C1)
Light Pink is a CSS named color defined as hex code #FFB6C1. With RGB(255, 182, 193) and a high relative luminance of 0.5857, its pale, warm hue provides a gentle, welcoming presence suitable for light UI cards, notification banners, and soft brand accents.
Color Overview & Formats
lightpinkLuminance: 0.5857| Format | Syntax / Values | Notes | Action |
|---|---|---|---|
| HEX | #FFB6C1 | 6-digit hex web code | |
| RGB | rgb(255, 182, 193) | Red, Green, Blue channels (0-255) | |
| HSL | hsl(351, 100%, 86%) | Hue (351°), Saturation (100%), Lightness (86%) | |
| HSV / HSB | hsv(351, 29%, 100%) | Hue, Saturation (29%), Value/Brightness (100%) | |
| CMYK | cmyk(0%, 29%, 24%, 0%) | Digital mathematical approximation (non-print) | |
| OKLCH | oklch(0.847 0.086 9.1) | Perceptually uniform color space (CSS Color 4 approximation) |
background-color: #FFB6C1; /* or lightpink */- Select color format: Choose the desired format (HEX #FFB6C1, RGB, or HSL).
- Copy the code: Click the copy button or press Tab+Enter to store in clipboard.
- Pair with black text: Black text on Light Pink reaches 12.71:1 (WCAG AAA).
What Colors Go With Light Pink?
These 6 colors all go well with Light Pink (#FFB6C1), and each one is a standard CSS named color. The ratio is the WCAG 2.2 contrast of that color on Light Pink: at 4.5:1 or above it works for text; below that, use it for backgrounds and accents.
Harmonious Palettes & Tints
Light pink and navy invitation palette
Use light pink for the page, white for the card and navy for text and actions. Navy keeps small labels readable where white text on pink would fail.
A soft pink canvas with a clear, high-contrast call to action.
View invitationText on canvas: 9.69:1. Text on card: 16.01:1. Button label: 16.01:1. All three exceed the WCAG AA requirement of 4.5:1 for body text.
View CSS and usage
Use color-theme on the wrapper, example-card on its card and example-action on a button or link.
.color-theme {
--canvas: #FFB6C1;
--surface: #FFFFFF;
--ink: #000080;
--action: #000080;
--action-text: #FFFFFF;
background: var(--canvas);
color: var(--ink);
padding: 24px;
}
.color-theme .example-card {
background: var(--surface);
color: var(--ink);
border-radius: 12px;
padding: 24px;
}
.color-theme .example-action {
background: var(--action);
color: var(--action-text);
border-radius: 6px;
padding: 10px 16px;
}The palettes below are algorithmically generated across standard intervals based on Light Pink (HSL 351°). Each group offers full palette copy and live preview:
Complementary Harmony
Generated algorithmically by rotating hue 180 degrees in HSL (351° to 171°) while keeping the original saturation and lightness, to pair warmth with crisp soft mint.
Analogous Harmony
Generated algorithmically by rotating hue +/- 30 degrees (351° to 321° and 21°) while keeping the original saturation and lightness, for smooth, cohesive visual flow.
Triadic Harmony
Generated algorithmically by spacing hues evenly by 120 degrees across the color circle (351° to 111° and 231°) while keeping the original saturation and lightness.
Monochromatic Tints & Shades
Generated algorithmically across varying lightness levels from bright tint to deep accent shade.
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:
| Foreground Color | Contrast Ratio | Normal Text (AA) | Large Text (AA) | Normal Text AAA (>= 7.0:1) |
|---|---|---|---|---|
Pure Black (#000000) | 12.71:1 | Pass | Pass | Pass |
Pure White (#FFFFFF) | 1.65:1 | Fail | Fail | Fail |
Dark Charcoal (#212529) | 9.34:1 | Pass | Pass | Pass |
Mid Gray (#666666) | 3.48:1 | Fail | Pass | Fail |
Interactive Contrast Tester
Enter text foreground and background colors to verify WCAG legibility:
This is sample body text rendered directly to verify contrast and readability.
Light Pink Background Download
Download standard 1920x1080 solid desktop wallpaper or generate mobile wallpaper:
Standard Wallpaper: 1920x1080 PNG (#FFB6C1)Download Options
All wallpaper files precisely match the W3C standard color value:
CSS Standard & Platform Comparison
lightpink = #ffb6c1 (rgb(255, 182, 193))
| Platform / Source | Hex Value | RGB Notation | Notes & Differences |
|---|---|---|---|
| W3C CSS Color 4 ↗ | #FFB6C1 | rgb(255, 182, 193) | Official CSS specification standard for lightpink. |
| PicMonkey / HTML Color Codes ↗ | #FFB6C1 | rgb(255, 182, 193) | Matches official CSS named color standard. |
| Figma ↗ | #FFB5C0 | rgb(255, 181, 192) | Slightly cooler variant commonly cataloged in Figma color system. |
| ArtyClick ↗ | #FFD1DF | rgb(255, 209, 223) | Significantly lighter pastel shade used in dictionary entries. |
UI Design & Accessibility Guidelines
In digital UI design, Light Pink is ideal for subtle card fills and gentle highlights. Because of its high luminance, text placed upon it must have strong dark contrast (such as pure black or dark charcoal); avoid pairing with white text.
Frequently Asked Questions (FAQ)
Can I use black text on Light Pink?
Yes. Black text on Light Pink achieves a WCAG 2.2 contrast ratio of 12.71:1, comfortably exceeding both the 4.5:1 AA threshold and the 7.0:1 AAA enhanced threshold for all text sizes.
Can I use white text on Light Pink?
No. White text on Light Pink yields an insufficient contrast ratio of only 1.65:1, failing both the 4.5:1 AA standard for regular text and the 3.0:1 standard for large text.
Is #FFB6C1 the only hex code for light pink?
No. While #FFB6C1 is the official W3C CSS named color lightpink, other design tools and dictionaries catalog close variations such as Figma (#FFB5C0) and ArtyClick (#FFD1DF).
What colors go with light pink?
Navy, maroon, dark slate gray, sage green, cream and muted gold all go well with light pink. Navy (9.69:1), maroon (6.63:1) and dark slate gray (5.4:1) are dark enough for text on light pink; sage, cream and gold work better as backgrounds or accents.