#B4D1CE + #FFA32B + #B2BD8E + #FF801B + #C1D6A5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B4D1CE

Jade · LightSteelBlue · Glacier Blue

HEX

#B4D1CE

RGB

rgb(180, 209, 206)

HSL

hsl(174, 24%, 76%)

HSB

hsb(174, 14%, 82%)

CMYK

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

Oklch

oklch(83.8% 0.031 189.0)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#FFA32B

Ginger · GoldenRod · Warm Sun

HEX

#FFA32B

RGB

rgb(255, 163, 43)

HSL

hsl(34, 100%, 58%)

HSB

hsb(34, 83%, 100%)

CMYK

cmyk(0%, 36%, 83%, 0%)

Oklch

oklch(79.0% 0.163 66.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#B2BD8E

Willow Green · Tan · Apple Green

HEX

#B2BD8E

RGB

rgb(178, 189, 142)

HSL

hsl(74, 26%, 65%)

HSB

hsb(74, 25%, 74%)

CMYK

cmyk(6%, 0%, 25%, 26%)

Oklch

oklch(77.8% 0.065 118.6)

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

#FF801B

Tangerine · Orange · Warm Sun

HEX

#FF801B

RGB

rgb(255, 128, 27)

HSL

hsl(27, 100%, 55%)

HSB

hsb(27, 89%, 100%)

CMYK

cmyk(0%, 50%, 89%, 0%)

Oklch

oklch(73.3% 0.183 51.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#C1D6A5

Willow Green · Silver · Apple Green

HEX

#C1D6A5

RGB

rgb(193, 214, 165)

HSL

hsl(86, 37%, 74%)

HSB

hsb(86, 23%, 84%)

CMYK

cmyk(10%, 0%, 23%, 16%)

Oklch

oklch(84.8% 0.070 126.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4D1CE

D0B3B6

Analogous

B3D0BF

B4D1CE

B3C5D0

Triadic

B4D1CE

CEB3D0

D0CEB3

Split-Comp.

B4D1CE

D0B3C5

D0BFB3

Tetradic

B4D1CE

BFB3D0

D0B3B6

C5D0B3

Contrast Matrix WCAG 2.1 Contrast

B4D1CE	FFA32B	B2BD8E	FF801B	C1D6A5
—	1.2 Fail	1.2 Fail	1.6 Fail	1.0 Fail
1.2 Fail	—	1.0 Fail	1.3 Fail	1.3 Fail
1.2 Fail	1.0 Fail	—	1.3 Fail	1.3 Fail
1.6 Fail	1.3 Fail	1.3 Fail	—	1.6 Fail
1.0 Fail	1.3 Fail	1.3 Fail	1.6 Fail	—

White BG

1.6Fail

2.0Fail

2.5Fail

1.6Fail

Black BG

13.0AAA

10.5AAA

10.6AAA

8.4AAA

13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C1CF

D7D648

B7B799

C8C733

CACAB1

Deuteranopia

BFBDCF

DDE34F

B6B59C

CFD939

C9C7B4

Tritanopia

B5CFCF

FA5F64

B3A2A4

F9474B

C2BABC

Achromatopsia

C8C8C8

B1B1B1

B4B4B4

9A9A9A

CACACA

Shades & Tints Shades & Tints

#B4D1CE

Dark

Light

#FFA32B

Dark

Light

#B2BD8E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4d1ce;
  --color-2: #ffa32b;
  --color-3: #b2bd8e;
  --color-4: #ff801b;
  --color-5: #c1d6a5;
}

SCSS

$color-1: #b4d1ce;
$color-2: #ffa32b;
$color-3: #b2bd8e;
$color-4: #ff801b;
$color-5: #c1d6a5;

TAILWIND

colors: {
  'brand-1': '#b4d1ce',
  'brand-2': '#ffa32b',
  'brand-3': '#b2bd8e',
  'brand-4': '#ff801b',
  'brand-5': '#c1d6a5',
}

RGB Array

[180, 209, 206], [255, 163, 43], [178, 189, 142], [255, 128, 27], [193, 214, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B4D1CE, #FFA32B, #B2BD8E, #FF801B, #C1D6A5 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: #b4d1ce; --color-2: #ffa32b; --color-3: #b2bd8e; --color-4: #ff801b; --color-5: #c1d6a5. 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