#0ACC7C + #529C53 + #7E643B + #7D3835 + #3C111F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#0ACC7C

Mineral Blue · MediumSpringGreen · Olive Green

HEX

#0ACC7C

RGB

rgb(10, 204, 124)

HSL

hsl(155, 91%, 42%)

HSB

hsb(155, 95%, 80%)

CMYK

cmyk(95%, 0%, 39%, 20%)

Oklch

oklch(74.4% 0.177 156.5)

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

#529C53

Celadon · SeaGreen · Olive Green

HEX

#529C53

RGB

rgb(82, 156, 83)

HSL

hsl(121, 31%, 47%)

HSB

hsb(121, 47%, 61%)

CMYK

cmyk(47%, 0%, 47%, 39%)

Oklch

oklch(62.7% 0.130 144.1)

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

#7E643B

Ochre · Sienna · Amber Brown

HEX

#7E643B

RGB

rgb(126, 100, 59)

HSL

hsl(37, 36%, 36%)

HSB

hsb(37, 53%, 49%)

CMYK

cmyk(0%, 21%, 53%, 51%)

Oklch

oklch(51.9% 0.066 77.9)

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

#7D3835

Crimson · Brown · Wine Red

HEX

#7D3835

RGB

rgb(125, 56, 53)

HSL

hsl(2, 40%, 35%)

HSB

hsb(2, 58%, 49%)

CMYK

cmyk(0%, 55%, 58%, 51%)

Oklch

oklch(43.2% 0.097 24.4)

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

#3C111F

Dark Violet · Black · Raspberry

HEX

#3C111F

RGB

rgb(60, 17, 31)

HSL

hsl(340, 56%, 15%)

HSB

hsb(340, 72%, 24%)

CMYK

cmyk(0%, 72%, 48%, 76%)

Oklch

oklch(25.3% 0.069 3.2)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0ACC7C

CD0A5B

Analogous

0ACD1A

0ACC7C

0ABCCD

Triadic

0ACC7C

7B0ACD

CD7B0A

Split-Comp.

0ACC7C

CD0ABC

CD1A0A

Tetradic

0ACC7C

1A0ACD

CD0A5B

BCCD0A

Contrast Matrix WCAG 2.1 Contrast

0ACC7C	529C53	7E643B	7D3835	3C111F
—	1.6 Fail	2.6 Fail	4.0 AA Large	7.7 AAA
1.6 Fail	—	1.7 Fail	2.5 Fail	4.8 AA
2.6 Fail	1.7 Fail	—	1.5 Fail	2.9 Fail
4.0 AA Large	2.5 Fail	1.5 Fail	—	1.9 Fail
7.7 AAA	4.8 AA	2.9 Fail	1.9 Fail	—

White BG

2.1Fail

3.4AA Large

5.6AA

8.4AAA

16.3AAA

Black BG

9.9AAA

6.2AA

3.8AA Large

2.5Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E608F

727365

737345

5F5F36

29291C

Deuteranopia

534494

6E6869

747647

636836

2C2F1B

Tritanopia

149FA2

567376

7D4D4E

7A3636

3A1918

Achromatopsia

898989

7E7E7E

676767

4C4C4C

1F1F1F

Shades & Tints Shades & Tints

#0ACC7C

Dark

Light

#529C53

Dark

Light

#7E643B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0acc7c;
  --color-2: #529c53;
  --color-3: #7e643b;
  --color-4: #7d3835;
  --color-5: #3c111f;
}

SCSS

$color-1: #0acc7c;
$color-2: #529c53;
$color-3: #7e643b;
$color-4: #7d3835;
$color-5: #3c111f;

TAILWIND

colors: {
  'brand-1': '#0acc7c',
  'brand-2': '#529c53',
  'brand-3': '#7e643b',
  'brand-4': '#7d3835',
  'brand-5': '#3c111f',
}

RGB Array

[10, 204, 124], [82, 156, 83], [126, 100, 59], [125, 56, 53], [60, 17, 31]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0ACC7C, #529C53, #7E643B, #7D3835, #3C111F 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: #0acc7c; --color-2: #529c53; --color-3: #7e643b; --color-4: #7d3835; --color-5: #3c111f. 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