← Back to Editor

#B9566F · #CF5C6B · #CF7971 · #CC9D6F · #697199

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

#B9566F

Crimson · MediumVioletRed · Passion Red

HEX
#B9566F
RGB
rgb(185, 86, 111)
HSL
hsl(345, 41%, 53%)
HSB
hsb(345, 54%, 73%)
CMYK
cmyk(0%, 54%, 40%, 27%)
Oklch
oklch(58.2% 0.130 6.1)

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

#CF5C6B

Crimson · LightCoral · Passion Red

HEX
#CF5C6B
RGB
rgb(207, 92, 107)
HSL
hsl(352, 55%, 59%)
HSB
hsb(352, 56%, 81%)
CMYK
cmyk(0%, 56%, 48%, 19%)
Oklch
oklch(62.2% 0.146 14.3)

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

#CF7971

Peach Pink · LightCoral · Coral Red

HEX
#CF7971
RGB
rgb(207, 121, 113)
HSL
hsl(5, 49%, 63%)
HSB
hsb(5, 45%, 81%)
CMYK
cmyk(0%, 42%, 45%, 19%)
Oklch
oklch(66.8% 0.109 26.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#CC9D6F

Ginger · DarkSalmon · Warm Sun

HEX
#CC9D6F
RGB
rgb(204, 157, 111)
HSL
hsl(30, 48%, 62%)
HSB
hsb(30, 46%, 80%)
CMYK
cmyk(0%, 23%, 46%, 20%)
Oklch
oklch(72.9% 0.083 65.3)

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

#697199

Azure · SlateGray · Navy Blue

HEX
#697199
RGB
rgb(105, 113, 153)
HSL
hsl(230, 19%, 51%)
HSB
hsb(230, 31%, 60%)
CMYK
cmyk(31%, 26%, 0%, 40%)
Oklch
oklch(55.8% 0.063 275.4)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B9566F
56B8A0

Analogous

B856A0
B9566F
B86F56

Triadic

B9566F
6FB856
566FB8

Split-Comp.

B9566F
56B86F
56A0B8

Tetradic

B9566F
A0B856
56B8A0
6F56B8

Contrast Matrix WCAG 2.1 Contrast

B9566F
CF5C6B
CF7971
CC9D6F
697199
—
1.2
Fail
1.4
Fail
1.9
Fail
1.0
Fail
1.2
Fail
—
1.2
Fail
1.6
Fail
1.2
Fail
1.4
Fail
1.2
Fail
—
1.3
Fail
1.5
Fail
1.9
Fail
1.6
Fail
1.3
Fail
—
1.9
Fail
1.0
Fail
1.2
Fail
1.5
Fail
1.9
Fail
—
White BG
4.5AA
3.9AA Large
3.2AA Large
2.4Fail
4.7AA
Black BG
4.6AA
5.4AA
6.6AA
8.6AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8D69
9D9C67
AAA973
B8B77A
6C6D8F

Deuteranopia

949B67
A4AC66
AFB573
BABE7D
6C6B8D

Tritanopia

B46463
C96564
CB7475
CA8385
698886

Achromatopsia

767676
808080
929292
A6A6A6
737373

Shades & Tints Shades & Tints

#B9566F

Dark
Light

#CF5C6B

Dark
Light

#CF7971

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b9566f;
  --color-2: #cf5c6b;
  --color-3: #cf7971;
  --color-4: #cc9d6f;
  --color-5: #697199;
}

SCSS

$color-1: #b9566f;
$color-2: #cf5c6b;
$color-3: #cf7971;
$color-4: #cc9d6f;
$color-5: #697199;

TAILWIND

colors: {
  'brand-1': '#b9566f',
  'brand-2': '#cf5c6b',
  'brand-3': '#cf7971',
  'brand-4': '#cc9d6f',
  'brand-5': '#697199',
}

RGB Array

[185, 86, 111], [207, 92, 107], [207, 121, 113], [204, 157, 111], [105, 113, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B9566F, #CF5C6B, #CF7971, #CC9D6F, #697199 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: #b9566f; --color-2: #cf5c6b; --color-3: #cf7971; --color-4: #cc9d6f; --color-5: #697199. 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