#CB7D2A + #CEAD44 + #A2672B + #563C2D + #29212C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CB7D2A

Ochre · Chocolate · Amber Brown

HEX

#CB7D2A

RGB

rgb(203, 125, 42)

HSL

hsl(31, 66%, 48%)

HSB

hsb(31, 79%, 80%)

CMYK

cmyk(0%, 38%, 79%, 20%)

Oklch

oklch(65.9% 0.134 62.5)

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

#CEAD44

Ginger · GoldenRod · Sunflower

HEX

#CEAD44

RGB

rgb(206, 173, 68)

HSL

hsl(46, 58%, 54%)

HSB

hsb(46, 67%, 81%)

CMYK

cmyk(0%, 16%, 67%, 19%)

Oklch

oklch(75.8% 0.128 91.4)

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

#A2672B

Ochre · Sienna · Amber Brown

HEX

#A2672B

RGB

rgb(162, 103, 43)

HSL

hsl(30, 58%, 40%)

HSB

hsb(30, 73%, 64%)

CMYK

cmyk(0%, 36%, 73%, 36%)

Oklch

oklch(56.7% 0.106 62.9)

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

#563C2D

Tangerine · DarkOliveGreen · Amber Brown

HEX

#563C2D

RGB

rgb(86, 60, 45)

HSL

hsl(22, 31%, 26%)

HSB

hsb(22, 48%, 34%)

CMYK

cmyk(0%, 30%, 48%, 66%)

Oklch

oklch(38.1% 0.044 51.0)

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

#29212C

Dark Plum · DarkSlateGray · Dark Purple

HEX

#29212C

RGB

rgb(41, 33, 44)

HSL

hsl(284, 14%, 15%)

HSB

hsb(284, 25%, 17%)

CMYK

cmyk(7%, 25%, 0%, 83%)

Oklch

oklch(26.2% 0.023 316.8)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CB7D2A

2A78CB

Analogous

CB2C2A

CB7D2A

C8CB2A

Triadic

CB7D2A

2ACB7D

7D2ACB

Split-Comp.

CB7D2A

2AC8CB

2C2ACB

Tetradic

CB7D2A

2ACB2C

2A78CB

CB2AC8

Contrast Matrix WCAG 2.1 Contrast

CB7D2A	CEAD44	A2672B	563C2D	29212C
—	1.5 Fail	1.4 Fail	3.1 AA Large	4.8 AA
1.5 Fail	—	2.1 Fail	4.7 AA	7.2 AAA
1.4 Fail	2.1 Fail	—	2.2 Fail	3.3 AA Large
3.1 AA Large	4.7 AA	2.2 Fail	—	1.5 Fail
4.8 AA	7.2 AAA	3.3 AA Large	1.5 Fail	—

White BG

3.2AA Large

2.2Fail

4.7AA

10.1AAA

15.6AAA

Black BG

6.5AA

9.7AAA

4.5AA

2.1Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A9A93E

C0BF5D

88883A

4B4B31

262529

Deuteranopia

AEB443

C2C464

8C903D

4C4E32

262729

Tritanopia

C74E51

CC7176

9F4548

553334

292727

Achromatopsia

8B8B8B

ABABAB

727272

424242

252525

Shades & Tints Shades & Tints

#CB7D2A

Dark

Light

#CEAD44

Dark

Light

#A2672B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cb7d2a;
  --color-2: #cead44;
  --color-3: #a2672b;
  --color-4: #563c2d;
  --color-5: #29212c;
}

SCSS

$color-1: #cb7d2a;
$color-2: #cead44;
$color-3: #a2672b;
$color-4: #563c2d;
$color-5: #29212c;

TAILWIND

colors: {
  'brand-1': '#cb7d2a',
  'brand-2': '#cead44',
  'brand-3': '#a2672b',
  'brand-4': '#563c2d',
  'brand-5': '#29212c',
}

RGB Array

[203, 125, 42], [206, 173, 68], [162, 103, 43], [86, 60, 45], [41, 33, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CB7D2A, #CEAD44, #A2672B, #563C2D, #29212C is ideal for: tech websites, dark mode UIs, game UIs. 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: #cb7d2a; --color-2: #cead44; --color-3: #a2672b; --color-4: #563c2d; --color-5: #29212c. 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. 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