← Back to Editor

#BC090F · #D66A33 · #CD9850 · #C9AF5F · #608F84

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

#BC090F

Vermilion · FireBrick · Wine Red

HEX
#BC090F
RGB
rgb(188, 9, 15)
HSL
hsl(358, 91%, 39%)
HSB
hsb(358, 95%, 74%)
CMYK
cmyk(0%, 95%, 92%, 26%)
Oklch
oklch(50.2% 0.202 28.1)

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

#D66A33

Tangerine · Chocolate · Warm Sun

HEX
#D66A33
RGB
rgb(214, 106, 51)
HSL
hsl(20, 67%, 52%)
HSB
hsb(20, 76%, 84%)
CMYK
cmyk(0%, 50%, 76%, 16%)
Oklch
oklch(64.3% 0.152 45.2)

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

#CD9850

Ginger · SandyBrown · Warm Sun

HEX
#CD9850
RGB
rgb(205, 152, 80)
HSL
hsl(35, 56%, 56%)
HSB
hsb(35, 61%, 80%)
CMYK
cmyk(0%, 26%, 61%, 20%)
Oklch
oklch(71.6% 0.110 72.9)

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

#C9AF5F

Ginger · SandyBrown · Sunflower

HEX
#C9AF5F
RGB
rgb(201, 175, 95)
HSL
hsl(45, 50%, 58%)
HSB
hsb(45, 53%, 79%)
CMYK
cmyk(0%, 13%, 53%, 21%)
Oklch
oklch(76.0% 0.105 91.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#608F84

Mineral Blue · SlateGray · Mint Ice

HEX
#608F84
RGB
rgb(96, 143, 132)
HSL
hsl(166, 20%, 47%)
HSB
hsb(166, 33%, 56%)
CMYK
cmyk(33%, 0%, 8%, 44%)
Oklch
oklch(61.3% 0.054 178.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BC090F
09BEB8

Analogous

BE0969
BC090F
BE5D09

Triadic

BC090F
0FBE09
090FBE

Split-Comp.

BC090F
09BE5D
0969BE

Tetradic

BC090F
69BE09
09BEB8
5D09BE

Contrast Matrix WCAG 2.1 Contrast

BC090F
D66A33
CD9850
C9AF5F
608F84
—
1.9
Fail
2.6
Fail
3.1
AA Large
1.8
Fail
1.9
Fail
—
1.4
Fail
1.6
Fail
1.0
Fail
2.6
Fail
1.4
Fail
—
1.2
Fail
1.4
Fail
3.1
AA Large
1.6
Fail
1.2
Fail
—
1.7
Fail
1.8
Fail
1.0
Fail
1.4
Fail
1.7
Fail
—
White BG
6.6AA
3.5AA Large
2.6Fail
2.1Fail
3.6AA Large
Black BG
3.2AA Large
6.0AA
8.2AAA
9.8AAA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6D0E
A7A640
B6B661
BEBE72
747587

Deuteranopia

79860D
AEB644
B9BD66
BFC177
726E87

Tritanopia

B30C0C
D14B4D
CA6F72
C88285
628989

Achromatopsia

3F3F3F
848484
A0A0A0
AEAEAE
808080

Shades & Tints Shades & Tints

#BC090F

Dark
Light

#D66A33

Dark
Light

#CD9850

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bc090f;
  --color-2: #d66a33;
  --color-3: #cd9850;
  --color-4: #c9af5f;
  --color-5: #608f84;
}

SCSS

$color-1: #bc090f;
$color-2: #d66a33;
$color-3: #cd9850;
$color-4: #c9af5f;
$color-5: #608f84;

TAILWIND

colors: {
  'brand-1': '#bc090f',
  'brand-2': '#d66a33',
  'brand-3': '#cd9850',
  'brand-4': '#c9af5f',
  'brand-5': '#608f84',
}

RGB Array

[188, 9, 15], [214, 106, 51], [205, 152, 80], [201, 175, 95], [96, 143, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BC090F, #D66A33, #CD9850, #C9AF5F, #608F84 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: #bc090f; --color-2: #d66a33; --color-3: #cd9850; --color-4: #c9af5f; --color-5: #608f84. 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