#BC8F8FRosybrown is a muted, gently desaturated, mid-toned warm red (#BC8F8F).
Rosybrown is a mid-toned, muted, gently desaturated take on red. Colors in this range are commonly associated with energy, urgency and appetite, which makes rosybrown a natural fit for call-to-action buttons, sale badges and anywhere you need immediate attention.
Rosybrown is bright enough that it pairs better with dark text than white: black type on rosybrown hits 7.46:1 — comfortably past the WCAG AA threshold — while white manages only 2.81:1. It shines as a section background, card fill or subtle highlight where a full-strength accent would shout.
For pairings, the complement of rosybrown sits at 180° — #8FBCBC, close to lightblue — and delivers the strongest possible hue contrast; use it sparingly, in roughly a 90/10 split, so the two don't fight. For calmer schemes, the analogous colors 30° to either side keep the same warm temperature, while the triadic pair gives you a balanced three-color palette. All of these are computed for rosybrown in the palettes below, with copy-ready codes.
Every palette below is computed from rosybrown's position on the color wheel (hue 0°). Hover any swatch to see its code; click to copy.
Tints mix rosybrown toward white; shades mix it toward black. Use the scale for hover states, borders and depth without leaving the hue.
WCAG 2.1 requires 4.5:1 for normal text (AA) and 3:1 for large text. Here's how rosybrown performs, plus how it appears under the three main types of dichromatic color blindness (simulated approximation).
| Pairing | Ratio | Normal text | Large text |
|---|---|---|---|
| White text on Rosybrown | 2.81:1 | Fail | Fail |
| Black text on Rosybrown | 7.46:1 | AAA | AAA |
#A9A88F#ABAE8F#BA8F8FCopy-ready snippets. In CSS you can also use the keyword rosybrown directly.
:root {
--rosybrown: #BC8F8F;
--rosybrown-rgb: 188, 143, 143;
--rosybrown-tint: #DAC1C1;
--rosybrown-shade: #674F4F;
}
.btn-rosybrown {
background: var(--rosybrown);
color: #000000;
}@import "tailwindcss";
@theme {
--color-rosybrown: #BC8F8F;
--color-rosybrown-light: #DAC1C1;
--color-rosybrown-dark: #674F4F;
}Generate a complete ramp and semantic roles in the Tailwind color generator.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
rosybrown: { DEFAULT: "#BC8F8F", light: "#DAC1C1", dark: "#674F4F" }
}
}
}
};The closest CSS named colors by perceptual (Lab) distance.