#B0574F

Accessibility

4.86:1

Vs white / black

4.86:1 · 4.32:1

Sources

Library color

Codes

Formats

HEX

#b0574f

RGB

rgb(176, 87, 79)

RGBA

rgba(176, 87, 79, 1)

HSL

hsl(5, 38%, 50%)

HSLA

hsla(5, 38%, 50%, 1)

HSV

hsv(5, 55%, 69%)

LAB

lab(47.77% 35.47 21.54)

LCH

lch(47.77% 41.5 31.27)

OKLAB

oklab(0.5633 0.1051 0.0529)

OKLCH

oklch(0.5633 0.1177 26.72)

XYZ

xyz(22.73, 16.61, 9.41)

CMYK

cmyk(0%, 51%, 55%, 31%)

CSS

color: #b0574f;

CSS variable

--color-b0574f: #b0574f;

SCSS

$color-b0574f: #b0574f;

JavaScript

const color = "#b0574f";

TypeScript

const color: string = "#b0574f";

React

style={{ backgroundColor: "#b0574f" }}

JSON

{ "hex": "#b0574f", "rgb": { "r": 176, "g": 87, "b": 79 }, "oklch": "oklch(0.5633 0.1177 26.72)" }

Export

Developer code

css

:root {
  --#b0574f-1: #b0574f;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

red-600

Very different · ΔE 10.9 · #DC2626

Nearest CSS named color

IndianRed

Very different · ΔE 6.77 · #CD5C5C

Nearest Material color

red-700

Very different · ΔE 9.21 · #D32F2F

Nearest Bootstrap color

danger

Very different · ΔE 9.11 · #DC3545

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50ffe4dc 100ffd5cc 200ffbeb4 300faa39a 400e2837a 500c3685f 600a4564e 70085433d 80067312c 9004b201d 950310d0b

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

f8f1f0 f2e3e2 ebd5d3 e5c7c4 deb9b6 d8aba7 d19d98 ca8f8a c4817b bd736c b7655e b0574f a15048 934942 84413b 753a35 67332e 582c28 492421 3b1d1a 2c1614 1d0e0d 0f0707

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f8f1f0 f2e3e2 ebd5d3 e5c7c4 deb9b6 d8aba7 d19d98 ca8f8a c4817b bd736c b7655e

Palette

Shades

Mixed toward black — depth, text, and emphasis

a15048 934942 84413b 753a35 67332e 582c28 492421 3b1d1a 2c1614 1d0e0d 0f0707

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

ac5a53 a85e57 a4615b a0655f 9c6863 986c68 946f6c 907270 8c7674 887978 847d7c

Harmony

Complementary

Opposite on the color wheel for contrast

#B0574FStop 1 #4FA8B0Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#B04F77Stop 1 #B0574FStop 2 #B0884FStop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#B0574FStop 1 #4FB057Stop 2 #574FB0Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#B0574FStop 1 #4FB088Stop 2 #4F77B0Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#462320Stop 1 #7B3D37Stop 2 #B0574FStop 3 #C88984Stop 4 #DFBCB9Stop 5

Using this color

Where #b0574f works

#B0574F (#b0574f) sits in the red family at about 5° hue, 38% saturation, and 50% lightness. Contrast is 4.86:1 on white and 4.32:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: red-600 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

supporting UI accents
text or icons on a white canvas

On a black or near-black UI, #b0574f is 4.32:1. Prefer it as a fill, border, or large heading rather than 16px copy.

Family context: Energy, urgency, passion, and excitement. Often used for CTAs, alerts, and brands that want attention. Common uses still include buttons, charts, and accents in the Red range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Spectrum #B7564E#B7564E Spectrum #AF6455#AF6455 Spectrum #9D4943#9D4943 Spectrum #B24F38#B24F38 Spectrum #B84032#B84032 IndianRed#CD5C5C Spectrum #AC5A3E#AC5A3E Spectrum #CF5544#CF5544 Spectrum #D5443F#D5443F Web Safe #CC6666#CC6666 Fluent Red#D13438 Web Safe #CC3333#CC3333