#F1E9DC + #C3CCBB + #CCA470 + #CD8785 + #75828B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F1E9DC

Goose Yellow · Beige · Peach Orange

HEX

#F1E9DC

RGB

rgb(241, 233, 220)

HSL

hsl(37, 43%, 90%)

HSB

hsb(37, 9%, 95%)

CMYK

cmyk(0%, 3%, 9%, 5%)

Oklch

oklch(93.7% 0.019 80.1)

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

#C3CCBB

Celadon · Silver · Apple Green

HEX

#C3CCBB

RGB

rgb(195, 204, 187)

HSL

hsl(92, 14%, 77%)

HSB

hsb(92, 8%, 80%)

CMYK

cmyk(4%, 0%, 8%, 20%)

Oklch

oklch(83.3% 0.025 129.9)

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

#CCA470

Ginger · Tan · Warm Sun

HEX

#CCA470

RGB

rgb(204, 164, 112)

HSL

hsl(34, 47%, 62%)

HSB

hsb(34, 45%, 80%)

CMYK

cmyk(0%, 20%, 45%, 20%)

Oklch

oklch(74.3% 0.083 73.3)

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

#CD8785

Peach Pink · DarkSalmon · Coral Red

HEX

#CD8785

RGB

rgb(205, 135, 133)

HSL

hsl(2, 42%, 66%)

HSB

hsb(2, 35%, 80%)

CMYK

cmyk(0%, 34%, 35%, 20%)

Oklch

oklch(69.4% 0.087 21.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#75828B

Slate Blue · SlateGray · Warm Gray

HEX

#75828B

RGB

rgb(117, 130, 139)

HSL

hsl(205, 9%, 50%)

HSB

hsb(205, 16%, 55%)

CMYK

cmyk(16%, 6%, 0%, 45%)

Oklch

oklch(59.9% 0.021 238.0)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1E9DC

DBE3F0

Analogous

F0DDDB

F1E9DC

EEF0DB

Triadic

F1E9DC

DBF0E8

E8DBF0

Split-Comp.

F1E9DC

DBEEF0

DDDBF0

Tetradic

F1E9DC

DBF0DD

DBE3F0

F0DBEE

Contrast Matrix WCAG 2.1 Contrast

F1E9DC	C3CCBB	CCA470	CD8785	75828B
—	1.4 Fail	1.9 Fail	2.4 Fail	3.3 AA Large
1.4 Fail	—	1.4 Fail	1.7 Fail	2.4 Fail
1.9 Fail	1.4 Fail	—	1.2 Fail	1.7 Fail
2.4 Fail	1.7 Fail	1.2 Fail	—	1.4 Fail
3.3 AA Large	2.4 Fail	1.7 Fail	1.4 Fail	—

White BG

1.2Fail

1.7Fail

2.3Fail

2.8Fail

3.9AA Large

Black BG

17.4AAA

12.7AAA

9.1AAA

7.4AAA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEDDF

C7C7BF

BBBA7D

AFAE85

7B7B89

Deuteranopia

EEEFE0

C6C6C0

BDC080

B3B886

7A7988

Tritanopia

F1E2E2

C3C2C3

CA8789

CA8686

768787

Achromatopsia

EAEAEA

C7C7C7

AAAAAA

9C9C9C

7F7F7F

Shades & Tints Shades & Tints

#F1E9DC

Dark

Light

#C3CCBB

Dark

Light

#CCA470

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1e9dc;
  --color-2: #c3ccbb;
  --color-3: #cca470;
  --color-4: #cd8785;
  --color-5: #75828b;
}

SCSS

$color-1: #f1e9dc;
$color-2: #c3ccbb;
$color-3: #cca470;
$color-4: #cd8785;
$color-5: #75828b;

TAILWIND

colors: {
  'brand-1': '#f1e9dc',
  'brand-2': '#c3ccbb',
  'brand-3': '#cca470',
  'brand-4': '#cd8785',
  'brand-5': '#75828b',
}

RGB Array

[241, 233, 220], [195, 204, 187], [204, 164, 112], [205, 135, 133], [117, 130, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1E9DC, #C3CCBB, #CCA470, #CD8785, #75828B 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: #f1e9dc; --color-2: #c3ccbb; --color-3: #cca470; --color-4: #cd8785; --color-5: #75828b. 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