#8A4E52 Tuscan Red
rgb(138, 78, 82)
Color conversions
- HEX
- #8A4E52
- RGB
- rgb(138, 78, 82)
- RGBA
- rgba(138, 78, 82, 1)
- HSL
- hsl(356, 28%, 42%)
- HSV / HSB
- hsv(356, 43%, 54%)
- CMYK
- cmyk(0%, 43%, 41%, 46%)
Wide-gamut spaces
- XYZ
- xyz(14.729, 11.463, 9.418)
- LAB
- lab(40.35 25.68 8.7)
- LCH
- lch(40.35 27.12 18.72)
- OKLAB
- oklab(49.56% 0.0777 0.0225)
- OKLCH
- oklch(49.56% 0.0809 16.17)
- Nearest name
- Tuscan 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
#8a4e521a
#8a4e5233
#8a4e524d
#8a4e5266
#8a4e5280
#8a4e5299
#8a4e52b3
#8a4e52cc
#8a4e52e6
#8a4e52ff
Accessibility and contrast
On white
6.38:1
Body text AA · Large text AA
On black
3.29:1
Body text AA Large · Large text AA
White-on-color contrast is 6.38: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-tuscan-red: #8a4e52;
--color-tuscan-red-rgb: 138 78 82;
--color-tuscan-red-hsl: 356 28% 42%;
--color-tuscan-red-oklch: 49.56% 0.0809 16.17;
}
.element {
color: #8a4e52;
background-color: hsl(356, 28%, 42%);
border: 1px solid rgb(138 78 82 / 40%);
}SCSS
$tuscan-red: #8a4e52;
$tuscan-red-light: #c5a7a9;
$tuscan-red-dark: #452729;
.element {
color: $tuscan-red;
background: rgba($tuscan-red, 0.12);
&:hover {
color: darken($tuscan-red, 8%);
}
}LESS
@tuscan-red: #8a4e52;
@tuscan-red-light: lighten(@tuscan-red, 12%);
@tuscan-red-dark: darken(@tuscan-red, 12%);
.element {
color: @tuscan-red;
background: fade(@tuscan-red, 12%);
}Tailwind CSS
/* Tailwind v4 — src/styles.css */
@theme {
--color-tuscan-red-50: #e8dcdc;
--color-tuscan-red-100: #dccacb;
--color-tuscan-red-200: #d0b8ba;
--color-tuscan-red-300: #b99597;
--color-tuscan-red-400: #a17175;
--color-tuscan-red-500: #8a4e52;
--color-tuscan-red-600: #7c464a;
--color-tuscan-red-700: #613739;
--color-tuscan-red-800: #452729;
--color-tuscan-red-900: #291719;
}
/* Usage */
<div class="bg-tuscan-red-500 text-tuscan-red-50 ring-tuscan-red-600" />
/* Arbitrary value, no config needed */
<div class="bg-[#8a4e52]" />Bootstrap
// Bootstrap 5 — _variables.scss (before importing bootstrap)
$tuscan-red: #8a4e52;
$primary: $tuscan-red;
$theme-colors: map-merge($theme-colors, (
"tuscan-red": $tuscan-red
));
// Generates .text-tuscan-red, .bg-tuscan-red, .btn-tuscan-red
@import "bootstrap/scss/bootstrap";Flutter
import 'package:flutter/material.dart';
const Color tuscanRed = Color(0xFF8A4E52);
// As a MaterialColor swatch
const MaterialColor tuscanRedSwatch = MaterialColor(0xFF8A4E52, <int, Color>{
50: Color(0xFFE8DCDC),
100: Color(0xFFDCCACB),
200: Color(0xFFD0B8BA),
300: Color(0xFFB99597),
400: Color(0xFFA17175),
500: Color(0xFF8A4E52),
600: Color(0xFF7C464A),
700: Color(0xFF613739),
800: Color(0xFF452729),
900: Color(0xFF291719),
});Swift / SwiftUI
import SwiftUI
extension Color {
/// #8a4e52 — Tuscan Red
static let tuscanRed = Color(
red: 0.5412,
green: 0.3059,
blue: 0.3216
)
}
// UIKit
extension UIColor {
static let tuscanRed = UIColor(
red: 0.5412,
green: 0.3059,
blue: 0.3216,
alpha: 1.0
)
}Android
<!-- res/values/colors.xml -->
<resources>
<color name="tuscan_red">#8A4E52</color>
<color name="tuscan_red_translucent">#808A4E52</color>
</resources>
<!-- Jetpack Compose -->
val TuscanRed = Color(0xFF8A4E52)JavaScript
export const TUSCAN_RED = {
hex: "#8a4e52",
rgb: [138, 78, 82],
hsl: [356, 28, 42],
oklch: "oklch(49.56% 0.0809 16.17)",
};JSON tokens
{
"$schema": "https://design-tokens.org/schema.json",
"tuscan-red": {
"$type": "color",
"$value": "#8a4e52",
"$description": "Tuscan Red — generated by ColorVerse AI"
}
}