← Back to Editor

#2B6C54 · #E3AE61 · #D49020 · #C6270C · #2F1805

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#2B6C54

Mineral Blue · DarkSlateGray · Forest Green

HEX
#2B6C54
RGB
rgb(43, 108, 84)
HSL
hsl(158, 43%, 30%)
HSB
hsb(158, 60%, 42%)
CMYK
cmyk(60%, 0%, 22%, 58%)
Oklch
oklch(48.2% 0.077 166.0)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#E3AE61

Ginger · SandyBrown · Warm Sun

HEX
#E3AE61
RGB
rgb(227, 174, 97)
HSL
hsl(36, 70%, 64%)
HSB
hsb(36, 57%, 89%)
CMYK
cmyk(0%, 23%, 57%, 11%)
Oklch
oklch(78.4% 0.113 75.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#D49020

Ochre · GoldenRod · Amber Brown

HEX
#D49020
RGB
rgb(212, 144, 32)
HSL
hsl(37, 74%, 48%)
HSB
hsb(37, 85%, 83%)
CMYK
cmyk(0%, 32%, 85%, 17%)
Oklch
oklch(70.5% 0.141 73.3)

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

#C6270C

Vermilion · FireBrick · Passion Red

HEX
#C6270C
RGB
rgb(198, 39, 12)
HSL
hsl(9, 89%, 41%)
HSB
hsb(9, 94%, 78%)
CMYK
cmyk(0%, 80%, 94%, 22%)
Oklch
oklch(53.6% 0.197 31.7)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#2F1805

Tangerine · Black · Cinnamon

HEX
#2F1805
RGB
rgb(47, 24, 5)
HSL
hsl(27, 81%, 10%)
HSB
hsb(27, 89%, 18%)
CMYK
cmyk(0%, 49%, 89%, 82%)
Oklch
oklch(23.7% 0.048 57.9)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2B6C54
6D2C44

Analogous

2C6D34
2B6C54
2C656D

Triadic

2B6C54
552C6D
6D552C

Split-Comp.

2B6C54
6D2C65
6D342C

Tetradic

2B6C54
342C6D
6D2C44
656D2C

Contrast Matrix WCAG 2.1 Contrast

2B6C54
E3AE61
D49020
C6270C
2F1805
—
3.1
AA Large
2.3
Fail
1.1
Fail
2.7
Fail
3.1
AA Large
—
1.3
Fail
2.8
Fail
8.4
AAA
2.3
Fail
1.3
Fail
—
2.1
Fail
6.2
AA
1.1
Fail
2.8
Fail
2.1
Fail
—
2.9
Fail
2.7
Fail
8.4
AAA
6.2
AA
2.9
Fail
—
White BG
6.2AA
2.0Fail
2.7Fail
5.7AA
16.8AAA
Black BG
3.4AA Large
10.5AAA
7.8AAA
3.7AA Large
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

47485A
CCCC74
B7B63B
818013
25250A

Deuteranopia

433F5B
CFD378
BBC042
8A9614
26280B

Tritanopia

2E5E5F
E08286
D15055
BE1819
2E0D0E

Achromatopsia

565656
B5B5B5
989898
535353
1D1D1D

Shades & Tints Shades & Tints

#2B6C54

Dark
Light

#E3AE61

Dark
Light

#D49020

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2b6c54;
  --color-2: #e3ae61;
  --color-3: #d49020;
  --color-4: #c6270c;
  --color-5: #2f1805;
}

SCSS

$color-1: #2b6c54;
$color-2: #e3ae61;
$color-3: #d49020;
$color-4: #c6270c;
$color-5: #2f1805;

TAILWIND

colors: {
  'brand-1': '#2b6c54',
  'brand-2': '#e3ae61',
  'brand-3': '#d49020',
  'brand-4': '#c6270c',
  'brand-5': '#2f1805',
}

RGB Array

[43, 108, 84], [227, 174, 97], [212, 144, 32], [198, 39, 12], [47, 24, 5]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2B6C54, #E3AE61, #D49020, #C6270C, #2F1805 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #2b6c54; --color-2: #e3ae61; --color-3: #d49020; --color-4: #c6270c; --color-5: #2f1805. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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