#329368 + #C4C67B + #339D89 + #7BB58C + #3A4C4C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#329368

Mineral Blue · SeaGreen · Forest Green

HEX

#329368

RGB

rgb(50, 147, 104)

HSL

hsl(153, 49%, 39%)

HSB

hsb(153, 66%, 58%)

CMYK

cmyk(66%, 0%, 29%, 42%)

Oklch

oklch(59.5% 0.112 160.6)

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

#C4C67B

Fresh Green · Tan · Sunflower

HEX

#C4C67B

RGB

rgb(196, 198, 123)

HSL

hsl(62, 40%, 63%)

HSB

hsb(62, 38%, 78%)

CMYK

cmyk(1%, 0%, 38%, 22%)

Oklch

oklch(80.8% 0.097 109.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#339D89

Mineral Blue · MediumSeaGreen · Mint Ice

HEX

#339D89

RGB

rgb(51, 157, 137)

HSL

hsl(169, 51%, 41%)

HSB

hsb(169, 68%, 62%)

CMYK

cmyk(68%, 0%, 13%, 38%)

Oklch

oklch(63.1% 0.100 177.7)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#7BB58C

Celadon · DarkSeaGreen · Olive Green

HEX

#7BB58C

RGB

rgb(123, 181, 140)

HSL

hsl(138, 28%, 60%)

HSB

hsb(138, 32%, 71%)

CMYK

cmyk(32%, 0%, 23%, 29%)

Oklch

oklch(72.2% 0.085 153.1)

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

#3A4C4C

Slate Blue · DarkSlateGray · Mint Ice

HEX

#3A4C4C

RGB

rgb(58, 76, 76)

HSL

hsl(180, 13%, 26%)

HSB

hsb(180, 24%, 30%)

CMYK

cmyk(24%, 0%, 0%, 70%)

Oklch

oklch(40.1% 0.023 196.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

329368

94335F

Analogous

339438

329368

338F94

Triadic

329368

683394

946833

Split-Comp.

329368

94338F

943833

Tetradic

329368

383394

94335F

8F9433

Contrast Matrix WCAG 2.1 Contrast

329368	C4C67B	339D89	7BB58C	3A4C4C
—	2.1 Fail	1.1 Fail	1.6 Fail	2.4 Fail
2.1 Fail	—	1.9 Fail	1.3 Fail	5.1 AA
1.1 Fail	1.9 Fail	—	1.4 Fail	2.7 Fail
1.6 Fail	1.3 Fail	1.4 Fail	—	3.8 AA Large
2.4 Fail	5.1 AA	2.7 Fail	3.8 AA Large	—

White BG

3.8AA Large

1.8Fail

3.3AA Large

2.4Fail

9.1AAA

Black BG

5.5AA

11.7AAA

6.3AA

8.8AAA

2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5C5D72

C5C58D

61628E

949596

42424C

Deuteranopia

564F75

C5C592

5B538F

918C98

413F4C

Tritanopia

377B7C

C49B9F

389293

7E9E9F

3B4C4C

Achromatopsia

717171

BDBDBD

7B7B7B

9F9F9F

474747

Shades & Tints Shades & Tints

#329368

Dark

Light

#C4C67B

Dark

Light

#339D89

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #329368;
  --color-2: #c4c67b;
  --color-3: #339d89;
  --color-4: #7bb58c;
  --color-5: #3a4c4c;
}

SCSS

$color-1: #329368;
$color-2: #c4c67b;
$color-3: #339d89;
$color-4: #7bb58c;
$color-5: #3a4c4c;

TAILWIND

colors: {
  'brand-1': '#329368',
  'brand-2': '#c4c67b',
  'brand-3': '#339d89',
  'brand-4': '#7bb58c',
  'brand-5': '#3a4c4c',
}

RGB Array

[50, 147, 104], [196, 198, 123], [51, 157, 137], [123, 181, 140], [58, 76, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #329368, #C4C67B, #339D89, #7BB58C, #3A4C4C is ideal for: corporate websites, product showcases, portfolios. 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: #329368; --color-2: #c4c67b; --color-3: #339d89; --color-4: #7bb58c; --color-5: #3a4c4c. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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