← Back to Editor

#BBB39E · #F47377 · #C6B752 · #FE8661 · #7A665D

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

#BBB39E

Ginger · DarkGray · Sunflower

HEX
#BBB39E
RGB
rgb(187, 179, 158)
HSL
hsl(43, 18%, 68%)
HSB
hsb(43, 16%, 73%)
CMYK
cmyk(0%, 4%, 16%, 27%)
Oklch
oklch(76.8% 0.030 89.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#F47377

Peach Pink · Salmon · Coral Red

HEX
#F47377
RGB
rgb(244, 115, 119)
HSL
hsl(358, 85%, 70%)
HSB
hsb(358, 53%, 96%)
CMYK
cmyk(0%, 53%, 51%, 4%)
Oklch
oklch(70.9% 0.159 20.1)

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

#C6B752

Autumn Sage · SandyBrown · Sunflower

HEX
#C6B752
RGB
rgb(198, 183, 82)
HSL
hsl(52, 50%, 55%)
HSB
hsb(52, 59%, 78%)
CMYK
cmyk(0%, 8%, 59%, 22%)
Oklch
oklch(77.2% 0.123 100.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#FE8661

Peach Pink · Coral · Coral Red

HEX
#FE8661
RGB
rgb(254, 134, 97)
HSL
hsl(14, 99%, 69%)
HSB
hsb(14, 62%, 100%)
CMYK
cmyk(0%, 47%, 62%, 0%)
Oklch
oklch(74.7% 0.155 37.9)

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

#7A665D

Tangerine · DimGray · Amber Brown

HEX
#7A665D
RGB
rgb(122, 102, 93)
HSL
hsl(19, 13%, 42%)
HSB
hsb(19, 24%, 48%)
CMYK
cmyk(0%, 16%, 24%, 52%)
Oklch
oklch(52.7% 0.029 45.6)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBB39E
9FA7BC

Analogous

BCA59F
BBB39E
B6BC9F

Triadic

BBB39E
9FBCB4
B49FBC

Split-Comp.

BBB39E
9FB6BC
A59FBC

Tetradic

BBB39E
9FBCA5
9FA7BC
BC9FB6

Contrast Matrix WCAG 2.1 Contrast

BBB39E
F47377
C6B752
FE8661
7A665D
—
1.3
Fail
1.0
Fail
1.1
Fail
2.6
Fail
1.3
Fail
—
1.4
Fail
1.2
Fail
1.9
Fail
1.0
Fail
1.4
Fail
—
1.2
Fail
2.6
Fail
1.1
Fail
1.2
Fail
1.2
Fail
—
2.3
Fail
2.6
Fail
1.9
Fail
2.6
Fail
2.3
Fail
—
White BG
2.1Fail
2.8Fail
2.0Fail
2.4Fail
5.4AA
Black BG
10.1AAA
7.6AAA
10.3AAA
8.8AAA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B7A3
BCBB76
C0BF6A
CAC96A
71715F

Deuteranopia

B8B9A4
C4CD76
C0C270
D1DA6C
737460

Tritanopia

BBA7A8
EE7575
C57E82
F87173
796161

Achromatopsia

B3B3B3
9A9A9A
B0B0B0
A6A6A6
6B6B6B

Shades & Tints Shades & Tints

#BBB39E

Dark
Light

#F47377

Dark
Light

#C6B752

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbb39e;
  --color-2: #f47377;
  --color-3: #c6b752;
  --color-4: #fe8661;
  --color-5: #7a665d;
}

SCSS

$color-1: #bbb39e;
$color-2: #f47377;
$color-3: #c6b752;
$color-4: #fe8661;
$color-5: #7a665d;

TAILWIND

colors: {
  'brand-1': '#bbb39e',
  'brand-2': '#f47377',
  'brand-3': '#c6b752',
  'brand-4': '#fe8661',
  'brand-5': '#7a665d',
}

RGB Array

[187, 179, 158], [244, 115, 119], [198, 183, 82], [254, 134, 97], [122, 102, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBB39E, #F47377, #C6B752, #FE8661, #7A665D 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: #bbb39e; --color-2: #f47377; --color-3: #c6b752; --color-4: #fe8661; --color-5: #7a665d. 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