Sunrise Red
Personal finance dashboard · Score 80 ·Excellent
Being light, the lead color wants to cover area; keep the text roles dark enough to hold contrast on top of it. In an app screen this reads best when the brand color is reserved for one primary action per view, so the hierarchy does not turn into a wall of color.
10 color roles
Every color has a defined purpose. Use the buttons on the right to copy it in any format.
primary#f02b45rgb(240, 43, 69)hsl(352.1, 86.8%, 55.5%)primaryDark#c90a24rgb(201, 10, 36)hsl(351.8, 90.5%, 41.4%)primaryLight#f6c8cergb(246, 200, 206)hsl(352.2, 71.9%, 87.5%)secondary#57d986rgb(87, 217, 134)hsl(141.7, 63.1%, 59.6%)accent#28f6dargb(40, 246, 218)hsl(171.8, 92%, 56.1%)success#1fc163rgb(31, 193, 99)hsl(145.2, 72.3%, 43.9%)warning#f5aa14rgb(245, 170, 20)hsl(40, 91.8%, 52%)danger#f22f21rgb(242, 47, 33)hsl(4, 88.9%, 53.9%)text#2d1f21rgb(45, 31, 33)hsl(351.4, 18.4%, 14.9%)bg#fbf9f9rgb(251, 249, 249)hsl(0, 20%, 98%)Editorial review · App
We go through the traps that bite most often on this platform. Every verdict is computed from the color values, not boilerplate.
Thin margin: this struggles on dense screens, so keep it to large or bold text.
No problem here, safe to use as is.
No problem here, safe to use as is.
No problem here, safe to use as is.
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, provided text and borders stay dark enough to hold the contrast.
What it looks like in a real interface
The same palette rendered across all three platforms, the fastest way to judge whether it works.
Sample body copy, used to check how secondary text reads on a card background.
Read more →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 color family and shared tags, so the next one is worth opening.
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 backgroundTailwind 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, provided text and borders stay 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"
}
}
}