#4A655A + #7B9D83 + #A4B28B + #D4C992 + #E6796A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4A655A

Mineral Blue · DimGray · Forest Green

HEX

#4A655A

RGB

rgb(74, 101, 90)

HSL

hsl(156, 15%, 34%)

HSB

hsb(156, 27%, 40%)

CMYK

cmyk(27%, 0%, 11%, 60%)

Oklch

oklch(48.2% 0.037 167.8)

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

#7B9D83

Celadon · Gray · Olive Green

HEX

#7B9D83

RGB

rgb(123, 157, 131)

HSL

hsl(134, 15%, 55%)

HSB

hsb(134, 22%, 62%)

CMYK

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

Oklch

oklch(66.3% 0.054 151.9)

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

#A4B28B

Willow Green · DarkSeaGreen · Apple Green

HEX

#A4B28B

RGB

rgb(164, 178, 139)

HSL

hsl(82, 20%, 62%)

HSB

hsb(82, 22%, 70%)

CMYK

cmyk(8%, 0%, 22%, 30%)

Oklch

oklch(74.2% 0.056 123.8)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D4C992

Fresh Green · Tan · Sunflower

HEX

#D4C992

RGB

rgb(212, 201, 146)

HSL

hsl(50, 43%, 70%)

HSB

hsb(50, 31%, 83%)

CMYK

cmyk(0%, 5%, 31%, 17%)

Oklch

oklch(83.2% 0.073 98.2)

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

#E6796A

Peach Pink · Salmon · Coral Red

HEX

#E6796A

RGB

rgb(230, 121, 106)

HSL

hsl(7, 71%, 66%)

HSB

hsb(7, 54%, 90%)

CMYK

cmyk(0%, 47%, 54%, 10%)

Oklch

oklch(69.6% 0.138 29.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4A655A

644A54

Analogous

4A644C

4A655A

4A6164

Triadic

4A655A

594A64

64594A

Split-Comp.

4A655A

644A61

644C4A

Tetradic

4A655A

4C4A64

644A54

61644A

Contrast Matrix WCAG 2.1 Contrast

4A655A	7B9D83	A4B28B	D4C992	E6796A
—	2.1 Fail	2.8 Fail	3.8 AA Large	2.2 Fail
2.1 Fail	—	1.3 Fail	1.8 Fail	1.0 Fail
2.8 Fail	1.3 Fail	—	1.3 Fail	1.3 Fail
3.8 AA Large	1.8 Fail	1.3 Fail	—	1.7 Fail
2.2 Fail	1.0 Fail	1.3 Fail	1.7 Fail	—

White BG

6.4AA

3.0AA Large

2.3Fail

1.7Fail

2.9Fail

Black BG

3.3AA Large

7.0AA

9.3AAA

12.6AAA

7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

56565D

8A8A89

AAAA94

CFCF9F

B7B66E

Deuteranopia

54525D

88858B

A9A897

D0D1A3

BDC56E

Tritanopia

4B5F5F

7D8E8F

A59C9E

D3AAAC

E17071

Achromatopsia

5C5C5C

909090

A9A9A9

C6C6C6

989898

Shades & Tints Shades & Tints

#4A655A

Dark

Light

#7B9D83

Dark

Light

#A4B28B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4a655a;
  --color-2: #7b9d83;
  --color-3: #a4b28b;
  --color-4: #d4c992;
  --color-5: #e6796a;
}

SCSS

$color-1: #4a655a;
$color-2: #7b9d83;
$color-3: #a4b28b;
$color-4: #d4c992;
$color-5: #e6796a;

TAILWIND

colors: {
  'brand-1': '#4a655a',
  'brand-2': '#7b9d83',
  'brand-3': '#a4b28b',
  'brand-4': '#d4c992',
  'brand-5': '#e6796a',
}

RGB Array

[74, 101, 90], [123, 157, 131], [164, 178, 139], [212, 201, 146], [230, 121, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4A655A, #7B9D83, #A4B28B, #D4C992, #E6796A 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: #4a655a; --color-2: #7b9d83; --color-3: #a4b28b; --color-4: #d4c992; --color-5: #e6796a. 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