← Back to Editor

#FC3963 · #B1A978 · #F1B785 · #9C897D · #4C7D77

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FC3963

Peach Pink · Tomato · Coral Red

HEX
#FC3963
RGB
rgb(252, 57, 99)
HSL
hsl(347, 97%, 61%)
HSB
hsb(347, 77%, 99%)
CMYK
cmyk(0%, 77%, 61%, 1%)
Oklch
oklch(65.5% 0.228 14.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#B1A978

Autumn Sage · Tan · Sunflower

HEX
#B1A978
RGB
rgb(177, 169, 120)
HSL
hsl(52, 27%, 58%)
HSB
hsb(52, 32%, 69%)
CMYK
cmyk(0%, 5%, 32%, 31%)
Oklch
oklch(72.9% 0.067 100.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#F1B785

Apricot · BurlyWood · Warm Sun

HEX
#F1B785
RGB
rgb(241, 183, 133)
HSL
hsl(28, 79%, 73%)
HSB
hsb(28, 45%, 95%)
CMYK
cmyk(0%, 24%, 45%, 5%)
Oklch
oklch(82.1% 0.094 61.7)

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

#9C897D

Tangerine · Gray · Warm Sun

HEX
#9C897D
RGB
rgb(156, 137, 125)
HSL
hsl(23, 14%, 55%)
HSB
hsb(23, 20%, 61%)
CMYK
cmyk(0%, 12%, 20%, 39%)
Oklch
oklch(64.4% 0.029 54.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#4C7D77

Mineral Blue · DimGray · Mint Ice

HEX
#4C7D77
RGB
rgb(76, 125, 119)
HSL
hsl(173, 24%, 39%)
HSB
hsb(173, 39%, 49%)
CMYK
cmyk(39%, 0%, 5%, 51%)
Oklch
oklch(55.3% 0.054 185.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FC3963
3BFCD2

Analogous

FC3BC5
FC3963
FC723B

Triadic

FC3963
65FC3B
3B65FC

Split-Comp.

FC3963
3BFC72
3BC5FC

Tetradic

FC3963
C5FC3B
3BFCD2
723BFC

Contrast Matrix WCAG 2.1 Contrast

FC3963
B1A978
F1B785
9C897D
4C7D77
—
1.5
Fail
2.0
Fail
1.1
Fail
1.3
Fail
1.5
Fail
—
1.3
Fail
1.4
Fail
2.0
Fail
2.0
Fail
1.3
Fail
—
1.9
Fail
2.6
Fail
1.1
Fail
1.4
Fail
1.9
Fail
—
1.4
Fail
1.3
Fail
2.0
Fail
2.6
Fail
1.4
Fail
—
White BG
3.6AA Large
2.4Fail
1.8Fail
3.3AA Large
4.7AA
Black BG
5.9AA
8.8AAA
11.9AAA
6.3AA
4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A659
AEAD84
D8D791
949480
616278

Deuteranopia

B3C156
AEAF87
DBE094
959681
5E5B79

Tritanopia

F2514F
B18D8F
EE9B9D
9B8283
4E7A7A

Achromatopsia

787878
A6A6A6
C3C3C3
8D8D8D
6E6E6E

Shades & Tints Shades & Tints

#FC3963

Dark
Light

#B1A978

Dark
Light

#F1B785

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fc3963;
  --color-2: #b1a978;
  --color-3: #f1b785;
  --color-4: #9c897d;
  --color-5: #4c7d77;
}

SCSS

$color-1: #fc3963;
$color-2: #b1a978;
$color-3: #f1b785;
$color-4: #9c897d;
$color-5: #4c7d77;

TAILWIND

colors: {
  'brand-1': '#fc3963',
  'brand-2': '#b1a978',
  'brand-3': '#f1b785',
  'brand-4': '#9c897d',
  'brand-5': '#4c7d77',
}

RGB Array

[252, 57, 99], [177, 169, 120], [241, 183, 133], [156, 137, 125], [76, 125, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FC3963, #B1A978, #F1B785, #9C897D, #4C7D77 is ideal for: corporate websites, product showcases, portfolios. 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: #fc3963; --color-2: #b1a978; --color-3: #f1b785; --color-4: #9c897d; --color-5: #4c7d77. 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. 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