#6F7A36 + #52914A + #3EAA69 + #36A88E + #2EA1AC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#6F7A36

Grass Green · DarkOliveGreen · Forest Green

HEX

#6F7A36

RGB

rgb(111, 122, 54)

HSL

hsl(70, 39%, 35%)

HSB

hsb(70, 56%, 48%)

CMYK

cmyk(9%, 0%, 56%, 52%)

Oklch

oklch(55.5% 0.093 117.2)

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

#52914A

Celadon · SeaGreen · Olive Green

HEX

#52914A

RGB

rgb(82, 145, 74)

HSL

hsl(113, 32%, 43%)

HSB

hsb(113, 49%, 57%)

CMYK

cmyk(43%, 0%, 49%, 43%)

Oklch

oklch(59.7% 0.122 141.5)

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

#3EAA69

Celadon · MediumSeaGreen · Olive Green

HEX

#3EAA69

RGB

rgb(62, 170, 105)

HSL

hsl(144, 47%, 45%)

HSB

hsb(144, 64%, 67%)

CMYK

cmyk(64%, 0%, 38%, 33%)

Oklch

oklch(66.0% 0.138 153.5)

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

#36A88E

Mineral Blue · MediumSeaGreen · Mint Ice

HEX

#36A88E

RGB

rgb(54, 168, 142)

HSL

hsl(166, 51%, 44%)

HSB

hsb(166, 68%, 66%)

CMYK

cmyk(68%, 0%, 15%, 34%)

Oklch

oklch(66.1% 0.109 174.4)

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

#2EA1AC

Lake Blue · LightSeaGreen · Mint Ice

HEX

#2EA1AC

RGB

rgb(46, 161, 172)

HSL

hsl(185, 58%, 43%)

HSB

hsb(185, 73%, 67%)

CMYK

cmyk(73%, 6%, 0%, 33%)

Oklch

oklch(65.2% 0.099 204.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6F7A36

42367C

Analogous

7C6536

6F7A36

4E7C36

Triadic

6F7A36

36707C

7C3670

Split-Comp.

6F7A36

364E7C

65367C

Tetradic

6F7A36

367C65

42367C

7C364E

Contrast Matrix WCAG 2.1 Contrast

6F7A36	52914A	3EAA69	36A88E	2EA1AC
—	1.2 Fail	1.6 Fail	1.6 Fail	1.5 Fail
1.2 Fail	—	1.3 Fail	1.3 Fail	1.2 Fail
1.6 Fail	1.3 Fail	—	1.0 Fail	1.1 Fail
1.6 Fail	1.3 Fail	1.0 Fail	—	1.0 Fail
1.5 Fail	1.2 Fail	1.1 Fail	1.0 Fail	—

White BG

4.7AA

3.8AA Large

2.9Fail

3.1AA Large

Black BG

4.5AA

5.5AA

7.2AAA

7.1AAA

6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

747446

6D6E5B

6D6E79

676894

6061A9

Deuteranopia

73724A

6A655F

675E7D

615896

5951A9

Tritanopia

705356

55696C

438588

3C999A

34A7A7

Achromatopsia

6F6F6F

767676

828282

838383

808080

Shades & Tints Shades & Tints

#6F7A36

Dark

Light

#52914A

Dark

Light

#3EAA69

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6f7a36;
  --color-2: #52914a;
  --color-3: #3eaa69;
  --color-4: #36a88e;
  --color-5: #2ea1ac;
}

SCSS

$color-1: #6f7a36;
$color-2: #52914a;
$color-3: #3eaa69;
$color-4: #36a88e;
$color-5: #2ea1ac;

TAILWIND

colors: {
  'brand-1': '#6f7a36',
  'brand-2': '#52914a',
  'brand-3': '#3eaa69',
  'brand-4': '#36a88e',
  'brand-5': '#2ea1ac',
}

RGB Array

[111, 122, 54], [82, 145, 74], [62, 170, 105], [54, 168, 142], [46, 161, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6F7A36, #52914A, #3EAA69, #36A88E, #2EA1AC 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: #6f7a36; --color-2: #52914a; --color-3: #3eaa69; --color-4: #36a88e; --color-5: #2ea1ac. 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