#FFBA7A + #EFC19D + #CACEC0 + #9DDDD5 + #BCCFCB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFBA7A

Apricot · LightSalmon · Warm Sun

HEX

#FFBA7A

RGB

rgb(255, 186, 122)

HSL

hsl(29, 100%, 74%)

HSB

hsb(29, 52%, 100%)

CMYK

cmyk(0%, 27%, 52%, 0%)

Oklch

oklch(84.0% 0.114 63.1)

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

#EFC19D

Apricot · BurlyWood · Peach Orange

HEX

#EFC19D

RGB

rgb(239, 193, 157)

HSL

hsl(26, 72%, 78%)

HSB

hsb(26, 34%, 94%)

CMYK

cmyk(0%, 19%, 34%, 6%)

Oklch

oklch(84.3% 0.071 59.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#CACEC0

Willow Green · Silver · Apple Green

HEX

#CACEC0

RGB

rgb(202, 206, 192)

HSL

hsl(77, 13%, 78%)

HSB

hsb(77, 7%, 81%)

CMYK

cmyk(2%, 0%, 7%, 19%)

Oklch

oklch(84.4% 0.020 119.8)

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

#9DDDD5

Jade · LightBlue · Lake Green

HEX

#9DDDD5

RGB

rgb(157, 221, 213)

HSL

hsl(173, 48%, 74%)

HSB

hsb(173, 29%, 87%)

CMYK

cmyk(29%, 0%, 4%, 13%)

Oklch

oklch(85.2% 0.066 186.3)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#BCCFCB

Jade · Silver · Glacier Blue

HEX

#BCCFCB

RGB

rgb(188, 207, 203)

HSL

hsl(167, 17%, 77%)

HSB

hsb(167, 9%, 81%)

CMYK

cmyk(9%, 0%, 2%, 19%)

Oklch

oklch(83.9% 0.021 181.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFBA7A

7ABFFF

Analogous

FF7A7D

FFBA7A

FFFD7A

Triadic

FFBA7A

7AFFBA

BA7AFF

Split-Comp.

FFBA7A

7AFFFD

7A7DFF

Tetradic

FFBA7A

7DFF7A

7ABFFF

FD7AFF

Contrast Matrix WCAG 2.1 Contrast

FFBA7A	EFC19D	CACEC0	9DDDD5	BCCFCB
—	1.0 Fail	1.0 Fail	1.1 Fail	1.0 Fail
1.0 Fail	—	1.0 Fail	1.1 Fail	1.0 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.1 Fail	1.1 Fail	1.0 Fail	—	1.1 Fail
1.0 Fail	1.0 Fail	1.0 Fail	1.1 Fail	—

White BG

1.7Fail

1.6Fail

1.5Fail

1.6Fail

Black BG

12.6AAA

12.8AAA

13.1AAA

13.7AAA

12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E189

DBDBA6

CCCCC3

B9B9D7

C4C4CC

Deuteranopia

E5EA8D

DEE1A8

CCCBC4

B5B0D7

C3C2CC

Tritanopia

FC9698

EDADAE

CAC6C7

A0D8D9

BDCDCD

Achromatopsia

C7C7C7

CBCBCB

C9C9C9

Shades & Tints Shades & Tints

#FFBA7A

Dark

Light

#EFC19D

Dark

Light

#CACEC0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffba7a;
  --color-2: #efc19d;
  --color-3: #cacec0;
  --color-4: #9dddd5;
  --color-5: #bccfcb;
}

SCSS

$color-1: #ffba7a;
$color-2: #efc19d;
$color-3: #cacec0;
$color-4: #9dddd5;
$color-5: #bccfcb;

TAILWIND

colors: {
  'brand-1': '#ffba7a',
  'brand-2': '#efc19d',
  'brand-3': '#cacec0',
  'brand-4': '#9dddd5',
  'brand-5': '#bccfcb',
}

RGB Array

[255, 186, 122], [239, 193, 157], [202, 206, 192], [157, 221, 213], [188, 207, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFBA7A, #EFC19D, #CACEC0, #9DDDD5, #BCCFCB 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: #ffba7a; --color-2: #efc19d; --color-3: #cacec0; --color-4: #9dddd5; --color-5: #bccfcb. 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