#FFC2AF + #D5C2AF + #B3C2AF + #9EB8AF + #7DB4AF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFC2AF

Peach Pink · LightPink · Cherry Blossom

HEX

#FFC2AF

RGB

rgb(255, 194, 175)

HSL

hsl(14, 100%, 84%)

HSB

hsb(14, 31%, 100%)

CMYK

cmyk(0%, 24%, 31%, 0%)

Oklch

oklch(86.4% 0.075 38.0)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#D5C2AF

Goose Yellow · Silver · Peach Orange

HEX

#D5C2AF

RGB

rgb(213, 194, 175)

HSL

hsl(30, 31%, 76%)

HSB

hsb(30, 18%, 84%)

CMYK

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

Oklch

oklch(82.5% 0.034 67.3)

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

#B3C2AF

Celadon · Silver · Apple Green

HEX

#B3C2AF

RGB

rgb(179, 194, 175)

HSL

hsl(107, 13%, 72%)

HSB

hsb(107, 10%, 76%)

CMYK

cmyk(8%, 0%, 10%, 24%)

Oklch

oklch(79.7% 0.031 139.1)

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

#9EB8AF

Jade · DarkGray · Apple Green

HEX

#9EB8AF

RGB

rgb(158, 184, 175)

HSL

hsl(159, 15%, 67%)

HSB

hsb(159, 14%, 72%)

CMYK

cmyk(14%, 0%, 5%, 28%)

Oklch

oklch(76.0% 0.031 172.6)

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

#7DB4AF

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#7DB4AF

RGB

rgb(125, 180, 175)

HSL

hsl(175, 27%, 60%)

HSB

hsb(175, 31%, 71%)

CMYK

cmyk(31%, 0%, 3%, 29%)

Oklch

oklch(73.0% 0.058 188.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFC2AF

ADECFF

Analogous

FFADC3

FFC2AF

FFE9AD

Triadic

FFC2AF

ADFFC0

C0ADFF

Split-Comp.

FFC2AF

ADFFE9

ADC3FF

Tetradic

FFC2AF

C3FFAD

ADECFF

E9ADFF

Contrast Matrix WCAG 2.1 Contrast

FFC2AF	D5C2AF	B3C2AF	9EB8AF	7DB4AF
—	1.1 Fail	1.2 Fail	1.4 Fail	1.5 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.4 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.5 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.5Fail

1.7Fail

1.9Fail

2.1Fail

2.3Fail

Black BG

13.6AAA

12.2AAA

11.3AAA

9.9AAA

9.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E4B4

CDCDB4

B9BAB4

A9A9B1

9595B0

Deuteranopia

E8EDB5

CECFB5

B9B8B5

A8A6B2

928EB1

Tritanopia

FCB7B8

D4B7B8

B4B7B8

9FB3B3

80B1B1

Achromatopsia

D2D2D2

C6C6C6

BBBBBB

AFAFAF

A3A3A3

Shades & Tints Shades & Tints

#FFC2AF

Dark

Light

#D5C2AF

Dark

Light

#B3C2AF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffc2af;
  --color-2: #d5c2af;
  --color-3: #b3c2af;
  --color-4: #9eb8af;
  --color-5: #7db4af;
}

SCSS

$color-1: #ffc2af;
$color-2: #d5c2af;
$color-3: #b3c2af;
$color-4: #9eb8af;
$color-5: #7db4af;

TAILWIND

colors: {
  'brand-1': '#ffc2af',
  'brand-2': '#d5c2af',
  'brand-3': '#b3c2af',
  'brand-4': '#9eb8af',
  'brand-5': '#7db4af',
}

RGB Array

[255, 194, 175], [213, 194, 175], [179, 194, 175], [158, 184, 175], [125, 180, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFC2AF, #D5C2AF, #B3C2AF, #9EB8AF, #7DB4AF 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: #ffc2af; --color-2: #d5c2af; --color-3: #b3c2af; --color-4: #9eb8af; --color-5: #7db4af. 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