#BF340F + #8A7663 + #54B9B7 + #A3C7D6 + #D7BDDB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BF340F

Vermilion · FireBrick · Wine Red

HEX

#BF340F

RGB

rgb(191, 52, 15)

HSL

hsl(13, 85%, 40%)

HSB

hsb(13, 92%, 75%)

CMYK

cmyk(0%, 73%, 92%, 25%)

Oklch

oklch(53.4% 0.181 34.5)

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

#8A7663

Tangerine · Gray · Amber Brown

HEX

#8A7663

RGB

rgb(138, 118, 99)

HSL

hsl(29, 16%, 46%)

HSB

hsb(29, 28%, 54%)

CMYK

cmyk(0%, 14%, 28%, 46%)

Oklch

oklch(57.9% 0.038 65.5)

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

#54B9B7

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#54B9B7

RGB

rgb(84, 185, 183)

HSL

hsl(179, 42%, 53%)

HSB

hsb(179, 55%, 73%)

CMYK

cmyk(55%, 0%, 1%, 27%)

Oklch

oklch(72.6% 0.094 193.5)

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

#A3C7D6

Sky Blue · LightSteelBlue · Lake Green

HEX

#A3C7D6

RGB

rgb(163, 199, 214)

HSL

hsl(198, 38%, 74%)

HSB

hsb(198, 24%, 84%)

CMYK

cmyk(24%, 7%, 0%, 16%)

Oklch

oklch(80.8% 0.044 225.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#D7BDDB

Lilac · LightGray · Lilac Purple

HEX

#D7BDDB

RGB

rgb(215, 189, 219)

HSL

hsl(292, 29%, 80%)

HSB

hsb(292, 14%, 86%)

CMYK

cmyk(2%, 14%, 0%, 14%)

Oklch

oklch(83.0% 0.050 321.8)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BF340F

0F97BD

Analogous

BD0F40

BF340F

BD8C0F

Triadic

BF340F

0FBD35

350FBD

Split-Comp.

BF340F

0FBD8C

0F40BD

Tetradic

BF340F

40BD0F

0F97BD

8C0FBD

Contrast Matrix WCAG 2.1 Contrast

BF340F	8A7663	54B9B7	A3C7D6	D7BDDB
—	1.3 Fail	2.4 Fail	3.2 AA Large	3.3 AA Large
1.3 Fail	—	1.9 Fail	2.4 Fail	2.5 Fail
2.4 Fail	1.9 Fail	—	1.3 Fail	1.4 Fail
3.2 AA Large	2.4 Fail	1.3 Fail	—	1.0 Fail
3.3 AA Large	2.5 Fail	1.4 Fail	1.0 Fail	—

White BG

5.7AA

4.3AA Large

2.3Fail

1.8Fail

1.7Fail

Black BG

3.7AA Large

4.9AA

9.0AAA

11.7AAA

12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

838218

818168

8081B7

B3B3D2

CCCCD4

Deuteranopia

8B951A

838469

7A72B8

B1AED1

CDCFD2

Tritanopia

B81F21

896B6C

59B8B8

A5D0CF

D6CECD

Achromatopsia

595959

7A7A7A

9B9B9B

BEBEBE

C8C8C8

Shades & Tints Shades & Tints

#BF340F

Dark

Light

#8A7663

Dark

Light

#54B9B7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bf340f;
  --color-2: #8a7663;
  --color-3: #54b9b7;
  --color-4: #a3c7d6;
  --color-5: #d7bddb;
}

SCSS

$color-1: #bf340f;
$color-2: #8a7663;
$color-3: #54b9b7;
$color-4: #a3c7d6;
$color-5: #d7bddb;

TAILWIND

colors: {
  'brand-1': '#bf340f',
  'brand-2': '#8a7663',
  'brand-3': '#54b9b7',
  'brand-4': '#a3c7d6',
  'brand-5': '#d7bddb',
}

RGB Array

[191, 52, 15], [138, 118, 99], [84, 185, 183], [163, 199, 214], [215, 189, 219]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BF340F, #8A7663, #54B9B7, #A3C7D6, #D7BDDB 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: #bf340f; --color-2: #8a7663; --color-3: #54b9b7; --color-4: #a3c7d6; --color-5: #d7bddb. 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