#CDF281 + #AFCB80 + #8CA27B + #637575 + #4A626E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CDF281

Willow Green · Khaki · Apple Green

HEX

#CDF281

RGB

rgb(205, 242, 129)

HSL

hsl(80, 81%, 73%)

HSB

hsb(80, 47%, 95%)

CMYK

cmyk(15%, 0%, 47%, 5%)

Oklch

oklch(91.1% 0.146 124.2)

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

#AFCB80

Willow Green · DarkSeaGreen · Apple Green

HEX

#AFCB80

RGB

rgb(175, 203, 128)

HSL

hsl(82, 42%, 65%)

HSB

hsb(82, 37%, 80%)

CMYK

cmyk(14%, 0%, 37%, 20%)

Oklch

oklch(80.3% 0.104 125.3)

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

#8CA27B

Celadon · DarkSeaGreen · Olive Green

HEX

#8CA27B

RGB

rgb(140, 162, 123)

HSL

hsl(94, 17%, 56%)

HSB

hsb(94, 24%, 64%)

CMYK

cmyk(14%, 0%, 24%, 36%)

Oklch

oklch(68.5% 0.061 131.8)

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

#637575

Slate Blue · DimGray · Warm Gray

HEX

#637575

RGB

rgb(99, 117, 117)

HSL

hsl(180, 8%, 42%)

HSB

hsb(180, 15%, 46%)

CMYK

cmyk(15%, 0%, 0%, 54%)

Oklch

oklch(54.8% 0.021 196.5)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

#4A626E

Slate Blue · DimGray · Prussian Blue

HEX

#4A626E

RGB

rgb(74, 98, 110)

HSL

hsl(200, 20%, 36%)

HSB

hsb(200, 33%, 43%)

CMYK

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

Oklch

oklch(48.1% 0.035 230.0)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDF281

A882F2

Analogous

F2DF82

CDF281

95F282

Triadic

CDF281

82CDF2

F282CD

Split-Comp.

CDF281

8295F2

DF82F2

Tetradic

CDF281

82F2DF

A882F2

F28295

Contrast Matrix WCAG 2.1 Contrast

CDF281	AFCB80	8CA27B	637575	4A626E
—	1.4 Fail	2.2 Fail	3.8 AA Large	5.1 AA
1.4 Fail	—	1.5 Fail	2.7 Fail	3.6 AA Large
2.2 Fail	1.5 Fail	—	1.7 Fail	2.3 Fail
3.8 AA Large	2.7 Fail	1.7 Fail	—	1.3 Fail
5.1 AA	3.6 AA Large	2.3 Fail	1.3 Fail	—

White BG

1.3Fail

1.8Fail

2.8Fail

4.8AA

6.4AA

Black BG

16.6AAA

11.7AAA

7.6AAA

4.3AA Large

3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDD9C

BBBB92

969684

6B6B75

54556B

Deuteranopia

DBD8A3

BAB797

949387

6A6875

53516A

Tritanopia

CFB2B7

B0A0A4

8D8C8E

647575

4B6968

Achromatopsia

DADADA

BABABA

979797

707070

5C5C5C

Shades & Tints Shades & Tints

#CDF281

Dark

Light

#AFCB80

Dark

Light

#8CA27B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdf281;
  --color-2: #afcb80;
  --color-3: #8ca27b;
  --color-4: #637575;
  --color-5: #4a626e;
}

SCSS

$color-1: #cdf281;
$color-2: #afcb80;
$color-3: #8ca27b;
$color-4: #637575;
$color-5: #4a626e;

TAILWIND

colors: {
  'brand-1': '#cdf281',
  'brand-2': '#afcb80',
  'brand-3': '#8ca27b',
  'brand-4': '#637575',
  'brand-5': '#4a626e',
}

RGB Array

[205, 242, 129], [175, 203, 128], [140, 162, 123], [99, 117, 117], [74, 98, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDF281, #AFCB80, #8CA27B, #637575, #4A626E 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: #cdf281; --color-2: #afcb80; --color-3: #8ca27b; --color-4: #637575; --color-5: #4a626e. 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