Warm E-commerce color palette

Color codes

	HEX	RGB	HSL	CMYK
			hsl(33, 100%, 96%)	cmyk(0%, 3%, 7%, 0%)
			hsl(32, 98%, 83%)	cmyk(0%, 15%, 33%, 0%)
			hsl(21, 90%, 48%)	cmyk(0%, 62%, 95%, 8%)
			hsl(15, 75%, 28%)	cmyk(0%, 64%, 85%, 51%)
			hsl(24, 10%, 10%)	cmyk(0%, 11%, 18%, 89%)

CSS

:root {
  --warm-e-commerce-1: #FFF7ED;
  --warm-e-commerce-2: #FED7AA;
  --warm-e-commerce-3: #EA580C;
  --warm-e-commerce-4: #7C2D12;
  --warm-e-commerce-5: #1C1917;
}

How these colors work together

This is a monochromatic palette built around a single hue. Overall it reads warm. Lightness spans 86 points, which sets how much contrast you can create.

5 of 10 color pairs reach the 4.5:1 contrast needed for normal text. The most readable pair is ⁦#FFF7ED⁩ on ⁦#1C1917⁩ (16.47:1).

Warm E-commerce — readable text using the best pair.

Suggested applications

Website themes and design systems.
Interface themes: use the lightest color for backgrounds and the darkest for text.
Brand kits, social graphics and presentations.

#shop #orange #warm

Check accessibility Simulate color blindness CSS variables

Frequently asked questions

How do I use the Warm E-commerce palette?

The Warm E-commerce palette has 5 colors. Use one dominant color for large areas, a supporting color for secondary elements and the most saturated color sparingly as an accent.

Which colors in this palette are best for text?

Use ⁦#FFF7ED⁩ on ⁦#1C1917⁩: it has a contrast ratio of 16.47:1.

Can I download this palette?

Yes. Export it as PNG, SVG, CSS variables, JSON or plain text with the buttons above the color table.

Warm E-commerce

Color codes

CSS

How these colors work together

Suggested applications

Frequently asked questions

More palettes