#CAB3A3 + #A27D6B + #CECFAF + #FFFACE + #F7D0A9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CAB3A3

Apricot · Tan · Warm Sun

HEX

#CAB3A3

RGB

rgb(202, 179, 163)

HSL

hsl(25, 27%, 72%)

HSB

hsb(25, 19%, 79%)

CMYK

cmyk(0%, 11%, 19%, 21%)

Oklch

oklch(78.2% 0.035 57.0)

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

#A27D6B

Tangerine · Gray · Warm Sun

HEX

#A27D6B

RGB

rgb(162, 125, 107)

HSL

hsl(20, 23%, 53%)

HSB

hsb(20, 34%, 64%)

CMYK

cmyk(0%, 23%, 34%, 36%)

Oklch

oklch(62.1% 0.053 47.2)

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

#CECFAF

Fresh Green · Silver · Sunflower

HEX

#CECFAF

RGB

rgb(206, 207, 175)

HSL

hsl(62, 25%, 75%)

HSB

hsb(62, 15%, 81%)

CMYK

cmyk(0%, 0%, 15%, 19%)

Oklch

oklch(84.5% 0.043 108.8)

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

#FFFACE

Fresh Green · Beige · Lemon Cream

HEX

#FFFACE

RGB

rgb(255, 250, 206)

HSL

hsl(54, 100%, 90%)

HSB

hsb(54, 19%, 100%)

CMYK

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

Oklch

oklch(97.8% 0.057 102.0)

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

#F7D0A9

Goose Yellow · Wheat · Peach Orange

HEX

#F7D0A9

RGB

rgb(247, 208, 169)

HSL

hsl(30, 83%, 82%)

HSB

hsb(30, 32%, 97%)

CMYK

cmyk(0%, 16%, 32%, 3%)

Oklch

oklch(88.1% 0.068 66.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CAB3A3

A4BBCB

Analogous

CBA4A8

CAB3A3

CBC8A4

Triadic

CAB3A3

A4CBB4

B4A4CB

Split-Comp.

CAB3A3

A4CBC8

A4A8CB

Tetradic

CAB3A3

A8CBA4

A4BBCB

C8A4CB

Contrast Matrix WCAG 2.1 Contrast

CAB3A3	A27D6B	CECFAF	FFFACE	F7D0A9
—	1.8 Fail	1.3 Fail	1.9 Fail	1.4 Fail
1.8 Fail	—	2.3 Fail	3.5 AA Large	2.6 Fail
1.3 Fail	2.3 Fail	—	1.5 Fail	1.1 Fail
1.9 Fail	3.5 AA Large	1.5 Fail	—	1.4 Fail
1.4 Fail	2.6 Fail	1.1 Fail	1.4 Fail	—

White BG

2.0Fail

3.7AA Large

1.6Fail

1.1Fail

1.4Fail

Black BG

10.5AAA

5.7AA

13.2AAA

19.8AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0C0A7

92926F

CECEB7

FDFDD9

E6E6B2

Deuteranopia

C1C3A8

949770

CECEB9

FDFEDB

E8EBB5

Tritanopia

C9AAAB

A07374

CEBDBE

FFE1E3

F5BABC

Achromatopsia

B8B8B8

868686

CBCBCB

F6F6F6

D7D7D7

Shades & Tints Shades & Tints

#CAB3A3

Dark

Light

#A27D6B

Dark

Light

#CECFAF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cab3a3;
  --color-2: #a27d6b;
  --color-3: #cecfaf;
  --color-4: #ffface;
  --color-5: #f7d0a9;
}

SCSS

$color-1: #cab3a3;
$color-2: #a27d6b;
$color-3: #cecfaf;
$color-4: #ffface;
$color-5: #f7d0a9;

TAILWIND

colors: {
  'brand-1': '#cab3a3',
  'brand-2': '#a27d6b',
  'brand-3': '#cecfaf',
  'brand-4': '#ffface',
  'brand-5': '#f7d0a9',
}

RGB Array

[202, 179, 163], [162, 125, 107], [206, 207, 175], [255, 250, 206], [247, 208, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CAB3A3, #A27D6B, #CECFAF, #FFFACE, #F7D0A9 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: #cab3a3; --color-2: #a27d6b; --color-3: #cecfaf; --color-4: #ffface; --color-5: #f7d0a9. 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