#CFF28F + #FCF2B1 + #BCE6CD + #A5CED1 + #8CADD1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CFF28F

Willow Green · Khaki · Apple Green

HEX

#CFF28F

RGB

rgb(207, 242, 143)

HSL

hsl(81, 79%, 75%)

HSB

hsb(81, 41%, 95%)

CMYK

cmyk(14%, 0%, 41%, 5%)

Oklch

oklch(91.4% 0.131 124.8)

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

#FCF2B1

Fresh Green · Wheat · Lemon Cream

HEX

#FCF2B1

RGB

rgb(252, 242, 177)

HSL

hsl(52, 93%, 84%)

HSB

hsb(52, 30%, 99%)

CMYK

cmyk(0%, 4%, 30%, 1%)

Oklch

oklch(95.4% 0.083 100.4)

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

#BCE6CD

Celadon · LightGray · Mint Green

HEX

#BCE6CD

RGB

rgb(188, 230, 205)

HSL

hsl(144, 46%, 82%)

HSB

hsb(144, 18%, 90%)

CMYK

cmyk(18%, 0%, 11%, 10%)

Oklch

oklch(88.8% 0.056 158.9)

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

#A5CED1

Sky Blue · LightSteelBlue · Lake Green

HEX

#A5CED1

RGB

rgb(165, 206, 209)

HSL

hsl(184, 32%, 73%)

HSB

hsb(184, 21%, 82%)

CMYK

cmyk(21%, 1%, 0%, 18%)

Oklch

oklch(82.3% 0.043 201.9)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#8CADD1

Azure · SkyBlue · Cobalt Blue

HEX

#8CADD1

RGB

rgb(140, 173, 209)

HSL

hsl(211, 43%, 68%)

HSB

hsb(211, 33%, 82%)

CMYK

cmyk(33%, 17%, 0%, 18%)

Oklch

oklch(73.6% 0.064 250.9)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFF28F

B08DF2

Analogous

F2E38D

CFF28F

9CF28D

Triadic

CFF28F

8DCEF2

F28DCE

Split-Comp.

CFF28F

8D9CF2

E38DF2

Tetradic

CFF28F

8DF2E3

B08DF2

F28D9C

Contrast Matrix WCAG 2.1 Contrast

CFF28F	FCF2B1	BCE6CD	A5CED1	8CADD1
—	1.1 Fail	1.1 Fail	1.4 Fail	1.9 Fail
1.1 Fail	—	1.2 Fail	1.5 Fail	2.0 Fail
1.1 Fail	1.2 Fail	—	1.2 Fail	1.7 Fail
1.4 Fail	1.5 Fail	1.2 Fail	—	1.4 Fail
1.9 Fail	2.0 Fail	1.7 Fail	1.4 Fail	—

White BG

1.3Fail

1.1Fail

1.4Fail

1.7Fail

2.3Fail

Black BG

16.8AAA

18.5AAA

15.3AAA

12.3AAA

9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDEA7

F8F8C1

CECFD3

B7B7D0

9A9BC8

Deuteranopia

DCD9AD

F8F9C5

CCC9D5

B4B1D0

9896C6

Tritanopia

D1BABE

FBCDD0

BED8D9

A7D0D0

8EC1C0

Achromatopsia

DCDCDC

EEEEEE

D7D7D7

C2C2C2

A7A7A7

Shades & Tints Shades & Tints

#CFF28F

Dark

Light

#FCF2B1

Dark

Light

#BCE6CD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cff28f;
  --color-2: #fcf2b1;
  --color-3: #bce6cd;
  --color-4: #a5ced1;
  --color-5: #8cadd1;
}

SCSS

$color-1: #cff28f;
$color-2: #fcf2b1;
$color-3: #bce6cd;
$color-4: #a5ced1;
$color-5: #8cadd1;

TAILWIND

colors: {
  'brand-1': '#cff28f',
  'brand-2': '#fcf2b1',
  'brand-3': '#bce6cd',
  'brand-4': '#a5ced1',
  'brand-5': '#8cadd1',
}

RGB Array

[207, 242, 143], [252, 242, 177], [188, 230, 205], [165, 206, 209], [140, 173, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CFF28F, #FCF2B1, #BCE6CD, #A5CED1, #8CADD1 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: #cff28f; --color-2: #fcf2b1; --color-3: #bce6cd; --color-4: #a5ced1; --color-5: #8cadd1. 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