What are the hex codes in the Brass & Burnt Orange Vibe palette?

The Brass & Burnt Orange Vibe color palette consists of Chocolate #7A3300, Burnt Orange #C75B12, Brass #B4B600, Bisque #FFE1C7.

How should I use the Brass & Burnt Orange Vibe palette on a website?

Use Bisque #FFE1C7 as the background, Chocolate #7A3300 for text, Brass #B4B600 for buttons and links, and Burnt Orange #C75B12 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Chocolate on Bisque at 7.32:1.

Which colors in Brass & Burnt Orange Vibe have enough contrast for text?

The highest-contrast pair is #7A3300 on #FFE1C7 with a ratio of 7.32:1, which passes WCAG AA for normal text.

#7A3300Chocolate

#C75B12Burnt Orange

#B4B600Brass

#FFE1C7Bisque

Brass & Burnt Orange Vibe color palette

Gradient Vibrant Warm Orange

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Chocolate	`#7A3300`	`rgb(122, 51, 0)`	`hsl(25, 100%, 24%)`	`oklch(41.3% 0.113 48)`
Burnt Orange	`#C75B12`	`rgb(199, 91, 18)`	`hsl(24, 83%, 43%)`	`oklch(59.6% 0.157 48)`
Brass	`#B4B600`	`rgb(180, 182, 0)`	`hsl(61, 100%, 36%)`	`oklch(75.0% 0.164 111)`
Bisque	`#FFE1C7`	`rgb(255, 225, 199)`	`hsl(28, 100%, 89%)`	`oklch(92.8% 0.048 63)`

Why it works and how to use it

Brass & Burnt Orange Vibe is a vivid analogous color palette tagged gradient, vibrant, warm. Analogous neighbors on the wheel (Chocolate, Burnt Orange, Brass) give it a natural, low-tension flow. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is warm.

With 4 chromatic colors, Brass takes the lead while the rest support. Lightness runs from 24% to 89%. Well suited to websites, presentations and branding.

Background: Bisque (#FFE1C7) is the lightest color, so it belongs on large surfaces.
Text: Chocolate (#7A3300) on #FFE1C7 gives 7.32:1, passing WCAG AAA.
Primary: Brass (#B4B600) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Burnt Orange (#C75B12) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Chocolate on Bisque at 7.32:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Brass & Burnt Orange Vibe

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#7A3300

#C75B12

#B4B600

#FFE1C7

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#7A3300` on `#FFE1C7`	Aa	7.32:1	AAA
`#7A3300` on `#B4B600`	Aa	4.19:1	AA large only
`#C75B12` on `#FFE1C7`	Aa	3.41:1	AA large only
`#7A3300` on `#C75B12`	Aa	2.14:1	Fail
`#C75B12` on `#B4B600`	Aa	1.95:1	Fail
`#B4B600` on `#FFE1C7`	Aa	1.75:1	Fail

:root {
  --chocolate: #7A3300;
  --burnt-orange: #C75B12;
  --brass: #B4B600;
  --bisque: #FFE1C7;
}

$chocolate: #7A3300;
$burnt-orange: #C75B12;
$brass: #B4B600;
$bisque: #FFE1C7;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'chocolate': '#7A3300',
        'burnt-orange': '#C75B12',
        'brass': '#B4B600',
        'bisque': '#FFE1C7',
      },
    },
  },
};

{
  "name": "Brass & Burnt Orange Vibe",
  "colors": [
    "#7A3300",
    "#C75B12",
    "#B4B600",
    "#FFE1C7"
  ]
}

background: linear-gradient(135deg, #7A3300, #C75B12, #B4B600, #FFE1C7);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-07-23 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood