#5C8A7B + #AABF93 + #C9BFA5 + #FF5B1A + #78414E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5C8A7B

Mineral Blue · SlateGray · Mint Ice

HEX

#5C8A7B

RGB

rgb(92, 138, 123)

HSL

hsl(160, 20%, 45%)

HSB

hsb(160, 33%, 54%)

CMYK

cmyk(33%, 0%, 11%, 46%)

Oklch

oklch(59.6% 0.055 171.9)

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

#AABF93

Willow Green · DarkSeaGreen · Apple Green

HEX

#AABF93

RGB

rgb(170, 191, 147)

HSL

hsl(89, 26%, 66%)

HSB

hsb(89, 23%, 75%)

CMYK

cmyk(11%, 0%, 23%, 25%)

Oklch

oklch(77.7% 0.065 128.6)

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

#C9BFA5

Goose Yellow · Silver · Sunflower

HEX

#C9BFA5

RGB

rgb(201, 191, 165)

HSL

hsl(43, 25%, 72%)

HSB

hsb(43, 18%, 79%)

CMYK

cmyk(0%, 5%, 18%, 21%)

Oklch

oklch(80.6% 0.037 89.5)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#FF5B1A

Tangerine · OrangeRed · Warm Sun

HEX

#FF5B1A

RGB

rgb(255, 91, 26)

HSL

hsl(17, 100%, 55%)

HSB

hsb(17, 90%, 100%)

CMYK

cmyk(0%, 64%, 90%, 0%)

Oklch

oklch(68.3% 0.211 38.5)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#78414E

Crimson · DimGray · Wine Red

HEX

#78414E

RGB

rgb(120, 65, 78)

HSL

hsl(346, 30%, 36%)

HSB

hsb(346, 46%, 47%)

CMYK

cmyk(0%, 46%, 35%, 53%)

Oklch

oklch(44.7% 0.077 5.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C8A7B

8A5C6B

Analogous

5C8A63

5C8A7B

5C828A

Triadic

5C8A7B

7A5C8A

8A7A5C

Split-Comp.

5C8A7B

8A5C82

8A635C

Tetradic

5C8A7B

635C8A

8A5C6B

828A5C

Contrast Matrix WCAG 2.1 Contrast

5C8A7B	AABF93	C9BFA5	FF5B1A	78414E
—	2.0 Fail	2.1 Fail	1.3 Fail	2.0 Fail
2.0 Fail	—	1.1 Fail	1.6 Fail	4.0 AA Large
2.1 Fail	1.1 Fail	—	1.7 Fail	4.3 AA Large
1.3 Fail	1.6 Fail	1.7 Fail	—	2.5 Fail
2.0 Fail	4.0 AA Large	4.3 AA Large	2.5 Fail	—

White BG

3.9AA Large

2.0Fail

1.8Fail

3.1AA Large

7.9AAA

Black BG

5.4AA

10.6AAA

11.5AAA

6.8AA

2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

70707F

B3B39E

C5C5AB

B8B72A

60604B

Deuteranopia

6D6A80

B2B0A0

C5C6AD

C2CE2E

63684A

Tritanopia

5E8182

ABA6A8

C9B0B1

F73639

754848

Achromatopsia

7B7B7B

B4B4B4

BFBFBF

858585

535353

Shades & Tints Shades & Tints

#5C8A7B

Dark

Light

#AABF93

Dark

Light

#C9BFA5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c8a7b;
  --color-2: #aabf93;
  --color-3: #c9bfa5;
  --color-4: #ff5b1a;
  --color-5: #78414e;
}

SCSS

$color-1: #5c8a7b;
$color-2: #aabf93;
$color-3: #c9bfa5;
$color-4: #ff5b1a;
$color-5: #78414e;

TAILWIND

colors: {
  'brand-1': '#5c8a7b',
  'brand-2': '#aabf93',
  'brand-3': '#c9bfa5',
  'brand-4': '#ff5b1a',
  'brand-5': '#78414e',
}

RGB Array

[92, 138, 123], [170, 191, 147], [201, 191, 165], [255, 91, 26], [120, 65, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5C8A7B, #AABF93, #C9BFA5, #FF5B1A, #78414E 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: #5c8a7b; --color-2: #aabf93; --color-3: #c9bfa5; --color-4: #ff5b1a; --color-5: #78414e. 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