#A87869 + #5E3A2F + #3B230A + #69A876 + #00626B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A87869

Crimson · Gray · Passion Red

HEX

#A87869

RGB

rgb(168, 120, 105)

HSL

hsl(14, 27%, 54%)

HSB

hsb(14, 38%, 66%)

CMYK

cmyk(0%, 29%, 38%, 34%)

Oklch

oklch(61.7% 0.065 38.1)

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

#5E3A2F

Crimson · DarkOliveGreen · Wine Red

HEX

#5E3A2F

RGB

rgb(94, 58, 47)

HSL

hsl(14, 33%, 28%)

HSB

hsb(14, 50%, 37%)

CMYK

cmyk(0%, 38%, 50%, 63%)

Oklch

oklch(38.8% 0.055 37.7)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#3B230A

Ochre · Black · Cinnamon

HEX

#3B230A

RGB

rgb(59, 35, 10)

HSL

hsl(31, 71%, 14%)

HSB

hsb(31, 83%, 23%)

CMYK

cmyk(0%, 41%, 83%, 77%)

Oklch

oklch(28.1% 0.052 63.6)

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

#69A876

Celadon · CadetBlue · Olive Green

HEX

#69A876

RGB

rgb(105, 168, 118)

HSL

hsl(132, 27%, 54%)

HSB

hsb(132, 38%, 66%)

CMYK

cmyk(38%, 0%, 30%, 34%)

Oklch

oklch(67.5% 0.098 149.7)

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

#00626B

Lake Blue · Teal · Peacock Green

HEX

#00626B

RGB

rgb(0, 98, 107)

HSL

hsl(185, 100%, 21%)

HSB

hsb(185, 100%, 42%)

CMYK

cmyk(100%, 8%, 0%, 58%)

Oklch

oklch(45.3% 0.077 205.8)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A87869

6A9BA9

Analogous

A96A7B

A87869

A9986A

Triadic

A87869

6AA979

796AA9

Split-Comp.

A87869

6AA998

6A7BA9

Tetradic

A87869

7BA96A

6A9BA9

986AA9

Contrast Matrix WCAG 2.1 Contrast

A87869	5E3A2F	3B230A	69A876	00626B
—	2.6 Fail	3.9 AA Large	1.3 Fail	1.9 Fail
2.6 Fail	—	1.5 Fail	3.5 AA Large	1.4 Fail
3.9 AA Large	1.5 Fail	—	5.2 AA	2.1 Fail
1.3 Fail	3.5 AA Large	5.2 AA	—	2.5 Fail
1.9 Fail	1.4 Fail	2.1 Fail	2.5 Fail	—

White BG

3.8AA Large

9.9AAA

14.7AAA

2.8Fail

7.1AAA

Black BG

5.6AA

2.1Fail

1.4Fail

7.5AAA

3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

93936D

4E4E32

313010

848582

2A2B69

Deuteranopia

969A6E

515332

323412

817C85

251D68

Tritanopia

A66F70

5C3434

3A1516

6C8C8E

056767

Achromatopsia

858585

444444

272727

8F8F8F

464646

Shades & Tints Shades & Tints

#A87869

Dark

Light

#5E3A2F

Dark

Light

#3B230A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a87869;
  --color-2: #5e3a2f;
  --color-3: #3b230a;
  --color-4: #69a876;
  --color-5: #00626b;
}

SCSS

$color-1: #a87869;
$color-2: #5e3a2f;
$color-3: #3b230a;
$color-4: #69a876;
$color-5: #00626b;

TAILWIND

colors: {
  'brand-1': '#a87869',
  'brand-2': '#5e3a2f',
  'brand-3': '#3b230a',
  'brand-4': '#69a876',
  'brand-5': '#00626b',
}

RGB Array

[168, 120, 105], [94, 58, 47], [59, 35, 10], [105, 168, 118], [0, 98, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A87869, #5E3A2F, #3B230A, #69A876, #00626B 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: #a87869; --color-2: #5e3a2f; --color-3: #3b230a; --color-4: #69a876; --color-5: #00626b. 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