← Back to Editor

#B08D3C · #B09D6A · #7BCFAC · #BAD8BF · #DB7011

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B08D3C

Ochre · DarkGoldenRod · Honey Gold

HEX
#B08D3C
RGB
rgb(176, 141, 60)
HSL
hsl(42, 49%, 46%)
HSB
hsb(42, 66%, 69%)
CMYK
cmyk(0%, 20%, 66%, 31%)
Oklch
oklch(66.0% 0.107 85.5)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#B09D6A

Ginger · Tan · Sunflower

HEX
#B09D6A
RGB
rgb(176, 157, 106)
HSL
hsl(44, 31%, 55%)
HSB
hsb(44, 40%, 69%)
CMYK
cmyk(0%, 11%, 40%, 31%)
Oklch
oklch(70.0% 0.072 89.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#7BCFAC

Jade · MediumAquaMarine · Apple Green

HEX
#7BCFAC
RGB
rgb(123, 207, 172)
HSL
hsl(155, 47%, 65%)
HSB
hsb(155, 41%, 81%)
CMYK
cmyk(41%, 0%, 17%, 19%)
Oklch
oklch(79.1% 0.097 165.5)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#BAD8BF

Celadon · Silver · Apple Green

HEX
#BAD8BF
RGB
rgb(186, 216, 191)
HSL
hsl(130, 28%, 79%)
HSB
hsb(130, 14%, 85%)
CMYK
cmyk(14%, 0%, 12%, 15%)
Oklch
oklch(85.3% 0.047 150.0)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#DB7011

Tangerine · Chocolate · Amber Brown

HEX
#DB7011
RGB
rgb(219, 112, 17)
HSL
hsl(28, 86%, 46%)
HSB
hsb(28, 92%, 86%)
CMYK
cmyk(0%, 49%, 92%, 14%)
Oklch
oklch(65.8% 0.162 53.3)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B08D3C
3C5EAF

Analogous

AF533C
B08D3C
98AF3C

Triadic

B08D3C
3CAF8C
8C3CAF

Split-Comp.

B08D3C
3C98AF
533CAF

Tetradic

B08D3C
3CAF53
3C5EAF
AF3C98

Contrast Matrix WCAG 2.1 Contrast

B08D3C
B09D6A
7BCFAC
BAD8BF
DB7011
—
1.2
Fail
1.7
Fail
2.0
Fail
1.1
Fail
1.2
Fail
—
1.4
Fail
1.7
Fail
1.2
Fail
1.7
Fail
1.4
Fail
—
1.2
Fail
1.8
Fail
2.0
Fail
1.7
Fail
1.2
Fail
—
2.2
Fail
1.1
Fail
1.2
Fail
1.8
Fail
2.2
Fail
—
White BG
3.1AA Large
2.7Fail
1.8Fail
1.5Fail
3.3AA Large
Black BG
6.7AA
7.9AAA
11.4AAA
13.7AAA
6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A150
A8A876
9FA0B4
C7C7C5
ADAC28

Deuteranopia

A3A654
A9AA79
9B94B7
C5C3C7
B3BB2E

Tritanopia

AE5F62
AF8082
7FBBBD
BCCACB
D63A3E

Achromatopsia

8E8E8E
9D9D9D
B2B2B2
CCCCCC
858585

Shades & Tints Shades & Tints

#B08D3C

Dark
Light

#B09D6A

Dark
Light

#7BCFAC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b08d3c;
  --color-2: #b09d6a;
  --color-3: #7bcfac;
  --color-4: #bad8bf;
  --color-5: #db7011;
}

SCSS

$color-1: #b08d3c;
$color-2: #b09d6a;
$color-3: #7bcfac;
$color-4: #bad8bf;
$color-5: #db7011;

TAILWIND

colors: {
  'brand-1': '#b08d3c',
  'brand-2': '#b09d6a',
  'brand-3': '#7bcfac',
  'brand-4': '#bad8bf',
  'brand-5': '#db7011',
}

RGB Array

[176, 141, 60], [176, 157, 106], [123, 207, 172], [186, 216, 191], [219, 112, 17]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #B08D3C, #B09D6A, #7BCFAC, #BAD8BF, #DB7011 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b08d3c; --color-2: #b09d6a; --color-3: #7bcfac; --color-4: #bad8bf; --color-5: #db7011. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This warm-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color