Charcoal Rose · App palette (10 colors, ready to copy)

10 color roles

Every color has a defined purpose. Use the buttons on the right to copy it in any format.

Primary primary

Brand color for primary buttons, selected states and emphasis

#bd827frgb(189, 130, 127)hsl(2.9, 32%, 62%)

Primary dark primaryDark

Pressed state, or primary on dark backgrounds

#a55450rgb(165, 84, 80)hsl(2.8, 34.7%, 48%)

Primary light primaryLight

Tinted surfaces, tag backgrounds, subdued selected states

#f2ededrgb(242, 237, 237)hsl(0, 16.1%, 93.9%)

Secondary secondary

Companion to the primary for secondary buttons and icons

#90bec1rgb(144, 190, 193)hsl(183.7, 28.3%, 66.1%)

Accent accent

Spot color for badges and highlights

#57c1c7rgb(87, 193, 199)hsl(183.2, 50%, 56.1%)

Success success

Success toasts and completed states

#34b76argb(52, 183, 106)hsl(144.7, 55.7%, 46.1%)

Warning warning

Warnings and pending states

#ecab27rgb(236, 171, 39)hsl(40.2, 83.8%, 53.9%)

Danger danger

Errors, destructive actions and failure states

#dc4c41rgb(220, 76, 65)hsl(4.3, 68.9%, 55.9%)

Text text

Body text color

#292323rgb(41, 35, 35)hsl(0, 7.9%, 14.9%)

Page background bg

Page base color

#faf9f9rgb(250, 249, 249)hsl(0, 9.1%, 97.8%)

How to use it

Written by hand for the hue family and lightness of this palette, not assembled from a template.

The lead color is light, so it works well over large areas — just keep text and borders dark enough to hold the contrast.

Good forNaturally urgent, so it suits limited-time offers and calls to action that push people to act now.

Use with careAvoid it as a large background or long-form text color; big areas of red tire the eye.

Pairs withPair with a muted warm beige or charcoal to hold the red back without losing its weight.

Hue family: Red

What it looks like in a real interface

The same palette rendered across all three platforms — the fastest way to judge whether it works.

Live preview · switch platform

9:41

Today

FeaturedNearby

Weekend by the sea

Sample body copy, used to check how secondary text reads on a card background.

Accessibility contrast check

Calculated to WCAG 2.1. AA is the accessibility baseline, AAA the enhanced level.

Foreground / background	Ratio	Body text	Large text
Body text / page background	14.7:1	AAA	AAA
Brand color / page background	3:1	AA	AA

Verify this pair in the checker →

More palettes on this platform

Ranked by colour family and shared tags — the ones worth seeing next.

Export to your project

Four formats, ready to paste. Or fetch them by URL from your tooling or AI agent.

CSS variables

:root {
  --color-primary: #bd827f; /* Primary */
  --color-primaryDark: #a55450; /* Primary dark */
  --color-primaryLight: #f2eded; /* Primary light */
  --color-secondary: #90bec1; /* Secondary */
  --color-accent: #57c1c7; /* Accent */
  --color-success: #34b76a; /* Success */
  --color-warning: #ecab27; /* Warning */
  --color-danger: #dc4c41; /* Danger */
  --color-text: #292323; /* Text */
  --color-bg: #faf9f9; /* Page background */
}

SCSS variables

$color-primary: #bd827f; // Primary
$color-primaryDark: #a55450; // Primary dark
$color-primaryLight: #f2eded; // Primary light
$color-secondary: #90bec1; // Secondary
$color-accent: #57c1c7; // Accent
$color-success: #34b76a; // Success
$color-warning: #ecab27; // Warning
$color-danger: #dc4c41; // Danger
$color-text: #292323; // Text
$color-bg: #faf9f9; // Page background

Tailwind config

// tailwind.config.js: Charcoal Rose
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#bd827f',
        'primaryDark': '#a55450',
        'primaryLight': '#f2eded',
        'secondary': '#90bec1',
        'accent': '#57c1c7',
        'success': '#34b76a',
        'warning': '#ecab27',
        'danger': '#dc4c41',
        'text': '#292323',
        'bg': '#faf9f9',
      },
    },
  },
};

Machine-readable JSON

{
  "name": "Charcoal Rose",
  "platform": "app",
  "tags": [
    "Sunset",
    "Red"
  ],
  "advice": {
    "family": "Red",
    "depth": "The lead color is light, so it works well over large areas — just keep text and borders dark enough to hold the contrast.",
    "muted": null,
    "suit": "Naturally urgent, so it suits limited-time offers and calls to action that push people to act now.",
    "avoid": "Avoid it as a large background or long-form text color; big areas of red tire the eye.",
    "pair": "Pair with a muted warm beige or charcoal to hold the red back without losing its weight."
  },
  "roles": {
    "primary": "#bd827f",
    "primaryDark": "#a55450",
    "primaryLight": "#f2eded",
    "secondary": "#90bec1",
    "accent": "#57c1c7",
    "success": "#34b76a",
    "warning": "#ecab27",
    "danger": "#dc4c41",
    "text": "#292323",
    "bg": "#faf9f9"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 14.7,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 3,
      "level": "AA"
    }
  }
}