Warm Orange Isle · App palette (10 colours, ready to copy)

10 colour roles

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

Primary primary

Brand colour for primary buttons, selected states and emphasis

#d96a24rgb(217, 106, 36)hsl(23.2, 71.5%, 49.6%)

Primary dark primaryDark

Pressed state, or primary on dark backgrounds

#a34d14rgb(163, 77, 20)hsl(23.9, 78.1%, 35.9%)

Primary light primaryLight

Tinted surfaces, tag backgrounds, subdued selected states

#fbd4b6rgb(251, 212, 182)hsl(26.1, 89.6%, 84.9%)

Secondary secondary

Companion to the primary for secondary buttons and icons

#2f6e80rgb(47, 110, 128)hsl(193.3, 46.3%, 34.3%)

Accent accent

Spot colour for badges and highlights

#4c6fe0rgb(76, 111, 224)hsl(225.8, 70.5%, 58.8%)

Success success

Success toasts and completed states

#2a8a50rgb(42, 138, 80)hsl(143.8, 53.3%, 35.3%)

Warning warning

Warnings and pending states

#c8860frgb(200, 134, 15)hsl(38.6, 86%, 42.2%)

Danger danger

Errors, destructive actions and failure states

#b8332brgb(184, 51, 43)hsl(3.4, 62.1%, 44.5%)

Text text

Body text colour

#2b2118rgb(43, 33, 24)hsl(28.4, 28.4%, 13.1%)

Page background bg

Page base colour

#fff9f4rgb(255, 249, 244)hsl(27.3, 100%, 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 colour 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 colours 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

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.08:1	AAA	AAA
Brand colour / page background	3.33: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-primary: #d96a24; /* Primary */
  --color-primaryDark: #a34d14; /* Primary dark */
  --color-primaryLight: #fbd4b6; /* Primary light */
  --color-secondary: #2f6e80; /* Secondary */
  --color-accent: #4c6fe0; /* Accent */
  --color-success: #2a8a50; /* Success */
  --color-warning: #c8860f; /* Warning */
  --color-danger: #b8332b; /* Danger */
  --color-text: #2b2118; /* Text */
  --color-bg: #fff9f4; /* Page background */
}

SCSS variables

$color-primary: #d96a24; // Primary
$color-primaryDark: #a34d14; // Primary dark
$color-primaryLight: #fbd4b6; // Primary light
$color-secondary: #2f6e80; // Secondary
$color-accent: #4c6fe0; // Accent
$color-success: #2a8a50; // Success
$color-warning: #c8860f; // Warning
$color-danger: #b8332b; // Danger
$color-text: #2b2118; // Text
$color-bg: #fff9f4; // Page background

Tailwind config

// tailwind.config.js: Warm Orange Isle
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#d96a24',
        'primaryDark': '#a34d14',
        'primaryLight': '#fbd4b6',
        'secondary': '#2f6e80',
        'accent': '#4c6fe0',
        'success': '#2a8a50',
        'warning': '#c8860f',
        'danger': '#b8332b',
        'text': '#2b2118',
        'bg': '#fff9f4',
      },
    },
  },
};

Machine-readable JSON

{
  "name": "Warm Orange Isle",
  "platform": "app",
  "tags": [
    "Vibrant",
    "Calm",
    "Warm tones"
  ],
  "advice": {
    "family": "Orange",
    "depth": "The lead colour 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 colours 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": {
    "primary": "#d96a24",
    "primaryDark": "#a34d14",
    "primaryLight": "#fbd4b6",
    "secondary": "#2f6e80",
    "accent": "#4c6fe0",
    "success": "#2a8a50",
    "warning": "#c8860f",
    "danger": "#b8332b",
    "text": "#2b2118",
    "bg": "#fff9f4"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 15.08,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 3.33,
      "level": "AA"
    }
  }
}

More palettes on this platform