#FD674D + #F0C4A5 + #F0DDC7 + #CCC9BC + #A5C2B8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FD674D

Peach Pink · Tomato · Coral Red

HEX

#FD674D

RGB

rgb(253, 103, 77)

HSL

hsl(9, 98%, 65%)

HSB

hsb(9, 70%, 99%)

CMYK

cmyk(0%, 59%, 70%, 1%)

Oklch

oklch(69.9% 0.188 32.0)

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

#F0C4A5

Apricot · Wheat · Peach Orange

HEX

#F0C4A5

RGB

rgb(240, 196, 165)

HSL

hsl(25, 71%, 79%)

HSB

hsb(25, 31%, 94%)

CMYK

cmyk(0%, 18%, 31%, 6%)

Oklch

oklch(85.1% 0.065 56.9)

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

#F0DDC7

Goose Yellow · Bisque · Peach Orange

HEX

#F0DDC7

RGB

rgb(240, 221, 199)

HSL

hsl(32, 58%, 86%)

HSB

hsb(32, 17%, 94%)

CMYK

cmyk(0%, 8%, 17%, 6%)

Oklch

oklch(90.7% 0.036 71.4)

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

#CCC9BC

Goose Yellow · Silver · Lemon Cream

HEX

#CCC9BC

RGB

rgb(204, 201, 188)

HSL

hsl(49, 14%, 77%)

HSB

hsb(49, 8%, 80%)

CMYK

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

Oklch

oklch(83.5% 0.018 96.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#A5C2B8

Jade · Silver · Apple Green

HEX

#A5C2B8

RGB

rgb(165, 194, 184)

HSL

hsl(159, 19%, 70%)

HSB

hsb(159, 15%, 76%)

CMYK

cmyk(15%, 0%, 5%, 24%)

Oklch

oklch(79.0% 0.034 172.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD674D

4EE3FD

Analogous

FD4E8C

FD674D

FDC04E

Triadic

FD674D

4EFD69

694EFD

Split-Comp.

FD674D

4EFDC0

4E8CFD

Tetradic

FD674D

8CFD4E

4EE3FD

C04EFD

Contrast Matrix WCAG 2.1 Contrast

FD674D	F0C4A5	F0DDC7	CCC9BC	A5C2B8
—	1.8 Fail	2.2 Fail	1.8 Fail	1.5 Fail
1.8 Fail	—	1.2 Fail	1.0 Fail	1.2 Fail
2.2 Fail	1.2 Fail	—	1.3 Fail	1.4 Fail
1.8 Fail	1.0 Fail	1.3 Fail	—	1.1 Fail
1.5 Fail	1.2 Fail	1.4 Fail	1.1 Fail	—

White BG

2.9Fail

1.6Fail

1.3Fail

1.7Fail

1.9Fail

Black BG

7.2AAA

13.1AAA

15.9AAA

12.6AAA

11.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBB53

DDDDAD

E8E8CC

CBCBBF

B2B2BA

Deuteranopia

C5D055

E0E3AE

E9EACE

CBCBC0

B0AEBB

Tritanopia

F65859

EEB2B4

EFD1D1

CCC2C2

A6BCBD

Achromatopsia

919191

CECECE

E0E0E0

C8C8C8

B8B8B8

Shades & Tints Shades & Tints

#FD674D

Dark

Light

#F0C4A5

Dark

Light

#F0DDC7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd674d;
  --color-2: #f0c4a5;
  --color-3: #f0ddc7;
  --color-4: #ccc9bc;
  --color-5: #a5c2b8;
}

SCSS

$color-1: #fd674d;
$color-2: #f0c4a5;
$color-3: #f0ddc7;
$color-4: #ccc9bc;
$color-5: #a5c2b8;

TAILWIND

colors: {
  'brand-1': '#fd674d',
  'brand-2': '#f0c4a5',
  'brand-3': '#f0ddc7',
  'brand-4': '#ccc9bc',
  'brand-5': '#a5c2b8',
}

RGB Array

[253, 103, 77], [240, 196, 165], [240, 221, 199], [204, 201, 188], [165, 194, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FD674D, #F0C4A5, #F0DDC7, #CCC9BC, #A5C2B8 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: #fd674d; --color-2: #f0c4a5; --color-3: #f0ddc7; --color-4: #ccc9bc; --color-5: #a5c2b8. 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