Sunrise Red · 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

#f02b45rgb(240, 43, 69)hsl(352.1, 86.8%, 55.5%)

Primary dark primaryDark

Pressed state, or primary on dark backgrounds

#c90a24rgb(201, 10, 36)hsl(351.8, 90.5%, 41.4%)

Primary light primaryLight

Tinted surfaces, tag backgrounds, subdued selected states

#f6c8cergb(246, 200, 206)hsl(352.2, 71.9%, 87.5%)

Secondary secondary

Companion to the primary for secondary buttons and icons

#57d986rgb(87, 217, 134)hsl(141.7, 63.1%, 59.6%)

Accent accent

Spot color for badges and highlights

#28f6dargb(40, 246, 218)hsl(171.8, 92%, 56.1%)

Success success

Success toasts and completed states

#1fc163rgb(31, 193, 99)hsl(145.2, 72.3%, 43.9%)

Warning warning

Warnings and pending states

#f5aa14rgb(245, 170, 20)hsl(40, 91.8%, 52%)

Danger danger

Errors, destructive actions and failure states

#f22f21rgb(242, 47, 33)hsl(4, 88.9%, 53.9%)

Text text

Body text color

#2d1f21rgb(45, 31, 33)hsl(351.4, 18.4%, 14.9%)

Page background bg

Page base color

#fbf9f9rgb(251, 249, 249)hsl(0, 20%, 98%)

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 forBest as an accent rather than a large surface: prices, promotions, error states — anything that must be seen first.

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	15.06:1	AAA	AAA
Brand color / page background	3.9:1	AA	AA

Verify this pair in the checker →Compare with other palettes →

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: #f02b45; /* Primary */
  --color-primaryDark: #c90a24; /* Primary dark */
  --color-primaryLight: #f6c8ce; /* Primary light */
  --color-secondary: #57d986; /* Secondary */
  --color-accent: #28f6da; /* Accent */
  --color-success: #1fc163; /* Success */
  --color-warning: #f5aa14; /* Warning */
  --color-danger: #f22f21; /* Danger */
  --color-text: #2d1f21; /* Text */
  --color-bg: #fbf9f9; /* Page background */
}

SCSS variables

$color-primary: #f02b45; // Primary
$color-primaryDark: #c90a24; // Primary dark
$color-primaryLight: #f6c8ce; // Primary light
$color-secondary: #57d986; // Secondary
$color-accent: #28f6da; // Accent
$color-success: #1fc163; // Success
$color-warning: #f5aa14; // Warning
$color-danger: #f22f21; // Danger
$color-text: #2d1f21; // Text
$color-bg: #fbf9f9; // Page background

Tailwind config

// tailwind.config.js: Sunrise Red
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#f02b45',
        'primaryDark': '#c90a24',
        'primaryLight': '#f6c8ce',
        'secondary': '#57d986',
        'accent': '#28f6da',
        'success': '#1fc163',
        'warning': '#f5aa14',
        'danger': '#f22f21',
        'text': '#2d1f21',
        'bg': '#fbf9f9',
      },
    },
  },
};

Machine-readable JSON

{
  "name": "Sunrise Red",
  "platform": "app",
  "tags": [
    "Berry",
    "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": "Best as an accent rather than a large surface: prices, promotions, error states — anything that must be seen first.",
    "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": "#f02b45",
    "primaryDark": "#c90a24",
    "primaryLight": "#f6c8ce",
    "secondary": "#57d986",
    "accent": "#28f6da",
    "success": "#1fc163",
    "warning": "#f5aa14",
    "danger": "#f22f21",
    "text": "#2d1f21",
    "bg": "#fbf9f9"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 15.06,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 3.9,
      "level": "AA"
    }
  }
}