#CCAE3F + #CCC73F + #C4DB91 + #7BD183 + #53997C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CCAE3F

Ginger · GoldenRod · Sunflower

HEX

#CCAE3F

RGB

rgb(204, 174, 63)

HSL

hsl(47, 58%, 52%)

HSB

hsb(47, 69%, 80%)

CMYK

cmyk(0%, 15%, 69%, 20%)

Oklch

oklch(75.7% 0.131 93.7)

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

#CCC73F

Autumn Sage · GoldenRod · Sunflower

HEX

#CCC73F

RGB

rgb(204, 199, 63)

HSL

hsl(58, 58%, 52%)

HSB

hsb(58, 69%, 80%)

CMYK

cmyk(0%, 2%, 69%, 20%)

Oklch

oklch(81.0% 0.152 107.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#C4DB91

Willow Green · Tan · Apple Green

HEX

#C4DB91

RGB

rgb(196, 219, 145)

HSL

hsl(79, 51%, 71%)

HSB

hsb(79, 34%, 86%)

CMYK

cmyk(11%, 0%, 34%, 14%)

Oklch

oklch(85.7% 0.100 122.6)

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

#7BD183

Celadon · DarkSeaGreen · Apple Green

HEX

#7BD183

RGB

rgb(123, 209, 131)

HSL

hsl(126, 48%, 65%)

HSB

hsb(126, 41%, 82%)

CMYK

cmyk(41%, 0%, 37%, 18%)

Oklch

oklch(78.7% 0.138 146.2)

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

#53997C

Mineral Blue · MediumSeaGreen · Olive Green

HEX

#53997C

RGB

rgb(83, 153, 124)

HSL

hsl(155, 30%, 46%)

HSB

hsb(155, 46%, 60%)

CMYK

cmyk(46%, 0%, 19%, 40%)

Oklch

oklch(62.8% 0.084 165.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCAE3F

3E5CCC

Analogous

CC663E

CCAE3F

A3CC3E

Triadic

CCAE3F

3ECCAD

AD3ECC

Split-Comp.

CCAE3F

3EA3CC

663ECC

Tetradic

CCAE3F

3ECC66

3E5CCC

CC3EA3

Contrast Matrix WCAG 2.1 Contrast

CCAE3F	CCC73F	C4DB91	7BD183	53997C
—	1.2 Fail	1.4 Fail	1.2 Fail	1.6 Fail
1.2 Fail	—	1.2 Fail	1.0 Fail	1.9 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	2.2 Fail
1.2 Fail	1.0 Fail	1.2 Fail	—	1.8 Fail
1.6 Fail	1.9 Fail	2.2 Fail	1.8 Fail	—

White BG

2.2Fail

1.8Fail

1.5Fail

1.9Fail

3.4AA Large

Black BG

9.7AAA

11.8AAA

13.9AAA

11.3AAA

6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBF5A

CACA60

CECEA3

A0A196

717283

Deuteranopia

C1C360

CACA68

CDCBA7

9B959A

6D6885

Tritanopia

CA6F74

CC7A80

C5B1B4

7FA5A8

57898A

Achromatopsia

AAAAAA

B9B9B9

CCCCCC

AEAEAE

818181

Shades & Tints Shades & Tints

#CCAE3F

Dark

Light

#CCC73F

Dark

Light

#C4DB91

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccae3f;
  --color-2: #ccc73f;
  --color-3: #c4db91;
  --color-4: #7bd183;
  --color-5: #53997c;
}

SCSS

$color-1: #ccae3f;
$color-2: #ccc73f;
$color-3: #c4db91;
$color-4: #7bd183;
$color-5: #53997c;

TAILWIND

colors: {
  'brand-1': '#ccae3f',
  'brand-2': '#ccc73f',
  'brand-3': '#c4db91',
  'brand-4': '#7bd183',
  'brand-5': '#53997c',
}

RGB Array

[204, 174, 63], [204, 199, 63], [196, 219, 145], [123, 209, 131], [83, 153, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCAE3F, #CCC73F, #C4DB91, #7BD183, #53997C 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: #ccae3f; --color-2: #ccc73f; --color-3: #c4db91; --color-4: #7bd183; --color-5: #53997c. 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