← Back to Editor

#BB8C7C · #F59467 · #F1B08A · #83B1A1 · #42241F

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 LibraryData Visualization

Color Details Color Details

#BB8C7C

Apricot · DarkSalmon · Warm Sun

HEX
#BB8C7C
RGB
rgb(187, 140, 124)
HSL
hsl(15, 32%, 61%)
HSB
hsb(15, 34%, 73%)
CMYK
cmyk(0%, 25%, 34%, 27%)
Oklch
oklch(68.1% 0.062 39.6)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#F59467

Apricot · SandyBrown · Warm Sun

HEX
#F59467
RGB
rgb(245, 148, 103)
HSL
hsl(19, 88%, 68%)
HSB
hsb(19, 58%, 96%)
CMYK
cmyk(0%, 40%, 58%, 4%)
Oklch
oklch(75.8% 0.132 45.1)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#F1B08A

Apricot · BurlyWood · Warm Sun

HEX
#F1B08A
RGB
rgb(241, 176, 138)
HSL
hsl(22, 79%, 74%)
HSB
hsb(22, 43%, 95%)
CMYK
cmyk(0%, 27%, 43%, 5%)
Oklch
oklch(80.9% 0.092 51.3)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#83B1A1

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#83B1A1
RGB
rgb(131, 177, 161)
HSL
hsl(159, 23%, 60%)
HSB
hsb(159, 26%, 69%)
CMYK
cmyk(26%, 0%, 9%, 31%)
Oklch
oklch(72.3% 0.054 171.3)

TraditionalMineral Blue」· PaintOlive Green」· Creative Blush Sunrise

#42241F

Crimson · DarkSlateGray · Deep Berry

HEX
#42241F
RGB
rgb(66, 36, 31)
HSL
hsl(9, 36%, 19%)
HSB
hsb(9, 53%, 26%)
CMYK
cmyk(0%, 45%, 53%, 74%)
Oklch
oklch(29.8% 0.047 30.2)

TraditionalCrimson」· PaintDeep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BB8C7C
7CABBB

Analogous

BB7C8C
BB8C7C
BBAB7C

Triadic

BB8C7C
7CBB8C
8C7CBB

Split-Comp.

BB8C7C
7CBBAB
7C8CBB

Tetradic

BB8C7C
8CBB7C
7CABBB
AB7CBB

Contrast Matrix WCAG 2.1 Contrast

BB8C7C
F59467
F1B08A
83B1A1
42241F
1.3
Fail
1.6
Fail
1.2
Fail
4.8
AA
1.3
Fail
1.2
Fail
1.1
Fail
6.2
AA
1.6
Fail
1.2
Fail
1.3
Fail
7.5
AAA
1.2
Fail
1.1
Fail
1.3
Fail
5.8
AA
4.8
AA
6.2
AA
7.5
AAA
5.8
AA
White BG
2.9Fail
2.3Fail
1.9Fail
2.4Fail
14.0AAA
Black BG
7.2AAA
9.3AAA
11.3AAA
8.8AAA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A680
CBCA72
D5D493
9797A5
353520

Deuteranopia

A9AD81
D1D875
D9DE95
9491A6
373921

Tritanopia

B98384
F07A7C
EE9A9C
85A8A9
412121

Achromatopsia

989898
ACACAC
BFBFBF
A1A1A1
2C2C2C

Shades & Tints Shades & Tints

#BB8C7C

Dark
Light

#F59467

Dark
Light

#F1B08A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bb8c7c;
  --color-2: #f59467;
  --color-3: #f1b08a;
  --color-4: #83b1a1;
  --color-5: #42241f;
}

SCSS

$color-1: #bb8c7c;
$color-2: #f59467;
$color-3: #f1b08a;
$color-4: #83b1a1;
$color-5: #42241f;

TAILWIND

colors: {
  'brand-1': '#bb8c7c',
  'brand-2': '#f59467',
  'brand-3': '#f1b08a',
  'brand-4': '#83b1a1',
  'brand-5': '#42241f',
}

RGB Array

[187, 140, 124], [245, 148, 103], [241, 176, 138], [131, 177, 161], [66, 36, 31]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BB8C7C, #F59467, #F1B08A, #83B1A1, #42241F is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #bb8c7c; --color-2: #f59467; --color-3: #f1b08a; --color-4: #83b1a1; --color-5: #42241f. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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