← Back to Editor

#2A2822 · #CEBC8B · #B19854 · #109D80 · #0E7861

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#2A2822

Ochre · DarkSlateGray · Amber Gold

HEX
#2A2822
RGB
rgb(42, 40, 34)
HSL
hsl(45, 11%, 15%)
HSB
hsb(45, 19%, 16%)
CMYK
cmyk(0%, 5%, 19%, 84%)
Oklch
oklch(27.7% 0.011 91.7)

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

#CEBC8B

Ginger · Tan · Sunflower

HEX
#CEBC8B
RGB
rgb(206, 188, 139)
HSL
hsl(44, 41%, 68%)
HSB
hsb(44, 33%, 81%)
CMYK
cmyk(0%, 9%, 33%, 19%)
Oklch
oklch(79.8% 0.068 90.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#B19854

Ginger · GoldenRod · Sunflower

HEX
#B19854
RGB
rgb(177, 152, 84)
HSL
hsl(44, 37%, 51%)
HSB
hsb(44, 53%, 69%)
CMYK
cmyk(0%, 14%, 53%, 31%)
Oklch
oklch(68.7% 0.093 89.7)

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

#109D80

Mineral Blue · Teal · Mint Ice

HEX
#109D80
RGB
rgb(16, 157, 128)
HSL
hsl(168, 82%, 34%)
HSB
hsb(168, 90%, 62%)
CMYK
cmyk(90%, 0%, 18%, 38%)
Oklch
oklch(62.2% 0.117 173.1)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#0E7861

Mineral Blue · Teal · Mint Ice

HEX
#0E7861
RGB
rgb(14, 120, 97)
HSL
hsl(167, 79%, 26%)
HSB
hsb(167, 88%, 47%)
CMYK
cmyk(88%, 0%, 19%, 53%)
Oklch
oklch(51.2% 0.095 172.6)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2A2822
22242A

Analogous

2A2422
2A2822
282A22

Triadic

2A2822
222A28
28222A

Split-Comp.

2A2822
22282A
24222A

Tetradic

2A2822
222A24
22242A
2A2228

Contrast Matrix WCAG 2.1 Contrast

2A2822
CEBC8B
B19854
109D80
0E7861
—
7.9
AAA
5.3
AA
4.3
AA Large
2.7
Fail
7.9
AAA
—
1.5
Fail
1.8
Fail
2.9
Fail
5.3
AA
1.5
Fail
—
1.2
Fail
1.9
Fail
4.3
AA Large
1.8
Fail
1.2
Fail
—
1.6
Fail
2.7
Fail
2.9
Fail
1.9
Fail
1.6
Fail
—
White BG
14.7AAA
1.9Fail
2.8Fail
3.4AA Large
5.4AA
Black BG
1.4Fail
11.2AAA
7.5AAA
6.2AA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

292923
C6C697
A6A664
4D4E87
3C3D67

Deuteranopia

292924
C7C99A
A8AA68
453A89
362E68

Tritanopia

2A2525
CDA0A2
B07174
178D8E
136B6C

Achromatopsia

282828
BCBCBC
989898
707070
565656

Shades & Tints Shades & Tints

#2A2822

Dark
Light

#CEBC8B

Dark
Light

#B19854

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2a2822;
  --color-2: #cebc8b;
  --color-3: #b19854;
  --color-4: #109d80;
  --color-5: #0e7861;
}

SCSS

$color-1: #2a2822;
$color-2: #cebc8b;
$color-3: #b19854;
$color-4: #109d80;
$color-5: #0e7861;

TAILWIND

colors: {
  'brand-1': '#2a2822',
  'brand-2': '#cebc8b',
  'brand-3': '#b19854',
  'brand-4': '#109d80',
  'brand-5': '#0e7861',
}

RGB Array

[42, 40, 34], [206, 188, 139], [177, 152, 84], [16, 157, 128], [14, 120, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2A2822, #CEBC8B, #B19854, #109D80, #0E7861 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #2a2822; --color-2: #cebc8b; --color-3: #b19854; --color-4: #109d80; --color-5: #0e7861. 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 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