What color is #FEE2E2?
#FEE2E2 is a red color suited for error notice background, soft danger tint, form validation. It works best when used deliberately for error states, destructive buttons, validation messages, with contrast checked against the final background and text size.
This page gives practical values for #FEE2E2: RGB, HSL, readable text color, WCAG-style contrast, palette ideas, tints, shades, and code snippets. It is built for designers and developers who need more than a single color swatch.
Color values
- HEX
- #FEE2E2
- RGB
- rgb(254, 226, 226)
- HSL
- hsl(0, 93%, 94%)
- Color family
- red
Contrast
The suggested readable text color for #FEE2E2 is #000000. Always test final typography and component size before shipping.
Best uses
- - Error states
- - Destructive buttons
- - Validation messages
- - Urgent badges
Palette ideas for #FEE2E2
CSS and design token examples
Use these snippets as a starting point, then rename the token by purpose: primary, success, warning, accent, or surface. A named token is easier to maintain than repeating #FEE2E2 across many components.
:root {
--primary: #FEE2E2;
--primary-rgb: 254, 226, 226;
--primary-hsl: 0 93% 94%;
}// tailwind.config.js
export default {
theme: {
extend: {
colors: {
primary: "#FEE2E2",
},
},
},
};{
"primary": "#FEE2E2",
"primaryRgb": [254, 226, 226],
"primaryHsl": {"h": 0, "s": 93, "l": 94}
}$primary: #FEE2E2;
$primary-rgb: 254, 226, 226;
$primary-hsl: 0 93% 94%;How to use #FEE2E2 in UI
Use it with a role
Decide whether #FEE2E2 is a primary action, a status color, an accent, a chart color, or a background support color before adding it to a design system.
Create states
Use tints and shades for hover, active, selected, disabled, and subtle backgrounds. Do not invent unrelated colors for each state.
Check contrast
The fastest check is black versus white text, but final UI should be tested with actual font size, weight, and surface color.
Export consistently
Copy one source format into your token layer so the same color does not drift across CSS, Tailwind, JSON, and component files.
When to use and avoid #FEE2E2
Use #FEE2E2 when
Use this color when its role is visible and repeatable. It works best when it is tied to a clear interface job such as a primary action, status badge, chart highlight, product category, or brand accent. The color should help users understand the page faster.
Avoid #FEE2E2 when
Avoid using it as a random decoration or applying it to too many unrelated elements. If every icon, card, heading, and button uses the same color, the color stops communicating priority. Use neutrals and tints to keep hierarchy clear.
Accessibility note
Contrast depends on the foreground and background pair, not the HEX value alone. Use the contrast scores above as an early check, then test the final component with real text size, font weight, spacing, and surrounding surfaces.
Token naming note
If #FEE2E2 appears more than once in your codebase, give it a token name. Good names describe purpose, such as primary, success, warning, accent, or surface. This prevents small color differences from spreading across components.
FAQ about #FEE2E2
What is the RGB value of #FEE2E2?
The RGB value is rgb(254, 226, 226). RGB is useful when checking browser dev tools, canvas pixels, or computed CSS values.
What is the HSL value of #FEE2E2?
The HSL value is hsl(0, 93%, 94%). HSL is useful when creating lighter tints, darker shades, and calmer variations.
Which text color works best on #FEE2E2?
Based on black and white contrast, #000000 is the better quick choice. For production UI, confirm the result with the final font size and component state.
Can I use #FEE2E2 in Tailwind or CSS variables?
Yes. Use the export snippets above as a starting point, then rename the color by role so the value is maintainable across your project.