Warm Ember · Mini 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.

Theme theme

Global theme color (navigation bar, selected tab)

#cb7c48rgb(203, 124, 72)hsl(23.8, 55.7%, 53.9%)

Button btn

Primary button background

#cb7c48rgb(203, 124, 72)hsl(23.8, 55.7%, 53.9%)

Button disabled btnDisabled

Disabled button background

#ead8ccrgb(234, 216, 204)hsl(24, 41.7%, 85.9%)

Page background bg

Page backgroundColor

#fafaf9rgb(250, 250, 249)hsl(60, 9.1%, 97.8%)

Card card

Product and content card background

#f6f5f4rgb(246, 245, 244)hsl(30, 10%, 96.1%)

Text main textMain

Headings and body copy

#292623rgb(41, 38, 35)hsl(30, 7.9%, 14.9%)

Text sub textSub

Captions and timestamps

#7c716argb(124, 113, 106)hsl(23.3, 7.8%, 45.1%)

Divider divider

List dividers

#e8e5e3rgb(232, 229, 227)hsl(24, 9.8%, 90%)

Price price

Prices and promotional figures, usually warm

#b71f1frgb(183, 31, 31)hsl(0, 71%, 42%)

Tag tag

Tag and coupon backgrounds

#71bf69rgb(113, 191, 105)hsl(114.4, 40.2%, 58%)

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.

Good forCalmer than red and steadier than yellow — good when you want warmth without shouting.

Use with careBeside saturated red or yellow the warm colors fight for attention — keep a single warm lead.

Pairs withDeep blue grounds it instantly; pale wood tones and cream give it a domestic feel.

Hue family: Orange

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

Mini App Store•••

Sample product500 g · pack

$39.90

Sample product1 kg · pack

$68.00

Buy nowSold out

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.41:1	AAA	AAA
Body text / card background	13.82:1	AAA	AAA
Brand color / page background	3.09:1	AA	AA

Verify this pair in the checker →

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: #cb7c48; /* Theme */
  --color-btn: #cb7c48; /* Button */
  --color-btnDisabled: #ead8cc; /* Button disabled */
  --color-bg: #fafaf9; /* Page background */
  --color-card: #f6f5f4; /* Card */
  --color-textMain: #292623; /* Text main */
  --color-textSub: #7c716a; /* Text sub */
  --color-divider: #e8e5e3; /* Divider */
  --color-price: #b71f1f; /* Price */
  --color-tag: #71bf69; /* Tag */
}

SCSS variables

$color-theme: #cb7c48; // Theme
$color-btn: #cb7c48; // Button
$color-btnDisabled: #ead8cc; // Button disabled
$color-bg: #fafaf9; // Page background
$color-card: #f6f5f4; // Card
$color-textMain: #292623; // Text main
$color-textSub: #7c716a; // Text sub
$color-divider: #e8e5e3; // Divider
$color-price: #b71f1f; // Price
$color-tag: #71bf69; // Tag

Tailwind config

// tailwind.config.js: Warm Ember
module.exports = {
  theme: {
    extend: {
      colors: {
        'theme': '#cb7c48',
        'btn': '#cb7c48',
        'btnDisabled': '#ead8cc',
        'bg': '#fafaf9',
        'card': '#f6f5f4',
        'textMain': '#292623',
        'textSub': '#7c716a',
        'divider': '#e8e5e3',
        'price': '#b71f1f',
        'tag': '#71bf69',
      },
    },
  },
};

Machine-readable JSON

{
  "name": "Warm Ember",
  "platform": "miniapp",
  "tags": [
    "Morandi",
    "Orange"
  ],
  "advice": {
    "family": "Orange",
    "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": "Calmer than red and steadier than yellow — good when you want warmth without shouting.",
    "avoid": "Beside saturated red or yellow the warm colors fight for attention — keep a single warm lead.",
    "pair": "Deep blue grounds it instantly; pale wood tones and cream give it a domestic feel."
  },
  "roles": {
    "theme": "#cb7c48",
    "btn": "#cb7c48",
    "btnDisabled": "#ead8cc",
    "bg": "#fafaf9",
    "card": "#f6f5f4",
    "textMain": "#292623",
    "textSub": "#7c716a",
    "divider": "#e8e5e3",
    "price": "#b71f1f",
    "tag": "#71bf69"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 14.41,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 3.09,
      "level": "AA"
    },
    "textOnSurface": {
      "ratio": 13.82,
      "level": "AAA"
    }
  }
}

More palettes on this platform