#BECAB8 + #CCC8B1 + #E0C7AD + #FABF9B + #66606E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BECAB8

Celadon · Silver · Apple Green

HEX

#BECAB8

RGB

rgb(190, 202, 184)

HSL

hsl(100, 15%, 76%)

HSB

hsb(100, 9%, 79%)

CMYK

cmyk(6%, 0%, 9%, 21%)

Oklch

oklch(82.5% 0.028 135.0)

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

#CCC8B1

Fresh Green · Silver · Sunflower

HEX

#CCC8B1

RGB

rgb(204, 200, 177)

HSL

hsl(51, 21%, 75%)

HSB

hsb(51, 13%, 80%)

CMYK

cmyk(0%, 2%, 13%, 20%)

Oklch

oklch(83.0% 0.032 98.9)

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

#E0C7AD

Goose Yellow · Wheat · Peach Orange

HEX

#E0C7AD

RGB

rgb(224, 199, 173)

HSL

hsl(31, 45%, 78%)

HSB

hsb(31, 23%, 88%)

CMYK

cmyk(0%, 11%, 23%, 12%)

Oklch

oklch(84.4% 0.045 68.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FABF9B

Apricot · BurlyWood · Peach Orange

HEX

#FABF9B

RGB

rgb(250, 191, 155)

HSL

hsl(23, 90%, 79%)

HSB

hsb(23, 38%, 98%)

CMYK

cmyk(0%, 24%, 38%, 2%)

Oklch

oklch(84.9% 0.083 52.7)

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

#66606E

Ink Gray · DimGray · Charcoal

HEX

#66606E

RGB

rgb(102, 96, 110)

HSL

hsl(266, 7%, 40%)

HSB

hsb(266, 13%, 43%)

CMYK

cmyk(7%, 13%, 0%, 57%)

Oklch

oklch(50.0% 0.023 304.9)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BECAB8

C5B9CB

Analogous

C8CBB9

BECAB8

B9CBBC

Triadic

BECAB8

B9BFCB

CBB9BF

Split-Comp.

BECAB8

BCB9CB

CBB9C8

Tetradic

BECAB8

B9C8CB

C5B9CB

CBBCB9

Contrast Matrix WCAG 2.1 Contrast

BECAB8	CCC8B1	E0C7AD	FABF9B	66606E
—	1.0 Fail	1.0 Fail	1.1 Fail	3.6 AA Large
1.0 Fail	—	1.0 Fail	1.0 Fail	3.6 AA Large
1.0 Fail	1.0 Fail	—	1.0 Fail	3.7 AA Large
1.1 Fail	1.0 Fail	1.0 Fail	—	3.8 AA Large
3.6 AA Large	3.6 AA Large	3.7 AA Large	3.8 AA Large	—

White BG

1.7Fail

1.6Fail

6.1AA

Black BG

12.3AAA

12.5AAA

12.9AAA

13.0AAA

3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C3BC

CACAB7

D5D5B3

E0E0A4

63636B

Deuteranopia

C3C2BD

CBCBB8

D7D8B5

E4E8A6

64646A

Tritanopia

BFC0C1

CCBBBC

DFB8B9

F7ABAC

666867

Achromatopsia

C4C4C4

C7C7C7

CCCCCC

CDCDCD

636363

Shades & Tints Shades & Tints

#BECAB8

Dark

Light

#CCC8B1

Dark

Light

#E0C7AD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #becab8;
  --color-2: #ccc8b1;
  --color-3: #e0c7ad;
  --color-4: #fabf9b;
  --color-5: #66606e;
}

SCSS

$color-1: #becab8;
$color-2: #ccc8b1;
$color-3: #e0c7ad;
$color-4: #fabf9b;
$color-5: #66606e;

TAILWIND

colors: {
  'brand-1': '#becab8',
  'brand-2': '#ccc8b1',
  'brand-3': '#e0c7ad',
  'brand-4': '#fabf9b',
  'brand-5': '#66606e',
}

RGB Array

[190, 202, 184], [204, 200, 177], [224, 199, 173], [250, 191, 155], [102, 96, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BECAB8, #CCC8B1, #E0C7AD, #FABF9B, #66606E 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: #becab8; --color-2: #ccc8b1; --color-3: #e0c7ad; --color-4: #fabf9b; --color-5: #66606e. 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