#DC855A + #328C4E + #007057 + #51425F + #A23643 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DC855A

Apricot · Coral · Warm Sun

HEX

#DC855A

RGB

rgb(220, 133, 90)

HSL

hsl(20, 65%, 61%)

HSB

hsb(20, 59%, 86%)

CMYK

cmyk(0%, 40%, 59%, 14%)

Oklch

oklch(70.0% 0.122 46.4)

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

#328C4E

Celadon · SeaGreen · Forest Green

HEX

#328C4E

RGB

rgb(50, 140, 78)

HSL

hsl(139, 47%, 37%)

HSB

hsb(139, 64%, 55%)

CMYK

cmyk(64%, 0%, 44%, 45%)

Oklch

oklch(57.1% 0.127 150.5)

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

#007057

Mineral Blue · Teal · Peacock Green

HEX

#007057

RGB

rgb(0, 112, 87)

HSL

hsl(167, 100%, 22%)

HSB

hsb(167, 100%, 44%)

CMYK

cmyk(100%, 0%, 22%, 56%)

Oklch

oklch(48.5% 0.096 170.4)

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

#51425F

Dark Plum · DarkSlateGray · Eggplant

HEX

#51425F

RGB

rgb(81, 66, 95)

HSL

hsl(271, 18%, 32%)

HSB

hsb(271, 31%, 37%)

CMYK

cmyk(15%, 31%, 0%, 63%)

Oklch

oklch(40.7% 0.051 307.8)

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

#A23643

Crimson · Brown · Passion Red

HEX

#A23643

RGB

rgb(162, 54, 67)

HSL

hsl(353, 50%, 42%)

HSB

hsb(353, 67%, 64%)

CMYK

cmyk(0%, 67%, 59%, 36%)

Oklch

oklch(49.3% 0.142 17.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DC855A

5BB1DC

Analogous

DC5B70

DC855A

DCC75B

Triadic

DC855A

5BDC86

865BDC

Split-Comp.

DC855A

5BDCC7

5B70DC

Tetradic

DC855A

70DC5B

5BB1DC

C75BDC

Contrast Matrix WCAG 2.1 Contrast

DC855A	328C4E	007057	51425F	A23643
—	1.5 Fail	2.2 Fail	3.3 AA Large	2.4 Fail
1.5 Fail	—	1.4 Fail	2.2 Fail	1.6 Fail
2.2 Fail	1.4 Fail	—	1.5 Fail	1.1 Fail
3.3 AA Large	2.2 Fail	1.5 Fail	—	1.4 Fail
2.4 Fail	1.6 Fail	1.1 Fail	1.4 Fail	—

White BG

2.8Fail

4.2AA Large

6.1AA

9.2AAA

6.7AA

Black BG

7.5AAA

5.0AA

3.5AA Large

2.3Fail

3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B664

595A5D

30325D

4B4A58

737240

Deuteranopia

BBC267

544D61

2A225F

4B4D56

7A823F

Tritanopia

D86D6E

37696B

066263

505251

9D3D3D

Achromatopsia

9A9A9A

6A6A6A

4C4C4C

4A4A4A

585858

Shades & Tints Shades & Tints

#DC855A

Dark

Light

#328C4E

Dark

Light

#007057

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dc855a;
  --color-2: #328c4e;
  --color-3: #007057;
  --color-4: #51425f;
  --color-5: #a23643;
}

SCSS

$color-1: #dc855a;
$color-2: #328c4e;
$color-3: #007057;
$color-4: #51425f;
$color-5: #a23643;

TAILWIND

colors: {
  'brand-1': '#dc855a',
  'brand-2': '#328c4e',
  'brand-3': '#007057',
  'brand-4': '#51425f',
  'brand-5': '#a23643',
}

RGB Array

[220, 133, 90], [50, 140, 78], [0, 112, 87], [81, 66, 95], [162, 54, 67]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DC855A, #328C4E, #007057, #51425F, #A23643 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: #dc855a; --color-2: #328c4e; --color-3: #007057; --color-4: #51425f; --color-5: #a23643. 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