← Back to Editor

#7B4F60 · #647C80 · #B7A098 · #C9D7C0 · #F55525

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

#7B4F60

Dark Violet · DimGray · Camellia

HEX
#7B4F60
RGB
rgb(123, 79, 96)
HSL
hsl(337, 22%, 40%)
HSB
hsb(337, 36%, 48%)
CMYK
cmyk(0%, 36%, 22%, 52%)
Oklch
oklch(48.2% 0.064 354.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#647C80

Slate Blue · SlateGray · Mint Ice

HEX
#647C80
RGB
rgb(100, 124, 128)
HSL
hsl(189, 12%, 45%)
HSB
hsb(189, 22%, 50%)
CMYK
cmyk(22%, 3%, 0%, 50%)
Oklch
oklch(56.9% 0.029 208.8)

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

#B7A098

Apricot · DarkGray · Warm Sun

HEX
#B7A098
RGB
rgb(183, 160, 152)
HSL
hsl(15, 18%, 66%)
HSB
hsb(15, 17%, 72%)
CMYK
cmyk(0%, 13%, 17%, 28%)
Oklch
oklch(72.4% 0.030 40.1)

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

#C9D7C0

Celadon · LightGray · Apple Green

HEX
#C9D7C0
RGB
rgb(201, 215, 192)
HSL
hsl(97, 22%, 80%)
HSB
hsb(97, 11%, 84%)
CMYK
cmyk(7%, 0%, 11%, 16%)
Oklch
oklch(86.2% 0.035 133.0)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#F55525

Vermilion · Tomato · Passion Red

HEX
#F55525
RGB
rgb(245, 85, 37)
HSL
hsl(14, 91%, 55%)
HSB
hsb(14, 85%, 96%)
CMYK
cmyk(0%, 65%, 85%, 4%)
Oklch
oklch(66.1% 0.204 36.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7B4F60
507C6B

Analogous

7C5077
7B4F60
7C5550

Triadic

7B4F60
617C50
50617C

Split-Comp.

7B4F60
507C55
50777C

Tetradic

7B4F60
777C50
507C6B
55507C

Contrast Matrix WCAG 2.1 Contrast

7B4F60
647C80
B7A098
C9D7C0
F55525
—
1.5
Fail
2.7
Fail
4.5
AA Large
2.0
Fail
1.5
Fail
—
1.8
Fail
2.9
Fail
1.3
Fail
2.7
Fail
1.8
Fail
—
1.6
Fail
1.4
Fail
4.5
AA Large
2.9
Fail
1.6
Fail
—
2.2
Fail
2.0
Fail
1.3
Fail
1.4
Fail
2.2
Fail
—
White BG
6.7AA
4.4AA Large
2.5Fail
1.5Fail
3.4AA Large
Black BG
3.1AA Large
4.7AA
8.5AAA
14.0AAA
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

68685C
6E6F7F
ADAD9A
CFCFC6
B0AE31

Deuteranopia

6B6E5B
6D6B7F
AEB09A
CECDC7
B9C533

Tritanopia

795958
657E7E
B69B9C
CACACB
ED3A3C

Achromatopsia

5E5E5E
757575
A6A6A6
D0D0D0
7F7F7F

Shades & Tints Shades & Tints

#7B4F60

Dark
Light

#647C80

Dark
Light

#B7A098

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7b4f60;
  --color-2: #647c80;
  --color-3: #b7a098;
  --color-4: #c9d7c0;
  --color-5: #f55525;
}

SCSS

$color-1: #7b4f60;
$color-2: #647c80;
$color-3: #b7a098;
$color-4: #c9d7c0;
$color-5: #f55525;

TAILWIND

colors: {
  'brand-1': '#7b4f60',
  'brand-2': '#647c80',
  'brand-3': '#b7a098',
  'brand-4': '#c9d7c0',
  'brand-5': '#f55525',
}

RGB Array

[123, 79, 96], [100, 124, 128], [183, 160, 152], [201, 215, 192], [245, 85, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7B4F60, #647C80, #B7A098, #C9D7C0, #F55525 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: #7b4f60; --color-2: #647c80; --color-3: #b7a098; --color-4: #c9d7c0; --color-5: #f55525. 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