← Back to Editor

#7CC5BA · #F7D780 · #D9B632 · #C8770E · #785116

muted

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#7CC5BA

Jade · MediumAquaMarine · Lake Green

HEX
#7CC5BA
RGB
rgb(124, 197, 186)
HSL
hsl(171, 39%, 63%)
HSB
hsb(171, 37%, 77%)
CMYK
cmyk(37%, 0%, 6%, 23%)
Oklch
oklch(77.2% 0.075 183.8)

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

#F7D780

Goose Yellow · Khaki · Sunflower

HEX
#F7D780
RGB
rgb(247, 215, 128)
HSL
hsl(44, 88%, 74%)
HSB
hsb(44, 48%, 97%)
CMYK
cmyk(0%, 13%, 48%, 3%)
Oklch
oklch(88.8% 0.112 89.8)

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

#D9B632

Ginger · GoldenRod · Sunflower

HEX
#D9B632
RGB
rgb(217, 182, 50)
HSL
hsl(47, 69%, 52%)
HSB
hsb(47, 77%, 85%)
CMYK
cmyk(0%, 16%, 77%, 15%)
Oklch
oklch(78.5% 0.146 93.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#C8770E

Ochre · DarkGoldenRod · Amber Brown

HEX
#C8770E
RGB
rgb(200, 119, 14)
HSL
hsl(34, 87%, 42%)
HSB
hsb(34, 93%, 78%)
CMYK
cmyk(0%, 41%, 93%, 22%)
Oklch
oklch(64.3% 0.142 63.7)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#785116

Ochre · Sienna · Amber Brown

HEX
#785116
RGB
rgb(120, 81, 22)
HSL
hsl(36, 69%, 28%)
HSB
hsb(36, 82%, 47%)
CMYK
cmyk(0%, 33%, 82%, 53%)
Oklch
oklch(46.7% 0.089 72.7)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7CC5BA
C57C87

Analogous

7CC596
7CC5BA
7CACC5

Triadic

7CC5BA
BA7CC5
C5BA7C

Split-Comp.

7CC5BA
C57CAC
C5967C

Tetradic

7CC5BA
967CC5
C57C87
ACC57C

Contrast Matrix WCAG 2.1 Contrast

7CC5BA
F7D780
D9B632
C8770E
785116
—
1.4
Fail
1.0
Fail
1.7
Fail
3.5
AA Large
1.4
Fail
—
1.4
Fail
2.5
Fail
5.0
AA
1.0
Fail
1.4
Fail
—
1.8
Fail
3.6
AA Large
1.7
Fail
2.5
Fail
1.8
Fail
—
2.0
Fail
3.5
AA Large
5.0
AA
3.6
AA Large
2.0
Fail
—
White BG
2.0Fail
1.4Fail
2.0Fail
3.4AA Large
7.0AAA
Black BG
10.6AAA
15.0AAA
10.7AAA
6.1AA
3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9CBD
E9E995
CACA52
A5A427
676724

Deuteranopia

9792BD
EBED9A
CCCE5A
AAB02D
696C28

Tritanopia

80BFBF
F5A6A9
D76B71
C43B40
763032

Achromatopsia

AEAEAE
D7D7D7
B1B1B1
838383
565656

Shades & Tints Shades & Tints

#7CC5BA

Dark
Light

#F7D780

Dark
Light

#D9B632

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7cc5ba;
  --color-2: #f7d780;
  --color-3: #d9b632;
  --color-4: #c8770e;
  --color-5: #785116;
}

SCSS

$color-1: #7cc5ba;
$color-2: #f7d780;
$color-3: #d9b632;
$color-4: #c8770e;
$color-5: #785116;

TAILWIND

colors: {
  'brand-1': '#7cc5ba',
  'brand-2': '#f7d780',
  'brand-3': '#d9b632',
  'brand-4': '#c8770e',
  'brand-5': '#785116',
}

RGB Array

[124, 197, 186], [247, 215, 128], [217, 182, 50], [200, 119, 14], [120, 81, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #7CC5BA, #F7D780, #D9B632, #C8770E, #785116 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #7cc5ba; --color-2: #f7d780; --color-3: #d9b632; --color-4: #c8770e; --color-5: #785116. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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 muted-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