#FA2D2B Imperial Red
rgb(250, 45, 43)
Color conversions
- HEX
- #FA2D2B
- RGB
- rgb(250, 45, 43)
- RGBA
- rgba(250, 45, 43, 1)
- HSL
- hsl(1, 95%, 57%)
- HSV / HSB
- hsv(1, 83%, 98%)
- CMYK
- cmyk(0%, 82%, 83%, 2%)
Wide-gamut spaces
- XYZ
- xyz(40.804, 22.382, 4.457)
- LAB
- lab(54.43 73.61 52.5)
- LCH
- lch(54.43 90.42 35.5)
- OKLAB
- oklab(63.56% 0.2099 0.11)
- OKLCH
- oklch(63.56% 0.2369 27.66)
- Nearest name
- Imperial Red
Shades, tints and tones
Color harmonies
The hue directly opposite on the color wheel. Maximum contrast, ideal for a single accent against a dominant brand color.
Neighbouring hues that share a temperature. The safest harmony for calm, cohesive interfaces.
Three hues evenly spaced 120 degrees apart. Vibrant and balanced — use one as dominant and the other two sparingly.
The complement split into two adjacent hues. Nearly the contrast of complementary with noticeably less tension.
Four hues at 90-degree intervals. A rich set for illustration, data visualisation, and category coding.
Two complementary pairs offset by 60 degrees. Gives two warm and two cool options in one system.
Similar colors
Opacity variations
#fa2d2b1a
#fa2d2b33
#fa2d2b4d
#fa2d2b66
#fa2d2b80
#fa2d2b99
#fa2d2bb3
#fa2d2bcc
#fa2d2be6
#fa2d2bff
Accessibility and contrast
On white
3.84:1
Body text AA Large · Large text AA
On black
5.48:1
Body text AA · Large text AA
White-on-color contrast is 3.84:1.
Color blindness preview
Protanopia
No red cones — ~1% of men
Protanomaly
Reduced red sensitivity — ~1% of men
Deuteranopia
No green cones — ~1% of men
Deuteranomaly
Reduced green sensitivity — ~5% of men
Tritanopia
No blue cones — very rare
Tritanomaly
Reduced blue sensitivity — very rare
Achromatopsia
No color perception — ~1 in 30,000
Achromatomaly
Partial color perception — rare
Meaning, psychology and brand usage
Urgency, appetite, and appetite-driven action
Red raises perceived urgency and measurably increases heart rate. In interfaces it pulls attention faster than any other hue, which is why it dominates sale badges, error states, and single primary actions. Used across large surfaces it reads as aggressive and raises anxiety, so reserve it for moments that genuinely deserve interruption.
Across most Western markets red signals passion, danger, and importance. In China and much of East Asia it carries luck and prosperity instead, making it a celebratory rather than cautionary choice.
Red ochre is the oldest pigment in human art, present in cave paintings over 40,000 years old. Vermilion and later cadmium red made saturated reds affordable to industry, which is why the hue is so tightly bound to twentieth-century advertising.
Works as a primary for food, entertainment, sport, and clearance-driven retail. Keep it to under 10% of surface area in dashboards and productivity tools, where it competes with destructive-action semantics.
Common industries: Food & beverage, Entertainment, Sport, Retail, Automotive. Pairs well with deep navy for authority, warm cream for approachability, charcoal for premium restraint.
Code exports
CSS
:root {
--color-imperial-red: #fa2d2b;
--color-imperial-red-rgb: 250 45 43;
--color-imperial-red-hsl: 1 95% 57%;
--color-imperial-red-oklch: 63.56% 0.2369 27.66;
}
.element {
color: #fa2d2b;
background-color: hsl(1, 95%, 57%);
border: 1px solid rgb(250 45 43 / 40%);
}SCSS
$imperial-red: #fa2d2b;
$imperial-red-light: #fd9695;
$imperial-red-dark: #7d1716;
.element {
color: $imperial-red;
background: rgba($imperial-red, 0.12);
&:hover {
color: darken($imperial-red, 8%);
}
}LESS
@imperial-red: #fa2d2b;
@imperial-red-light: lighten(@imperial-red, 12%);
@imperial-red-dark: darken(@imperial-red, 12%);
.element {
color: @imperial-red;
background: fade(@imperial-red, 12%);
}Tailwind CSS
/* Tailwind v4 — src/styles.css */
@theme {
--color-imperial-red-50: #fed5d5;
--color-imperial-red-100: #fec0bf;
--color-imperial-red-200: #fdabaa;
--color-imperial-red-300: #fc8180;
--color-imperial-red-400: #fb5755;
--color-imperial-red-500: #fa2d2b;
--color-imperial-red-600: #e12927;
--color-imperial-red-700: #af1f1e;
--color-imperial-red-800: #7d1716;
--color-imperial-red-900: #4b0e0d;
}
/* Usage */
<div class="bg-imperial-red-500 text-imperial-red-50 ring-imperial-red-600" />
/* Arbitrary value, no config needed */
<div class="bg-[#fa2d2b]" />Bootstrap
// Bootstrap 5 — _variables.scss (before importing bootstrap)
$imperial-red: #fa2d2b;
$primary: $imperial-red;
$theme-colors: map-merge($theme-colors, (
"imperial-red": $imperial-red
));
// Generates .text-imperial-red, .bg-imperial-red, .btn-imperial-red
@import "bootstrap/scss/bootstrap";Flutter
import 'package:flutter/material.dart';
const Color imperialRed = Color(0xFFFA2D2B);
// As a MaterialColor swatch
const MaterialColor imperialRedSwatch = MaterialColor(0xFFFA2D2B, <int, Color>{
50: Color(0xFFFED5D5),
100: Color(0xFFFEC0BF),
200: Color(0xFFFDABAA),
300: Color(0xFFFC8180),
400: Color(0xFFFB5755),
500: Color(0xFFFA2D2B),
600: Color(0xFFE12927),
700: Color(0xFFAF1F1E),
800: Color(0xFF7D1716),
900: Color(0xFF4B0E0D),
});Swift / SwiftUI
import SwiftUI
extension Color {
/// #fa2d2b — Imperial Red
static let imperialRed = Color(
red: 0.9804,
green: 0.1765,
blue: 0.1686
)
}
// UIKit
extension UIColor {
static let imperialRed = UIColor(
red: 0.9804,
green: 0.1765,
blue: 0.1686,
alpha: 1.0
)
}Android
<!-- res/values/colors.xml -->
<resources>
<color name="imperial_red">#FA2D2B</color>
<color name="imperial_red_translucent">#80FA2D2B</color>
</resources>
<!-- Jetpack Compose -->
val ImperialRed = Color(0xFFFA2D2B)JavaScript
export const IMPERIAL_RED = {
hex: "#fa2d2b",
rgb: [250, 45, 43],
hsl: [1, 95, 57],
oklch: "oklch(63.56% 0.2369 27.66)",
};JSON tokens
{
"$schema": "https://design-tokens.org/schema.json",
"imperial-red": {
"$type": "color",
"$value": "#fa2d2b",
"$description": "Imperial Red — generated by ColorVerse AI"
}
}