← Back to Editor

#C48330 · #E2901B · #91AC76 · #B7BB71 · #F1E85C

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C48330

Ochre · Chocolate · Amber Brown

HEX
#C48330
RGB
rgb(196, 131, 48)
HSL
hsl(34, 61%, 48%)
HSB
hsb(34, 76%, 77%)
CMYK
cmyk(0%, 33%, 76%, 23%)
Oklch
oklch(66.2% 0.125 68.6)

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

#E2901B

Ochre · GoldenRod · Amber Brown

HEX
#E2901B
RGB
rgb(226, 144, 27)
HSL
hsl(35, 79%, 50%)
HSB
hsb(35, 88%, 89%)
CMYK
cmyk(0%, 36%, 88%, 11%)
Oklch
oklch(72.1% 0.152 68.0)

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

#91AC76

Celadon · DarkSeaGreen · Olive Green

HEX
#91AC76
RGB
rgb(145, 172, 118)
HSL
hsl(90, 25%, 57%)
HSB
hsb(90, 31%, 67%)
CMYK
cmyk(16%, 0%, 31%, 33%)
Oklch
oklch(71.0% 0.081 129.8)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#B7BB71

Autumn Sage · Tan · Sunflower

HEX
#B7BB71
RGB
rgb(183, 187, 113)
HSL
hsl(63, 35%, 59%)
HSB
hsb(63, 40%, 73%)
CMYK
cmyk(2%, 0%, 40%, 27%)
Oklch
oklch(77.2% 0.097 111.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#F1E85C

Fresh Green · Khaki · Sunflower

HEX
#F1E85C
RGB
rgb(241, 232, 92)
HSL
hsl(56, 84%, 65%)
HSB
hsb(56, 62%, 95%)
CMYK
cmyk(0%, 4%, 62%, 5%)
Oklch
oklch(91.3% 0.158 105.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C48330
3070C5

Analogous

C53A30
C48330
BBC530

Triadic

C48330
30C584
8430C5

Split-Comp.

C48330
30BBC5
3A30C5

Tetradic

C48330
30C53A
3070C5
C530BB

Contrast Matrix WCAG 2.1 Contrast

C48330
E2901B
91AC76
B7BB71
F1E85C
—
1.2
Fail
1.3
Fail
1.6
Fail
2.5
Fail
1.2
Fail
—
1.0
Fail
1.3
Fail
2.0
Fail
1.3
Fail
1.0
Fail
—
1.2
Fail
2.0
Fail
1.6
Fail
1.3
Fail
1.2
Fail
—
1.6
Fail
2.5
Fail
2.0
Fail
2.0
Fail
1.6
Fail
—
White BG
3.2AA Large
2.5Fail
2.5Fail
2.0Fail
1.3Fail
Black BG
6.6AA
8.2AAA
8.4AAA
10.4AAA
16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A744
BEBE37
9D9D83
B9B983
EDED7E

Deuteranopia

ACB149
C3C93E
9B9986
B9B887
EEEE86

Tritanopia

C15457
DE4E53
928D90
B79194
F1999F

Achromatopsia

8D8D8D
9B9B9B
9E9E9E
B1B1B1
DBDBDB

Shades & Tints Shades & Tints

#C48330

Dark
Light

#E2901B

Dark
Light

#91AC76

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c48330;
  --color-2: #e2901b;
  --color-3: #91ac76;
  --color-4: #b7bb71;
  --color-5: #f1e85c;
}

SCSS

$color-1: #c48330;
$color-2: #e2901b;
$color-3: #91ac76;
$color-4: #b7bb71;
$color-5: #f1e85c;

TAILWIND

colors: {
  'brand-1': '#c48330',
  'brand-2': '#e2901b',
  'brand-3': '#91ac76',
  'brand-4': '#b7bb71',
  'brand-5': '#f1e85c',
}

RGB Array

[196, 131, 48], [226, 144, 27], [145, 172, 118], [183, 187, 113], [241, 232, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #C48330, #E2901B, #91AC76, #B7BB71, #F1E85C 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: #c48330; --color-2: #e2901b; --color-3: #91ac76; --color-4: #b7bb71; --color-5: #f1e85c. 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