Amber#FFB703

Dark Orange#FB8500

Burnt Orange#E85D04

Mahogany#DC2F02

Dark Red#9D0208

Color Palette

#FFB703 · #FB8500 · #E85D04 · #DC2F02 · #9D0208

analogous0 likes

:root {
  --color-1: #FFB703;
  --color-1-rgb: 255, 183, 3;
  --color-1-hsl: 43, 100%, 51%;
  --color-2: #FB8500;
  --color-2-rgb: 251, 133, 0;
  --color-2-hsl: 32, 100%, 49%;
  --color-3: #E85D04;
  --color-3-rgb: 232, 93, 4;
  --color-3-hsl: 23, 97%, 46%;
  --color-4: #DC2F02;
  --color-4-rgb: 220, 47, 2;
  --color-4-hsl: 12, 98%, 44%;
  --color-5: #9D0208;
  --color-5-rgb: 157, 2, 8;
  --color-5-hsl: 358, 97%, 31%;
}

Real World Preview

Get Started

Accessibility

WCAG Accessibility Report

Excellent

#FFB703

On White

1.75:1Fail

On Black

12.03:1AAA

#FB8500

On White

2.48:1Fail

On Black

8.46:1AAA

#E85D04

On White

3.5:1Fail

On Black

6:1AA

#DC2F02

On White

4.72:1AA

On Black

4.45:1Fail

#9D0208

On White

8.59:1AAA

On Black

2.45:1Fail

Contrast ratios calculated per WCAG 2.1. AA requires ≥4.5:1, AAA requires ≥7:1 for normal text.

Palette Variations

Original

☀️

lighter

· Increased lightness, reduced saturation

🌑

darker

· Reduced lightness, increased saturation

🌫️

muted

· Desaturated for a calm, muted look

⚡

vibrant

· Boosted saturation for maximum impact

Best Use Cases for This Palette

This analogous palette featuring Amber, Dark Orange, Burnt Orange works well across a variety of design contexts. Below are some of the most common use cases — click to see curated palettes for each.

SaaS Dashboard →Portfolio Website →Mobile App UI →Startup Landing Page →Blog Website →Ecommerce Website →

Frequently Asked Questions

What are the hex codes in this color palette?

The colors in this palette are: #FFB703, #FB8500, #E85D04, #DC2F02, #9D0208. Copy them individually or export the full palette as CSS variables, Tailwind config, SCSS, or JSON using the Export section above.

What is this color palette good for?

This analogous color palette featuring Amber, Dark Orange, Burnt Orange works well for websites, mobile apps, branding projects, and digital designs. Check the Real World Preview section to see how it looks on buttons, cards, and navigation.

Is this color palette accessible?

Check the Accessibility section below to see WCAG contrast ratios for all color combinations in this palette. Look for combinations that achieve 4.5:1 or higher for text use.

How do I use this palette in Tailwind CSS?

Click "Export for Developers" and select the Tailwind option. You will get a formatted config object ready to paste into your tailwind.config.js file. Each color becomes a utility class in your project.

Explore more: Generate palettes · Check contrast · Tints & shades · All free tools