#F39C89 + #FFCCA1 + #F3E1C8 + #BED7C3 + #88A99D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F39C89

Peach Pink · DarkSalmon · Coral Red

HEX

#F39C89

RGB

rgb(243, 156, 137)

HSL

hsl(11, 82%, 75%)

HSB

hsb(11, 44%, 95%)

CMYK

cmyk(0%, 36%, 44%, 5%)

Oklch

oklch(77.6% 0.109 33.0)

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

#FFCCA1

Apricot · Wheat · Peach Orange

HEX

#FFCCA1

RGB

rgb(255, 204, 161)

HSL

hsl(27, 100%, 82%)

HSB

hsb(27, 37%, 100%)

CMYK

cmyk(0%, 20%, 37%, 0%)

Oklch

oklch(88.0% 0.081 61.6)

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

#F3E1C8

Goose Yellow · Bisque · Peach Orange

HEX

#F3E1C8

RGB

rgb(243, 225, 200)

HSL

hsl(35, 64%, 87%)

HSB

hsb(35, 18%, 95%)

CMYK

cmyk(0%, 7%, 18%, 5%)

Oklch

oklch(91.8% 0.039 76.2)

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

#BED7C3

Celadon · Silver · Apple Green

HEX

#BED7C3

RGB

rgb(190, 215, 195)

HSL

hsl(132, 24%, 79%)

HSB

hsb(132, 12%, 84%)

CMYK

cmyk(12%, 0%, 9%, 16%)

Oklch

oklch(85.5% 0.038 151.3)

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

#88A99D

Mineral Blue · DarkSeaGreen · Olive Green

HEX

#88A99D

RGB

rgb(136, 169, 157)

HSL

hsl(158, 16%, 60%)

HSB

hsb(158, 20%, 66%)

CMYK

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

Oklch

oklch(70.7% 0.040 171.0)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F39C89

8BE0F4

Analogous

F48BAC

F39C89

F4D28B

Triadic

F39C89

8BF49E

9E8BF4

Split-Comp.

F39C89

8BF4D2

8BACF4

Tetradic

F39C89

ACF48B

8BE0F4

D28BF4

Contrast Matrix WCAG 2.1 Contrast

F39C89	FFCCA1	F3E1C8	BED7C3	88A99D
—	1.5 Fail	1.7 Fail	1.4 Fail	1.2 Fail
1.5 Fail	—	1.1 Fail	1.1 Fail	1.8 Fail
1.7 Fail	1.1 Fail	—	1.2 Fail	2.0 Fail
1.4 Fail	1.1 Fail	1.2 Fail	—	1.7 Fail
1.2 Fail	1.8 Fail	2.0 Fail	1.7 Fail	—

White BG

2.1Fail

1.5Fail

1.3Fail

1.5Fail

2.6Fail

Black BG

9.9AAA

14.4AAA

16.4AAA

13.7AAA

8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCD8E

E9E8AB

EBEBCE

C9C9C8

9697A0

Deuteranopia

D2D98F

ECF0AE

ECEED0

C7C6C9

9492A1

Tritanopia

EF9192

FCB4B5

F2D3D4

BFCCCD

8AA2A3

Achromatopsia

B4B4B4

D6D6D6

E4E4E4

CDCDCD

9E9E9E

Shades & Tints Shades & Tints

#F39C89

Dark

Light

#FFCCA1

Dark

Light

#F3E1C8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f39c89;
  --color-2: #ffcca1;
  --color-3: #f3e1c8;
  --color-4: #bed7c3;
  --color-5: #88a99d;
}

SCSS

$color-1: #f39c89;
$color-2: #ffcca1;
$color-3: #f3e1c8;
$color-4: #bed7c3;
$color-5: #88a99d;

TAILWIND

colors: {
  'brand-1': '#f39c89',
  'brand-2': '#ffcca1',
  'brand-3': '#f3e1c8',
  'brand-4': '#bed7c3',
  'brand-5': '#88a99d',
}

RGB Array

[243, 156, 137], [255, 204, 161], [243, 225, 200], [190, 215, 195], [136, 169, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F39C89, #FFCCA1, #F3E1C8, #BED7C3, #88A99D 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: #f39c89; --color-2: #ffcca1; --color-3: #f3e1c8; --color-4: #bed7c3; --color-5: #88a99d. 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