#F7CCAA + #FAB993 + #FF9E74 + #879999 + #5D7581 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7CCAA

Apricot · Wheat · Peach Orange

HEX

#F7CCAA

RGB

rgb(247, 204, 170)

HSL

hsl(26, 83%, 82%)

HSB

hsb(26, 31%, 97%)

CMYK

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

Oklch

oklch(87.4% 0.066 60.1)

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

#FAB993

Apricot · BurlyWood · Peach Orange

HEX

#FAB993

RGB

rgb(250, 185, 147)

HSL

hsl(22, 91%, 78%)

HSB

hsb(22, 41%, 98%)

CMYK

cmyk(0%, 26%, 41%, 2%)

Oklch

oklch(83.7% 0.091 51.4)

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

#FF9E74

Apricot · LightSalmon · Warm Sun

HEX

#FF9E74

RGB

rgb(255, 158, 116)

HSL

hsl(18, 100%, 73%)

HSB

hsb(18, 55%, 100%)

CMYK

cmyk(0%, 38%, 55%, 0%)

Oklch

oklch(78.9% 0.129 43.9)

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

#879999

Slate Blue · LightSlateGray · Silver Sand

HEX

#879999

RGB

rgb(135, 153, 153)

HSL

hsl(180, 8%, 56%)

HSB

hsb(180, 12%, 60%)

CMYK

cmyk(12%, 0%, 0%, 40%)

Oklch

oklch(66.9% 0.020 196.7)

Traditional「Slate Blue」· Paint「Silver Sand」· Creative Urban Concrete

#5D7581

Slate Blue · SlateGray · Navy Blue

HEX

#5D7581

RGB

rgb(93, 117, 129)

HSL

hsl(200, 16%, 44%)

HSB

hsb(200, 28%, 51%)

CMYK

cmyk(28%, 9%, 0%, 49%)

Oklch

oklch(54.8% 0.034 229.8)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7CCAA

ABD6F7

Analogous

F7ABB0

F7CCAA

F7F2AB

Triadic

F7CCAA

ABF7CC

CCABF7

Split-Comp.

F7CCAA

ABF7F2

ABB0F7

Tetradic

F7CCAA

B0F7AB

ABD6F7

F2ABF7

Contrast Matrix WCAG 2.1 Contrast

F7CCAA	FAB993	FF9E74	879999	5D7581
—	1.1 Fail	1.4 Fail	2.0 Fail	3.3 AA Large
1.1 Fail	—	1.2 Fail	1.8 Fail	2.9 Fail
1.4 Fail	1.2 Fail	—	1.5 Fail	2.4 Fail
2.0 Fail	1.8 Fail	1.5 Fail	—	1.6 Fail
3.3 AA Large	2.9 Fail	2.4 Fail	1.6 Fail	—

White BG

1.5Fail

1.7Fail

2.0Fail

3.0Fail

4.9AA

Black BG

14.2AAA

12.4AAA

10.4AAA

7.0AAA

4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E4B2

DEDD9C

D5D47E

8F8F99

67687E

Deuteranopia

E7EAB4

E2E79E

DBE281

8E8C99

66647D

Tritanopia

F5B9BA

F7A3A5

FA8688

889999

5E7C7B

Achromatopsia

D5D5D5

C8C8C8

B6B6B6

949494

6F6F6F

Shades & Tints Shades & Tints

#F7CCAA

Dark

Light

#FAB993

Dark

Light

#FF9E74

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7ccaa;
  --color-2: #fab993;
  --color-3: #ff9e74;
  --color-4: #879999;
  --color-5: #5d7581;
}

SCSS

$color-1: #f7ccaa;
$color-2: #fab993;
$color-3: #ff9e74;
$color-4: #879999;
$color-5: #5d7581;

TAILWIND

colors: {
  'brand-1': '#f7ccaa',
  'brand-2': '#fab993',
  'brand-3': '#ff9e74',
  'brand-4': '#879999',
  'brand-5': '#5d7581',
}

RGB Array

[247, 204, 170], [250, 185, 147], [255, 158, 116], [135, 153, 153], [93, 117, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7CCAA, #FAB993, #FF9E74, #879999, #5D7581 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: #f7ccaa; --color-2: #fab993; --color-3: #ff9e74; --color-4: #879999; --color-5: #5d7581. 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