#3A8C67 + #A19A1C + #CC6A26 + #CC354E + #332334 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3A8C67

Mineral Blue · SeaGreen · Forest Green

HEX

#3A8C67

RGB

rgb(58, 140, 103)

HSL

hsl(153, 41%, 39%)

HSB

hsb(153, 59%, 55%)

CMYK

cmyk(59%, 0%, 26%, 45%)

Oklch

oklch(57.9% 0.099 161.3)

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

#A19A1C

Autumn Sage · DarkGoldenRod · Honey Gold

HEX

#A19A1C

RGB

rgb(161, 154, 28)

HSL

hsl(57, 70%, 37%)

HSB

hsb(57, 83%, 63%)

CMYK

cmyk(0%, 4%, 83%, 37%)

Oklch

oklch(67.1% 0.136 106.1)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#CC6A26

Tangerine · Chocolate · Amber Brown

HEX

#CC6A26

RGB

rgb(204, 106, 38)

HSL

hsl(25, 69%, 47%)

HSB

hsb(25, 81%, 80%)

CMYK

cmyk(0%, 48%, 81%, 20%)

Oklch

oklch(62.8% 0.146 50.8)

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

#CC354E

Crimson · Crimson · Passion Red

HEX

#CC354E

RGB

rgb(204, 53, 78)

HSL

hsl(350, 60%, 50%)

HSB

hsb(350, 74%, 80%)

CMYK

cmyk(0%, 74%, 62%, 20%)

Oklch

oklch(56.6% 0.186 16.5)

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

#332334

Dark Plum · DarkSlateGray · Dark Purple

HEX

#332334

RGB

rgb(51, 35, 52)

HSL

hsl(296, 20%, 17%)

HSB

hsb(296, 33%, 20%)

CMYK

cmyk(2%, 33%, 0%, 80%)

Oklch

oklch(28.3% 0.038 324.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3A8C67

8C3B5F

Analogous

3B8C3F

3A8C67

3B888C

Triadic

3A8C67

683B8C

8C683B

Split-Comp.

3A8C67

8C3B88

8C3F3B

Tetradic

3A8C67

3F3B8C

8C3B5F

888C3B

Contrast Matrix WCAG 2.1 Contrast

3A8C67	A19A1C	CC6A26	CC354E	332334
—	1.4 Fail	1.1 Fail	1.2 Fail	3.6 AA Large
1.4 Fail	—	1.3 Fail	1.7 Fail	5.0 AA
1.1 Fail	1.3 Fail	—	1.4 Fail	4.0 AA Large
1.2 Fail	1.7 Fail	1.4 Fail	—	2.9 Fail
3.6 AA Large	5.0 AA	4.0 AA Large	2.9 Fail	—

White BG

4.1AA Large

2.9Fail

3.7AA Large

5.0AA

14.7AAA

Black BG

5.1AA

7.2AAA

5.7AA

4.2AA Large

1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5E70

9E9E3A

A2A136

8B8948

2C2C30

Deuteranopia

595372

9E9F42

A7AF3A

939F47

2D2E2F

Tritanopia

3E7779

A15358

C74346

C44342

322D2C

Achromatopsia

6F6F6F

8E8E8E

808080

656565

2A2A2A

Shades & Tints Shades & Tints

#3A8C67

Dark

Light

#A19A1C

Dark

Light

#CC6A26

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3a8c67;
  --color-2: #a19a1c;
  --color-3: #cc6a26;
  --color-4: #cc354e;
  --color-5: #332334;
}

SCSS

$color-1: #3a8c67;
$color-2: #a19a1c;
$color-3: #cc6a26;
$color-4: #cc354e;
$color-5: #332334;

TAILWIND

colors: {
  'brand-1': '#3a8c67',
  'brand-2': '#a19a1c',
  'brand-3': '#cc6a26',
  'brand-4': '#cc354e',
  'brand-5': '#332334',
}

RGB Array

[58, 140, 103], [161, 154, 28], [204, 106, 38], [204, 53, 78], [51, 35, 52]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3A8C67, #A19A1C, #CC6A26, #CC354E, #332334 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: #3a8c67; --color-2: #a19a1c; --color-3: #cc6a26; --color-4: #cc354e; --color-5: #332334. 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