← Back to Editor

#CA5027 · #D7633A · #E8D698 · #BEB951 · #86821F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#CA5027

Tangerine · Chocolate · Amber Brown

HEX
#CA5027
RGB
rgb(202, 80, 39)
HSL
hsl(15, 68%, 47%)
HSB
hsb(15, 81%, 79%)
CMYK
cmyk(0%, 60%, 81%, 21%)
Oklch
oklch(58.7% 0.165 38.1)

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

#D7633A

Tangerine · Chocolate · Warm Sun

HEX
#D7633A
RGB
rgb(215, 99, 58)
HSL
hsl(16, 66%, 54%)
HSB
hsb(16, 73%, 84%)
CMYK
cmyk(0%, 54%, 73%, 16%)
Oklch
oklch(63.5% 0.156 39.4)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#E8D698

Goose Yellow · Khaki · Sunflower

HEX
#E8D698
RGB
rgb(232, 214, 152)
HSL
hsl(47, 63%, 75%)
HSB
hsb(47, 34%, 91%)
CMYK
cmyk(0%, 8%, 34%, 9%)
Oklch
oklch(87.6% 0.082 93.8)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#BEB951

Autumn Sage · SandyBrown · Sunflower

HEX
#BEB951
RGB
rgb(190, 185, 81)
HSL
hsl(57, 46%, 53%)
HSB
hsb(57, 57%, 75%)
CMYK
cmyk(0%, 3%, 57%, 25%)
Oklch
oklch(76.9% 0.126 106.5)

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

#86821F

Autumn Sage · Olive · Honey Gold

HEX
#86821F
RGB
rgb(134, 130, 31)
HSL
hsl(58, 62%, 32%)
HSB
hsb(58, 77%, 53%)
CMYK
cmyk(0%, 3%, 77%, 47%)
Oklch
oklch(59.2% 0.116 107.1)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CA5027
26A1C9

Analogous

C9264F
CA5027
C9A126

Triadic

CA5027
26C94F
4F26C9

Split-Comp.

CA5027
26C9A1
264FC9

Tetradic

CA5027
4FC926
26A1C9
A126C9

Contrast Matrix WCAG 2.1 Contrast

CA5027
D7633A
E8D698
BEB951
86821F
—
1.2
Fail
3.1
AA Large
2.2
Fail
1.1
Fail
1.2
Fail
—
2.5
Fail
1.8
Fail
1.1
Fail
3.1
AA Large
2.5
Fail
—
1.4
Fail
2.8
Fail
2.2
Fail
1.8
Fail
1.4
Fail
—
2.0
Fail
1.1
Fail
1.1
Fail
2.8
Fail
2.0
Fail
—
White BG
4.5AA Large
3.7AA Large
1.4Fail
2.0Fail
4.0AA Large
Black BG
4.7AA
5.7AA
14.5AAA
10.2AAA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

959431
A5A444
E0E0A7
BCBC6A
848437

Deuteranopia

9CA533
ACB446
E1E3AB
BCBD70
85853D

Tritanopia

C4393A
D14C4D
E7B3B5
BE7E82
864A4E

Achromatopsia

707070
818181
D4D4D4
AFAFAF
787878

Shades & Tints Shades & Tints

#CA5027

Dark
Light

#D7633A

Dark
Light

#E8D698

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ca5027;
  --color-2: #d7633a;
  --color-3: #e8d698;
  --color-4: #beb951;
  --color-5: #86821f;
}

SCSS

$color-1: #ca5027;
$color-2: #d7633a;
$color-3: #e8d698;
$color-4: #beb951;
$color-5: #86821f;

TAILWIND

colors: {
  'brand-1': '#ca5027',
  'brand-2': '#d7633a',
  'brand-3': '#e8d698',
  'brand-4': '#beb951',
  'brand-5': '#86821f',
}

RGB Array

[202, 80, 39], [215, 99, 58], [232, 214, 152], [190, 185, 81], [134, 130, 31]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CA5027, #D7633A, #E8D698, #BEB951, #86821F is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ca5027; --color-2: #d7633a; --color-3: #e8d698; --color-4: #beb951; --color-5: #86821f. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 general-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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