← Back to Editor

#B74E39 · #71A2A9 · #F1ECC6 · #9D9B60 · #E0AF49

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

#B74E39

Crimson · Sienna · Passion Red

HEX
#B74E39
RGB
rgb(183, 78, 57)
HSL
hsl(10, 53%, 47%)
HSB
hsb(10, 69%, 72%)
CMYK
cmyk(0%, 57%, 69%, 28%)
Oklch
oklch(55.6% 0.141 33.0)

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

#71A2A9

Slate Blue · CadetBlue · Lake Green

HEX
#71A2A9
RGB
rgb(113, 162, 169)
HSL
hsl(188, 25%, 55%)
HSB
hsb(188, 33%, 66%)
CMYK
cmyk(33%, 4%, 0%, 34%)
Oklch
oklch(68.0% 0.053 207.1)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#F1ECC6

Fresh Green · Bisque · Lemon Cream

HEX
#F1ECC6
RGB
rgb(241, 236, 198)
HSL
hsl(53, 61%, 86%)
HSB
hsb(53, 18%, 95%)
CMYK
cmyk(0%, 2%, 18%, 5%)
Oklch
oklch(93.7% 0.050 101.1)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#9D9B60

Autumn Sage · Gray · Honey Gold

HEX
#9D9B60
RGB
rgb(157, 155, 96)
HSL
hsl(58, 24%, 50%)
HSB
hsb(58, 39%, 62%)
CMYK
cmyk(0%, 1%, 39%, 38%)
Oklch
oklch(67.7% 0.080 106.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#E0AF49

Ginger · SandyBrown · Sunflower

HEX
#E0AF49
RGB
rgb(224, 175, 73)
HSL
hsl(41, 71%, 58%)
HSB
hsb(41, 67%, 88%)
CMYK
cmyk(0%, 22%, 67%, 12%)
Oklch
oklch(78.0% 0.131 82.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B74E39
38A2B7

Analogous

B73863
B74E39
B78D38

Triadic

B74E39
38B74E
4E38B7

Split-Comp.

B74E39
38B78D
3863B7

Tetradic

B74E39
63B738
38A2B7
8D38B7

Contrast Matrix WCAG 2.1 Contrast

B74E39
71A2A9
F1ECC6
9D9B60
E0AF49
—
1.8
Fail
4.2
AA Large
1.8
Fail
2.5
Fail
1.8
Fail
—
2.4
Fail
1.0
Fail
1.4
Fail
4.2
AA Large
2.4
Fail
—
2.4
Fail
1.7
Fail
1.8
Fail
1.0
Fail
2.4
Fail
—
1.4
Fail
2.5
Fail
1.4
Fail
1.7
Fail
1.4
Fail
—
White BG
5.0AA
2.8Fail
1.2Fail
2.9Fail
2.0Fail
Black BG
4.2AA Large
7.4AAA
17.6AAA
7.3AAA
10.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A893E
8687A7
EFEFCF
9C9C6E
CBCA62

Deuteranopia

90983F
8380A7
EFF0D1
9C9C72
CED168

Tritanopia

B24243
73A6A6
F1D6D8
9D7A7C
DE7579

Achromatopsia

6B6B6B
949494
E9E9E9
959595
B2B2B2

Shades & Tints Shades & Tints

#B74E39

Dark
Light

#71A2A9

Dark
Light

#F1ECC6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b74e39;
  --color-2: #71a2a9;
  --color-3: #f1ecc6;
  --color-4: #9d9b60;
  --color-5: #e0af49;
}

SCSS

$color-1: #b74e39;
$color-2: #71a2a9;
$color-3: #f1ecc6;
$color-4: #9d9b60;
$color-5: #e0af49;

TAILWIND

colors: {
  'brand-1': '#b74e39',
  'brand-2': '#71a2a9',
  'brand-3': '#f1ecc6',
  'brand-4': '#9d9b60',
  'brand-5': '#e0af49',
}

RGB Array

[183, 78, 57], [113, 162, 169], [241, 236, 198], [157, 155, 96], [224, 175, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B74E39, #71A2A9, #F1ECC6, #9D9B60, #E0AF49 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: #b74e39; --color-2: #71a2a9; --color-3: #f1ecc6; --color-4: #9d9b60; --color-5: #e0af49. 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