#B9BC8A + #F22233 + #D7A380 + #C7D6A6 + #C5E2C0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B9BC8A

Fresh Green · Tan · Sunflower

HEX

#B9BC8A

RGB

rgb(185, 188, 138)

HSL

hsl(64, 27%, 64%)

HSB

hsb(64, 27%, 74%)

CMYK

cmyk(2%, 0%, 27%, 26%)

Oklch

oklch(78.0% 0.067 110.7)

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

#F22233

Vermilion · Crimson · Passion Red

HEX

#F22233

RGB

rgb(242, 34, 51)

HSL

hsl(355, 89%, 54%)

HSB

hsb(355, 86%, 95%)

CMYK

cmyk(0%, 86%, 79%, 5%)

Oklch

oklch(61.6% 0.235 24.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#D7A380

Apricot · Tan · Warm Sun

HEX

#D7A380

RGB

rgb(215, 163, 128)

HSL

hsl(24, 52%, 67%)

HSB

hsb(24, 40%, 84%)

CMYK

cmyk(0%, 24%, 40%, 16%)

Oklch

oklch(75.6% 0.078 55.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#C7D6A6

Willow Green · Silver · Apple Green

HEX

#C7D6A6

RGB

rgb(199, 214, 166)

HSL

hsl(79, 37%, 75%)

HSB

hsb(79, 22%, 84%)

CMYK

cmyk(7%, 0%, 22%, 16%)

Oklch

oklch(85.2% 0.066 121.9)

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

#C5E2C0

Celadon · LightGray · Mint Green

HEX

#C5E2C0

RGB

rgb(197, 226, 192)

HSL

hsl(111, 37%, 82%)

HSB

hsb(111, 15%, 89%)

CMYK

cmyk(13%, 0%, 15%, 11%)

Oklch

oklch(88.2% 0.055 141.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B9BC8A

8E8ABC

Analogous

BCA78A

B9BC8A

A0BC8A

Triadic

B9BC8A

8AB9BC

BC8AB9

Split-Comp.

B9BC8A

8AA0BC

A78ABC

Tetradic

B9BC8A

8ABCA7

8E8ABC

BC8AA0

Contrast Matrix WCAG 2.1 Contrast

B9BC8A	F22233	D7A380	C7D6A6	C5E2C0
—	2.1 Fail	1.1 Fail	1.3 Fail	1.4 Fail
2.1 Fail	—	1.9 Fail	2.7 Fail	3.0 Fail
1.1 Fail	1.9 Fail	—	1.4 Fail	1.6 Fail
1.3 Fail	2.7 Fail	1.4 Fail	—	1.1 Fail
1.4 Fail	3.0 Fail	1.6 Fail	1.1 Fail	—

White BG

2.0Fail

4.2AA Large

2.2Fail

1.5Fail

1.4Fail

Black BG

10.6AAA

5.1AA

9.4AAA

13.6AAA

15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BABA96

98962F

C0C088

CDCEB2

D2D2C8

Deuteranopia

BABA99

A4B42E

C4C78B

CDCCB4

D0CECA

Tritanopia

B9A0A2

E82C2B

D48F91

C8BBBD

C6CFD0

Achromatopsia

B5B5B5

626262

AFAFAF

CCCCCC

D5D5D5

Shades & Tints Shades & Tints

#B9BC8A

Dark

Light

#F22233

Dark

Light

#D7A380

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b9bc8a;
  --color-2: #f22233;
  --color-3: #d7a380;
  --color-4: #c7d6a6;
  --color-5: #c5e2c0;
}

SCSS

$color-1: #b9bc8a;
$color-2: #f22233;
$color-3: #d7a380;
$color-4: #c7d6a6;
$color-5: #c5e2c0;

TAILWIND

colors: {
  'brand-1': '#b9bc8a',
  'brand-2': '#f22233',
  'brand-3': '#d7a380',
  'brand-4': '#c7d6a6',
  'brand-5': '#c5e2c0',
}

RGB Array

[185, 188, 138], [242, 34, 51], [215, 163, 128], [199, 214, 166], [197, 226, 192]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B9BC8A, #F22233, #D7A380, #C7D6A6, #C5E2C0 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: #b9bc8a; --color-2: #f22233; --color-3: #d7a380; --color-4: #c7d6a6; --color-5: #c5e2c0. 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