← Back to Editor

#CCCF7E · #A4C17E · #B6AA78 · #BE906C · #FD9A7D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CCCF7E

Fresh Green · BurlyWood · Sunflower

HEX
#CCCF7E
RGB
rgb(204, 207, 126)
HSL
hsl(62, 46%, 65%)
HSB
hsb(62, 39%, 81%)
CMYK
cmyk(1%, 0%, 39%, 19%)
Oklch
oklch(83.4% 0.104 110.3)

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

#A4C17E

Willow Green · DarkSeaGreen · Apple Green

HEX
#A4C17E
RGB
rgb(164, 193, 126)
HSL
hsl(86, 35%, 63%)
HSB
hsb(86, 35%, 76%)
CMYK
cmyk(15%, 0%, 35%, 24%)
Oklch
oklch(77.3% 0.096 127.5)

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

#B6AA78

Ginger · Tan · Sunflower

HEX
#B6AA78
RGB
rgb(182, 170, 120)
HSL
hsl(48, 30%, 59%)
HSB
hsb(48, 34%, 71%)
CMYK
cmyk(0%, 7%, 34%, 29%)
Oklch
oklch(73.6% 0.069 96.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#BE906C

Tangerine · DarkSalmon · Warm Sun

HEX
#BE906C
RGB
rgb(190, 144, 108)
HSL
hsl(26, 39%, 58%)
HSB
hsb(26, 43%, 75%)
CMYK
cmyk(0%, 24%, 43%, 25%)
Oklch
oklch(68.9% 0.075 59.2)

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

#FD9A7D

Peach Pink · LightSalmon · Coral Red

HEX
#FD9A7D
RGB
rgb(253, 154, 125)
HSL
hsl(14, 97%, 74%)
HSB
hsb(14, 51%, 99%)
CMYK
cmyk(0%, 39%, 51%, 1%)
Oklch
oklch(78.2% 0.126 37.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCCF7E
7F7DCF

Analogous

CFA87D
CCCF7E
A3CF7D

Triadic

CCCF7E
7DCCCF
CF7DCC

Split-Comp.

CCCF7E
7DA3CF
A87DCF

Tetradic

CCCF7E
7DCFA8
7F7DCF
CF7DA3

Contrast Matrix WCAG 2.1 Contrast

CCCF7E
A4C17E
B6AA78
BE906C
FD9A7D
—
1.2
Fail
1.4
Fail
1.7
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.0
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.1
Fail
1.7
Fail
1.4
Fail
1.2
Fail
—
1.4
Fail
1.3
Fail
1.0
Fail
1.1
Fail
1.4
Fail
—
White BG
1.6Fail
2.0Fail
2.3Fail
2.8Fail
2.1Fail
Black BG
12.8AAA
10.5AAA
9.0AAA
7.4AAA
10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCD92
B1B18E
B1B184
AAAA75
D2D184

Deuteranopia

CDCD96
AFAD92
B2B287
ADB077
D8DF86

Tritanopia

CCA1A4
A59B9E
B58E90
BC7C7D
F88A8B

Achromatopsia

C5C5C5
B1B1B1
A8A8A8
9A9A9A
B4B4B4

Shades & Tints Shades & Tints

#CCCF7E

Dark
Light

#A4C17E

Dark
Light

#B6AA78

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cccf7e;
  --color-2: #a4c17e;
  --color-3: #b6aa78;
  --color-4: #be906c;
  --color-5: #fd9a7d;
}

SCSS

$color-1: #cccf7e;
$color-2: #a4c17e;
$color-3: #b6aa78;
$color-4: #be906c;
$color-5: #fd9a7d;

TAILWIND

colors: {
  'brand-1': '#cccf7e',
  'brand-2': '#a4c17e',
  'brand-3': '#b6aa78',
  'brand-4': '#be906c',
  'brand-5': '#fd9a7d',
}

RGB Array

[204, 207, 126], [164, 193, 126], [182, 170, 120], [190, 144, 108], [253, 154, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCCF7E, #A4C17E, #B6AA78, #BE906C, #FD9A7D 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: #cccf7e; --color-2: #a4c17e; --color-3: #b6aa78; --color-4: #be906c; --color-5: #fd9a7d. 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