← Back to Editor

#56A57D · #1C9C80 · #BDAD88 · #CCAE69 · #FCAD4C

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

#56A57D

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#56A57D
RGB
rgb(86, 165, 125)
HSL
hsl(150, 31%, 49%)
HSB
hsb(150, 48%, 65%)
CMYK
cmyk(48%, 0%, 24%, 35%)
Oklch
oklch(66.0% 0.099 159.9)

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

#1C9C80

Mineral Blue · Teal · Mint Ice

HEX
#1C9C80
RGB
rgb(28, 156, 128)
HSL
hsl(167, 70%, 36%)
HSB
hsb(167, 82%, 61%)
CMYK
cmyk(82%, 0%, 18%, 39%)
Oklch
oklch(62.1% 0.113 173.2)

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

#BDAD88

Ginger · Tan · Sunflower

HEX
#BDAD88
RGB
rgb(189, 173, 136)
HSL
hsl(42, 29%, 64%)
HSB
hsb(42, 28%, 74%)
CMYK
cmyk(0%, 8%, 28%, 26%)
Oklch
oklch(75.2% 0.054 87.4)

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

#CCAE69

Ginger · Tan · Sunflower

HEX
#CCAE69
RGB
rgb(204, 174, 105)
HSL
hsl(42, 49%, 61%)
HSB
hsb(42, 49%, 80%)
CMYK
cmyk(0%, 15%, 49%, 20%)
Oklch
oklch(76.2% 0.095 86.7)

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

#FCAD4C

Ginger · SandyBrown · Warm Sun

HEX
#FCAD4C
RGB
rgb(252, 173, 76)
HSL
hsl(33, 97%, 64%)
HSB
hsb(33, 70%, 99%)
CMYK
cmyk(0%, 31%, 70%, 1%)
Oklch
oklch(80.7% 0.144 68.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

56A57D
A4567D

Analogous

56A456
56A57D
56A4A4

Triadic

56A57D
7D56A4
A47D56

Split-Comp.

56A57D
A456A4
A45656

Tetradic

56A57D
5656A4
A4567D
A4A456

Contrast Matrix WCAG 2.1 Contrast

56A57D
1C9C80
BDAD88
CCAE69
FCAD4C
—
1.2
Fail
1.3
Fail
1.4
Fail
1.6
Fail
1.2
Fail
—
1.6
Fail
1.6
Fail
1.8
Fail
1.3
Fail
1.6
Fail
—
1.0
Fail
1.2
Fail
1.4
Fail
1.6
Fail
1.0
Fail
—
1.1
Fail
1.6
Fail
1.8
Fail
1.2
Fail
1.1
Fail
—
White BG
3.0Fail
3.4AA Large
2.2Fail
2.1Fail
1.9Fail
Black BG
7.1AAA
6.1AA
9.5AAA
9.8AAA
11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

787987
535587
B6B691
BFBF7A
DAD963

Deuteranopia

746E89
4C4288
B7B893
C1C37E
DEE469

Tritanopia

5A8E90
228C8D
BC989A
CA878A
F8767A

Achromatopsia

898989
737373
AEAEAE
AFAFAF
BABABA

Shades & Tints Shades & Tints

#56A57D

Dark
Light

#1C9C80

Dark
Light

#BDAD88

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #56a57d;
  --color-2: #1c9c80;
  --color-3: #bdad88;
  --color-4: #ccae69;
  --color-5: #fcad4c;
}

SCSS

$color-1: #56a57d;
$color-2: #1c9c80;
$color-3: #bdad88;
$color-4: #ccae69;
$color-5: #fcad4c;

TAILWIND

colors: {
  'brand-1': '#56a57d',
  'brand-2': '#1c9c80',
  'brand-3': '#bdad88',
  'brand-4': '#ccae69',
  'brand-5': '#fcad4c',
}

RGB Array

[86, 165, 125], [28, 156, 128], [189, 173, 136], [204, 174, 105], [252, 173, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #56A57D, #1C9C80, #BDAD88, #CCAE69, #FCAD4C 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: #56a57d; --color-2: #1c9c80; --color-3: #bdad88; --color-4: #ccae69; --color-5: #fcad4c. 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