← Back to Editor

#778C85 · #C59380 · #F79A6B · #F7BD6A · #F7CF97

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#778C85

Mineral Blue · Gray · Warm Gray

HEX
#778C85
RGB
rgb(119, 140, 133)
HSL
hsl(160, 8%, 51%)
HSB
hsb(160, 15%, 55%)
CMYK
cmyk(15%, 0%, 5%, 45%)
Oklch
oklch(62.1% 0.026 173.3)

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

#C59380

Apricot · DarkSalmon · Warm Sun

HEX
#C59380
RGB
rgb(197, 147, 128)
HSL
hsl(17, 37%, 64%)
HSB
hsb(17, 35%, 77%)
CMYK
cmyk(0%, 25%, 35%, 23%)
Oklch
oklch(70.6% 0.067 41.7)

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

#F79A6B

Apricot · SandyBrown · Warm Sun

HEX
#F79A6B
RGB
rgb(247, 154, 107)
HSL
hsl(20, 90%, 69%)
HSB
hsb(20, 57%, 97%)
CMYK
cmyk(0%, 38%, 57%, 3%)
Oklch
oklch(77.2% 0.128 47.0)

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

#F7BD6A

Ginger · SandyBrown · Warm Sun

HEX
#F7BD6A
RGB
rgb(247, 189, 106)
HSL
hsl(35, 90%, 69%)
HSB
hsb(35, 57%, 97%)
CMYK
cmyk(0%, 23%, 57%, 3%)
Oklch
oklch(83.5% 0.121 74.7)

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

#F7CF97

Goose Yellow · Khaki · Peach Orange

HEX
#F7CF97
RGB
rgb(247, 207, 151)
HSL
hsl(35, 86%, 78%)
HSB
hsb(35, 39%, 97%)
CMYK
cmyk(0%, 16%, 39%, 3%)
Oklch
oklch(87.6% 0.085 75.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

778C85
8C787F

Analogous

788C7B
778C85
78898C

Triadic

778C85
85788C
8C8578

Split-Comp.

778C85
8C7889
8C7B78

Tetradic

778C85
7B788C
8C787F
898C78

Contrast Matrix WCAG 2.1 Contrast

778C85
C59380
F79A6B
F7BD6A
F7CF97
—
1.3
Fail
1.7
Fail
2.1
Fail
2.4
Fail
1.3
Fail
—
1.2
Fail
1.6
Fail
1.8
Fail
1.7
Fail
1.2
Fail
—
1.3
Fail
1.5
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
1.2
Fail
2.4
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
White BG
3.6AA Large
2.7Fail
2.1Fail
1.7Fail
1.5Fail
Black BG
5.9AA
7.9AAA
9.8AAA
12.4AAA
14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

808087
AFAF85
CFCE76
DEDD7E
E6E5A5

Deuteranopia

7F7D87
B2B686
D4DB79
E1E683
E8EBA8

Tritanopia

788888
C28889
F27F81
F48E91
F5AFB2

Achromatopsia

858585
A0A0A0
B0B0B0
C5C5C5
D5D5D5

Shades & Tints Shades & Tints

#778C85

Dark
Light

#C59380

Dark
Light

#F79A6B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #778c85;
  --color-2: #c59380;
  --color-3: #f79a6b;
  --color-4: #f7bd6a;
  --color-5: #f7cf97;
}

SCSS

$color-1: #778c85;
$color-2: #c59380;
$color-3: #f79a6b;
$color-4: #f7bd6a;
$color-5: #f7cf97;

TAILWIND

colors: {
  'brand-1': '#778c85',
  'brand-2': '#c59380',
  'brand-3': '#f79a6b',
  'brand-4': '#f7bd6a',
  'brand-5': '#f7cf97',
}

RGB Array

[119, 140, 133], [197, 147, 128], [247, 154, 107], [247, 189, 106], [247, 207, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #778C85, #C59380, #F79A6B, #F7BD6A, #F7CF97 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #778c85; --color-2: #c59380; --color-3: #f79a6b; --color-4: #f7bd6a; --color-5: #f7cf97. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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