Cozy Hearthside Fires, Amber Honey & Terracotta Category: Mood 9,900/mo searches

Warm Tones Palette — HEX Codes, Swatches & UI Palette

Evoking radiant crackling fireplaces, roasted spices, and baked ceramics. A comforting chromatic range radiating hospitality, approachability, and emotional warmth.

Passionate Primary

Crimson Ember

#A72626

Dynamic Warm Accent

Burnt Tangerine

#D35400

Friendly Midtone

Amber Honey

#E67E22

Radiant Sunlight

Golden Saffron

#F39C12

Soothing Light Canvas

Warm Alabaster

#FDF2E9

Open in Web Studio Color Wheel Tint & Shade Scale

Color Swatches & Technical Specifications

Exact color codes, luminance values, and WCAG contrast ratings for each swatch in the Warm Tones Palette.

Crimson Ember

Passionate Primary

HEX #A72626

RGB rgb(167, 38, 38)

HSL hsl(0deg, 63%, 40%)

vs White: 7.12:1 (AAA) vs Black: 2.95:1 (Fail)

Burnt Tangerine

Dynamic Warm Accent

HEX #D35400

RGB rgb(211, 84, 0)

HSL hsl(24deg, 100%, 41%)

vs White: 4.17:1 (AA Large) vs Black: 5.04:1 (AA)

Amber Honey

Friendly Midtone

HEX #E67E22

RGB rgb(230, 126, 34)

HSL hsl(28deg, 80%, 52%)

vs White: 2.85:1 (Fail) vs Black: 7.37:1 (AAA)

Golden Saffron

Radiant Sunlight

HEX #F39C12

RGB rgb(243, 156, 18)

HSL hsl(37deg, 90%, 51%)

vs White: 2.19:1 (Fail) vs Black: 9.58:1 (AAA)

Warm Alabaster

Soothing Light Canvas

HEX #FDF2E9

RGB rgb(253, 242, 233)

HSL hsl(27deg, 83%, 95%)

vs White: 1.1:1 (Fail) vs Black: 19.05:1 (AAA)

UI Design & Color Hierarchy Guide

Proven to stimulate appetite and friendly engagement. Excellent for food blogs, restaurant menus, hospitality portals, and cozy e-commerce platforms.

60% Dominant Base

Use the primary neutral/light swatch (Warm Alabaster) for canvas backgrounds and card surfaces.

30% Structural Secondary

Apply midtones for navigation bars, card headers, borders, and secondary buttons.

10% Accent Callout

Reserve high-saturation focal colors for CTAs, conversion badges, and active state highlights.

WCAG 2.1 Accessibility & Contrast Matrix

Legibility ratings between palette elements and key backgrounds (Lightest: Warm Alabaster | Darkest: Crimson Ember):

Swatch	Contrast vs Light Canvas	Contrast vs Dark Canvas
Crimson Ember (#A72626)	6.46:1 AA	1.0:1 Fail
Burnt Tangerine (#D35400)	3.78:1 AA Large	1.71:1 Fail
Amber Honey (#E67E22)	2.58:1 Fail	2.5:1 Fail
Golden Saffron (#F39C12)	1.99:1 Fail	3.25:1 AA Large
Warm Alabaster (#FDF2E9)	1.0:1 Fail	6.46:1 AA

CSS Custom Properties & Design Tokens

Copy and paste production-ready tokens directly into your CSS stylesheet or Tailwind CSS configuration:

CSS Variables

:root {
  --color-1: #A72626; /* Crimson Ember - Passionate Primary */
  --color-2: #D35400; /* Burnt Tangerine - Dynamic Warm Accent */
  --color-3: #E67E22; /* Amber Honey - Friendly Midtone */
  --color-4: #F39C12; /* Golden Saffron - Radiant Sunlight */
  --color-5: #FDF2E9; /* Warm Alabaster - Soothing Light Canvas */
}

Tailwind CSS Config

{
  colors: {
    'palette-1': '#A72626',
    'palette-2': '#D35400',
    'palette-3': '#E67E22',
    'palette-4': '#F39C12',
    'palette-5': '#FDF2E9'
  }
}

Explore More Curated Color Palettes

Browse seasonal palettes, retro aesthetic color schemes, nature tones, and dark mode themes.

All Color Palettes Named Color Dictionary Interactive Color Wheel