← Back to Editor

#BF697D · #E06376 · #DB5858 · #6B4747 · #424242

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BF697D

Crimson · LightCoral · Passion Red

HEX
#BF697D
RGB
rgb(191, 105, 125)
HSL
hsl(346, 40%, 58%)
HSB
hsb(346, 45%, 75%)
CMYK
cmyk(0%, 45%, 35%, 25%)
Oklch
oklch(62.4% 0.111 5.9)

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

#E06376

Peach Pink · LightCoral · Coral Red

HEX
#E06376
RGB
rgb(224, 99, 118)
HSL
hsl(351, 67%, 63%)
HSB
hsb(351, 56%, 88%)
CMYK
cmyk(0%, 56%, 47%, 12%)
Oklch
oklch(65.9% 0.156 13.1)

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

#DB5858

Vermilion · Tomato · Passion Red

HEX
#DB5858
RGB
rgb(219, 88, 88)
HSL
hsl(0, 65%, 60%)
HSB
hsb(0, 60%, 86%)
CMYK
cmyk(0%, 60%, 60%, 14%)
Oklch
oklch(63.0% 0.165 23.1)

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

#6B4747

Crimson · DimGray · Wine Red

HEX
#6B4747
RGB
rgb(107, 71, 71)
HSL
hsl(0, 20%, 35%)
HSB
hsb(0, 34%, 42%)
CMYK
cmyk(0%, 34%, 34%, 58%)
Oklch
oklch(43.8% 0.050 19.3)

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

#424242

Dark Cyan · DarkSlateGray · Charcoal

HEX
#424242
RGB
rgb(66, 66, 66)
HSL
hsl(0, 0%, 26%)
HSB
hsb(0, 0%, 26%)
CMYK
cmyk(0%, 0%, 0%, 74%)
Oklch
oklch(37.9% 0.000 89.9)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BF697D
69BFAB

Analogous

BF69A8
BF697D
BF8069

Triadic

BF697D
7DBF69
697DBF

Split-Comp.

BF697D
69BF80
69A8BF

Tetradic

BF697D
A8BF69
69BFAB
8069BF

Contrast Matrix WCAG 2.1 Contrast

BF697D
E06376
DB5858
6B4747
424242
—
1.1
Fail
1.0
Fail
2.1
Fail
2.6
Fail
1.1
Fail
—
1.1
Fail
2.4
Fail
3.0
Fail
1.0
Fail
1.1
Fail
—
2.1
Fail
2.7
Fail
2.1
Fail
2.4
Fail
2.1
Fail
—
1.3
Fail
2.6
Fail
3.0
Fail
2.7
Fail
1.3
Fail
—
White BG
3.8AA Large
3.4AA Large
3.8AA Large
8.0AAA
10.0AAA
Black BG
5.5AA
6.2AA
5.5AA
2.6Fail
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9978
AAA971
A2A158
5B5B47
424242

Deuteranopia

9FA577
B1BA70
AAB458
5E6047
424242

Tritanopia

BB7474
DA6E6D
D45858
694747
424242

Achromatopsia

858585
8B8B8B
7F7F7F
525252
424242

Shades & Tints Shades & Tints

#BF697D

Dark
Light

#E06376

Dark
Light

#DB5858

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bf697d;
  --color-2: #e06376;
  --color-3: #db5858;
  --color-4: #6b4747;
  --color-5: #424242;
}

SCSS

$color-1: #bf697d;
$color-2: #e06376;
$color-3: #db5858;
$color-4: #6b4747;
$color-5: #424242;

TAILWIND

colors: {
  'brand-1': '#bf697d',
  'brand-2': '#e06376',
  'brand-3': '#db5858',
  'brand-4': '#6b4747',
  'brand-5': '#424242',
}

RGB Array

[191, 105, 125], [224, 99, 118], [219, 88, 88], [107, 71, 71], [66, 66, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BF697D, #E06376, #DB5858, #6B4747, #424242 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: #bf697d; --color-2: #e06376; --color-3: #db5858; --color-4: #6b4747; --color-5: #424242. 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