#B1C22F + #E9EBB9 + #CDD7B2 + #9ACBA4 + #F6104E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B1C22F

Autumn Sage · GoldenRod · Honey Gold

HEX

#B1C22F

RGB

rgb(177, 194, 47)

HSL

hsl(67, 61%, 47%)

HSB

hsb(67, 76%, 76%)

CMYK

cmyk(9%, 0%, 76%, 24%)

Oklch

oklch(77.6% 0.163 116.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#E9EBB9

Fresh Green · Wheat · Lemon Cream

HEX

#E9EBB9

RGB

rgb(233, 235, 185)

HSL

hsl(62, 56%, 82%)

HSB

hsb(62, 21%, 92%)

CMYK

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

Oklch

oklch(92.6% 0.065 109.5)

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

#CDD7B2

Willow Green · Silver · Apple Green

HEX

#CDD7B2

RGB

rgb(205, 215, 178)

HSL

hsl(76, 32%, 77%)

HSB

hsb(76, 17%, 84%)

CMYK

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

Oklch

oklch(86.2% 0.051 119.8)

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

#9ACBA4

Celadon · DarkSeaGreen · Apple Green

HEX

#9ACBA4

RGB

rgb(154, 203, 164)

HSL

hsl(132, 32%, 70%)

HSB

hsb(132, 24%, 80%)

CMYK

cmyk(24%, 0%, 19%, 20%)

Oklch

oklch(79.7% 0.075 150.6)

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

#F6104E

Dark Violet · Crimson · Rose Pink

HEX

#F6104E

RGB

rgb(246, 16, 78)

HSL

hsl(344, 93%, 51%)

HSB

hsb(344, 93%, 96%)

CMYK

cmyk(0%, 93%, 68%, 4%)

Oklch

oklch(62.1% 0.244 17.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1C22F

402FC1

Analogous

C1892F

B1C22F

67C12F

Triadic

B1C22F

2FB0C1

C12FB0

Split-Comp.

B1C22F

2F67C1

892FC1

Tetradic

B1C22F

2FC189

402FC1

C12F67

Contrast Matrix WCAG 2.1 Contrast

B1C22F	E9EBB9	CDD7B2	9ACBA4	F6104E
—	1.6 Fail	1.3 Fail	1.1 Fail	2.1 Fail
1.6 Fail	—	1.2 Fail	1.5 Fail	3.3 AA Large
1.3 Fail	1.2 Fail	—	1.2 Fail	2.7 Fail
1.1 Fail	1.5 Fail	1.2 Fail	—	2.2 Fail
2.1 Fail	3.3 AA Large	2.7 Fail	2.2 Fail	—

White BG

2.0Fail

1.2Fail

1.5Fail

1.8Fail

4.1AA Large

Black BG

10.6AAA

17.0AAA

14.0AAA

11.5AAA

5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B953

EAEAC5

D1D1BB

AFB0AD

92903F

Deuteranopia

B7B65B

EAEAC8

D1D0BD

ACA9B0

A0B13B

Tritanopia

B26F75

E9CFD1

CEC2C4

9CB5B7

EB3331

Achromatopsia

ACACAC

E5E5E5

D0D0D0

B8B8B8

5C5C5C

Shades & Tints Shades & Tints

#B1C22F

Dark

Light

#E9EBB9

Dark

Light

#CDD7B2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1c22f;
  --color-2: #e9ebb9;
  --color-3: #cdd7b2;
  --color-4: #9acba4;
  --color-5: #f6104e;
}

SCSS

$color-1: #b1c22f;
$color-2: #e9ebb9;
$color-3: #cdd7b2;
$color-4: #9acba4;
$color-5: #f6104e;

TAILWIND

colors: {
  'brand-1': '#b1c22f',
  'brand-2': '#e9ebb9',
  'brand-3': '#cdd7b2',
  'brand-4': '#9acba4',
  'brand-5': '#f6104e',
}

RGB Array

[177, 194, 47], [233, 235, 185], [205, 215, 178], [154, 203, 164], [246, 16, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B1C22F, #E9EBB9, #CDD7B2, #9ACBA4, #F6104E 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: #b1c22f; --color-2: #e9ebb9; --color-3: #cdd7b2; --color-4: #9acba4; --color-5: #f6104e. 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