← Back to Editor

#C5BEA1 · #30A384 · #4F936A · #A58E6E · #C0976B

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C5BEA1

Ginger · Tan · Sunflower

HEX
#C5BEA1
RGB
rgb(197, 190, 161)
HSL
hsl(48, 24%, 70%)
HSB
hsb(48, 18%, 77%)
CMYK
cmyk(0%, 4%, 18%, 23%)
Oklch
oklch(80.0% 0.040 95.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#30A384

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#30A384
RGB
rgb(48, 163, 132)
HSL
hsl(164, 55%, 41%)
HSB
hsb(164, 71%, 64%)
CMYK
cmyk(71%, 0%, 19%, 36%)
Oklch
oklch(64.4% 0.112 170.9)

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

#4F936A

Celadon · MediumSeaGreen · Olive Green

HEX
#4F936A
RGB
rgb(79, 147, 106)
HSL
hsl(144, 30%, 44%)
HSB
hsb(144, 46%, 58%)
CMYK
cmyk(46%, 0%, 28%, 42%)
Oklch
oklch(60.7% 0.094 155.8)

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

#A58E6E

Ginger · Gray · Warm Sun

HEX
#A58E6E
RGB
rgb(165, 142, 110)
HSL
hsl(35, 23%, 54%)
HSB
hsb(35, 33%, 65%)
CMYK
cmyk(0%, 14%, 33%, 35%)
Oklch
oklch(65.9% 0.053 75.8)

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

#C0976B

Ginger · DarkSalmon · Warm Sun

HEX
#C0976B
RGB
rgb(192, 151, 107)
HSL
hsl(31, 40%, 59%)
HSB
hsb(31, 44%, 75%)
CMYK
cmyk(0%, 21%, 44%, 25%)
Oklch
oklch(70.4% 0.077 68.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C5BEA1
A0A7C5

Analogous

C5ABA0
C5BEA1
BAC5A0

Triadic

C5BEA1
A0C5BE
BEA0C5

Split-Comp.

C5BEA1
A0BAC5
ABA0C5

Tetradic

C5BEA1
A0C5AB
A0A7C5
C5A0BA

Contrast Matrix WCAG 2.1 Contrast

C5BEA1
30A384
4F936A
A58E6E
C0976B
—
1.7
Fail
2.0
Fail
1.7
Fail
1.4
Fail
1.7
Fail
—
1.2
Fail
1.0
Fail
1.2
Fail
2.0
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.7
Fail
1.0
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.2
Fail
1.4
Fail
1.2
Fail
—
White BG
1.9Fail
3.1AA Large
3.7AA Large
3.1AA Large
2.7Fail
Black BG
11.3AAA
6.7AA
5.7AA
6.7AA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C2A8
62638C
6C6D74
9B9B76
AEAE76

Deuteranopia

C2C3AA
5B538D
696376
9C9E78
B1B478

Tritanopia

C5AEAF
369193
527C7D
A47C7D
BE7E80

Achromatopsia

BDBDBD
7D7D7D
7A7A7A
919191
9E9E9E

Shades & Tints Shades & Tints

#C5BEA1

Dark
Light

#30A384

Dark
Light

#4F936A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c5bea1;
  --color-2: #30a384;
  --color-3: #4f936a;
  --color-4: #a58e6e;
  --color-5: #c0976b;
}

SCSS

$color-1: #c5bea1;
$color-2: #30a384;
$color-3: #4f936a;
$color-4: #a58e6e;
$color-5: #c0976b;

TAILWIND

colors: {
  'brand-1': '#c5bea1',
  'brand-2': '#30a384',
  'brand-3': '#4f936a',
  'brand-4': '#a58e6e',
  'brand-5': '#c0976b',
}

RGB Array

[197, 190, 161], [48, 163, 132], [79, 147, 106], [165, 142, 110], [192, 151, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C5BEA1, #30A384, #4F936A, #A58E6E, #C0976B 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: #c5bea1; --color-2: #30a384; --color-3: #4f936a; --color-4: #a58e6e; --color-5: #c0976b. 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