← Back to Editor

#B88863 · #C9627C · #F200BA · #7D3777 · #4C4959

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

#B88863

Tangerine · DarkSalmon · Warm Sun

HEX
#B88863
RGB
rgb(184, 136, 99)
HSL
hsl(26, 37%, 55%)
HSB
hsb(26, 46%, 72%)
CMYK
cmyk(0%, 26%, 46%, 28%)
Oklch
oklch(66.5% 0.078 58.5)

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

#C9627C

Crimson · LightCoral · Passion Red

HEX
#C9627C
RGB
rgb(201, 98, 124)
HSL
hsl(345, 49%, 59%)
HSB
hsb(345, 51%, 79%)
CMYK
cmyk(0%, 51%, 38%, 21%)
Oklch
oklch(62.6% 0.133 5.7)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#F200BA

Rose Purple · DeepPink · Violet

HEX
#F200BA
RGB
rgb(242, 0, 186)
HSL
hsl(314, 100%, 47%)
HSB
hsb(314, 100%, 95%)
CMYK
cmyk(0%, 100%, 23%, 5%)
Oklch
oklch(64.5% 0.277 342.4)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#7D3777

Rose Purple · DimGray · Eggplant

HEX
#7D3777
RGB
rgb(125, 55, 119)
HSL
hsl(305, 39%, 35%)
HSB
hsb(305, 56%, 49%)
CMYK
cmyk(0%, 56%, 5%, 51%)
Oklch
oklch(45.5% 0.128 330.8)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#4C4959

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#4C4959
RGB
rgb(76, 73, 89)
HSL
hsl(251, 10%, 32%)
HSB
hsb(251, 18%, 35%)
CMYK
cmyk(15%, 18%, 0%, 65%)
Oklch
oklch(41.4% 0.027 293.8)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B88863
6292B7

Analogous

B76267
B88863
B7B162

Triadic

B88863
62B787
8762B7

Split-Comp.

B88863
62B7B1
6267B7

Tetradic

B88863
67B762
6292B7
B162B7

Contrast Matrix WCAG 2.1 Contrast

B88863
C9627C
F200BA
7D3777
4C4959
—
1.2
Fail
1.2
Fail
2.5
Fail
2.8
Fail
1.2
Fail
—
1.0
Fail
2.1
Fail
2.3
Fail
1.2
Fail
1.0
Fail
—
2.0
Fail
2.3
Fail
2.5
Fail
2.1
Fail
2.0
Fail
—
1.1
Fail
2.8
Fail
2.3
Fail
2.3
Fail
1.1
Fail
—
White BG
3.1AA Large
3.8AA Large
3.8AA Large
7.8AAA
8.7AAA
Black BG
6.7AA
5.5AA
5.5AA
2.7Fail
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A36C
9C9B76
89878D
5F5E68
4B4B55

Deuteranopia

A6AA6E
A2AA74
97A982
636864
4B4B54

Tritanopia

B67375
C47170
E66962
7A5B59
4C5251

Achromatopsia

929292
848484
5E5E5E
535353
4C4C4C

Shades & Tints Shades & Tints

#B88863

Dark
Light

#C9627C

Dark
Light

#F200BA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b88863;
  --color-2: #c9627c;
  --color-3: #f200ba;
  --color-4: #7d3777;
  --color-5: #4c4959;
}

SCSS

$color-1: #b88863;
$color-2: #c9627c;
$color-3: #f200ba;
$color-4: #7d3777;
$color-5: #4c4959;

TAILWIND

colors: {
  'brand-1': '#b88863',
  'brand-2': '#c9627c',
  'brand-3': '#f200ba',
  'brand-4': '#7d3777',
  'brand-5': '#4c4959',
}

RGB Array

[184, 136, 99], [201, 98, 124], [242, 0, 186], [125, 55, 119], [76, 73, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B88863, #C9627C, #F200BA, #7D3777, #4C4959 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: #b88863; --color-2: #c9627c; --color-3: #f200ba; --color-4: #7d3777; --color-5: #4c4959. 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