#CCF482 + #D9EAAB + #BDED8C + #B2D76F + #6F8A73 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CCF482

Willow Green · Khaki · Apple Green

HEX

#CCF482

RGB

rgb(204, 244, 130)

HSL

hsl(81, 84%, 73%)

HSB

hsb(81, 47%, 96%)

CMYK

cmyk(16%, 0%, 47%, 4%)

Oklch

oklch(91.4% 0.148 125.1)

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

#D9EAAB

Willow Green · Wheat · Apple Green

HEX

#D9EAAB

RGB

rgb(217, 234, 171)

HSL

hsl(76, 60%, 79%)

HSB

hsb(76, 27%, 92%)

CMYK

cmyk(7%, 0%, 27%, 8%)

Oklch

oklch(90.9% 0.084 120.4)

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

#BDED8C

Emerald · LightGreen · Apple Green

HEX

#BDED8C

RGB

rgb(189, 237, 140)

HSL

hsl(90, 73%, 74%)

HSB

hsb(90, 41%, 93%)

CMYK

cmyk(20%, 0%, 41%, 7%)

Oklch

oklch(89.1% 0.135 130.2)

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

#B2D76F

Willow Green · LightGreen · Apple Green

HEX

#B2D76F

RGB

rgb(178, 215, 111)

HSL

hsl(81, 57%, 64%)

HSB

hsb(81, 48%, 84%)

CMYK

cmyk(17%, 0%, 48%, 16%)

Oklch

oklch(83.0% 0.138 125.4)

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

#6F8A73

Celadon · Gray · Olive Green

HEX

#6F8A73

RGB

rgb(111, 138, 115)

HSL

hsl(129, 11%, 49%)

HSB

hsb(129, 20%, 54%)

CMYK

cmyk(20%, 0%, 17%, 46%)

Oklch

oklch(60.6% 0.046 149.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCF482

A980F4

Analogous

F4E380

CCF482

92F480

Triadic

CCF482

80CCF4

F480CC

Split-Comp.

CCF482

8092F4

E380F4

Tetradic

CCF482

80F4E3

A980F4

F48092

Contrast Matrix WCAG 2.1 Contrast

CCF482	D9EAAB	BDED8C	B2D76F	6F8A73
—	1.0 Fail	1.1 Fail	1.3 Fail	3.0 AA Large
1.0 Fail	—	1.0 Fail	1.3 Fail	2.9 Fail
1.1 Fail	1.0 Fail	—	1.2 Fail	2.8 Fail
1.3 Fail	1.3 Fail	1.2 Fail	—	2.3 Fail
3.0 AA Large	2.9 Fail	2.8 Fail	2.3 Fail	—

White BG

1.2Fail

1.3Fail

1.6Fail

3.8AA Large

Black BG

16.8AAA

16.3AAA

15.7AAA

12.8AAA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDE9E

E0E1BA

D2D2A3

C2C288

7B7B79

Deuteranopia

DBD8A4

DFDEBE

CFCBA9

C0BD8E

79777A

Tritanopia

CEB3B8

DAC6C9

BFB6BA

B49CA0

707D7E

Achromatopsia

DBDBDB

DEDEDE

D4D4D4

C0C0C0

7F7F7F

Shades & Tints Shades & Tints

#CCF482

Dark

Light

#D9EAAB

Dark

Light

#BDED8C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccf482;
  --color-2: #d9eaab;
  --color-3: #bded8c;
  --color-4: #b2d76f;
  --color-5: #6f8a73;
}

SCSS

$color-1: #ccf482;
$color-2: #d9eaab;
$color-3: #bded8c;
$color-4: #b2d76f;
$color-5: #6f8a73;

TAILWIND

colors: {
  'brand-1': '#ccf482',
  'brand-2': '#d9eaab',
  'brand-3': '#bded8c',
  'brand-4': '#b2d76f',
  'brand-5': '#6f8a73',
}

RGB Array

[204, 244, 130], [217, 234, 171], [189, 237, 140], [178, 215, 111], [111, 138, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCF482, #D9EAAB, #BDED8C, #B2D76F, #6F8A73 is ideal for: health products, baby brands, fresh-style blogs. 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: #ccf482; --color-2: #d9eaab; --color-3: #bded8c; --color-4: #b2d76f; --color-5: #6f8a73. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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