Dusk Ember
Homestay booking · Score 86 ·Excellent
Sitting mid-range in lightness, the lead color adapts to both light and dark themes with little adjustment. Inside a mini app it holds up when the theme color drives pill buttons and the price and badge colors stay one step apart.
10 color roles
Every color has a defined purpose. Use the buttons on the right to copy it in any format.
theme#cd4254rgb(205, 66, 84)hsl(352.2, 58.2%, 53.1%)btn#cd4254rgb(205, 66, 84)hsl(352.2, 58.2%, 53.1%)btnDisabled#eac8cdrgb(234, 200, 205)hsl(351.2, 44.7%, 85.1%)bg#fbf9f9rgb(251, 249, 249)hsl(0, 20%, 98%)card#f7f3f3rgb(247, 243, 243)hsl(0, 20%, 96.1%)textMain#2d1f21rgb(45, 31, 33)hsl(351.4, 18.4%, 14.9%)textSub#856065rgb(133, 96, 101)hsl(351.9, 16.2%, 44.9%)divider#eae1e3rgb(234, 225, 227)hsl(346.7, 17.6%, 90%)price#b41e1ergb(180, 30, 30)hsl(0, 71.4%, 41.2%)tag#64c085rgb(100, 192, 133)hsl(141.5, 42.2%, 57.3%)Editorial review · Mini App
We go through the traps that bite most often on this platform. Every verdict is computed from the color values, not boilerplate.
No problem here, safe to use as is.
No problem here, safe to use as is.
No problem here, safe to use as is.
The gap is small. Separate them with lightness or an icon as well, rather than hue alone.
How to use it
Written by hand for the hue family and lightness of this palette, not assembled from a template.
The lead color sits in the middle of the lightness range, which makes it the most adaptable: both light and dark themes are easy to build on.
What it looks like in a real interface
The same palette rendered across all three platforms, the fastest way to judge whether it works.
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 |
| Body text / card background | 14.34:1 | AAA | AAA |
| Brand color / page background | 4.45:1 | AA | AA |
Verify this pair in the checker →Compare with other palettes →Site-wide accessibility report →
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-theme: #cd4254; /* Theme */
--color-btn: #cd4254; /* Button */
--color-btnDisabled: #eac8cd; /* Button disabled */
--color-bg: #fbf9f9; /* Page background */
--color-card: #f7f3f3; /* Card */
--color-textMain: #2d1f21; /* Text main */
--color-textSub: #856065; /* Text sub */
--color-divider: #eae1e3; /* Divider */
--color-price: #b41e1e; /* Price */
--color-tag: #64c085; /* Tag */
}SCSS variables
$color-theme: #cd4254; // Theme
$color-btn: #cd4254; // Button
$color-btnDisabled: #eac8cd; // Button disabled
$color-bg: #fbf9f9; // Page background
$color-card: #f7f3f3; // Card
$color-textMain: #2d1f21; // Text main
$color-textSub: #856065; // Text sub
$color-divider: #eae1e3; // Divider
$color-price: #b41e1e; // Price
$color-tag: #64c085; // TagTailwind config
// tailwind.config.js: Dusk Ember
module.exports = {
theme: {
extend: {
colors: {
'theme': '#cd4254',
'btn': '#cd4254',
'btnDisabled': '#eac8cd',
'bg': '#fbf9f9',
'card': '#f7f3f3',
'textMain': '#2d1f21',
'textSub': '#856065',
'divider': '#eae1e3',
'price': '#b41e1e',
'tag': '#64c085',
},
},
},
};Machine-readable JSON
{
"name": "Dusk Ember",
"platform": "miniapp",
"tags": [
"Calm",
"Red"
],
"advice": {
"family": "Red",
"depth": "The lead color sits in the middle of the lightness range, which makes it the most adaptable: both light and dark themes are easy to build on.",
"muted": null,
"suit": "Best as an accent rather than a large surface: prices, promotions, error states, anything that must be seen first.",
"avoid": "Use it sparingly in finance and healthcare, where it can read as aggressive rather than trustworthy.",
"pair": "Safest with neutral grays and white. Keep blue for confirmation and reserve red for danger and emphasis."
},
"roles": {
"theme": "#cd4254",
"btn": "#cd4254",
"btnDisabled": "#eac8cd",
"bg": "#fbf9f9",
"card": "#f7f3f3",
"textMain": "#2d1f21",
"textSub": "#856065",
"divider": "#eae1e3",
"price": "#b41e1e",
"tag": "#64c085"
},
"contrast": {
"textOnBg": {
"ratio": 15.06,
"level": "AAA"
},
"primaryOnBg": {
"ratio": 4.45,
"level": "AA"
},
"textOnSurface": {
"ratio": 14.34,
"level": "AAA"
}
}
}