#B28B0B + #CA6818 + #A05163 + #6E4D55 + #217582 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B28B0B

Ochre · DarkGoldenRod · Honey Gold

HEX

#B28B0B

RGB

rgb(178, 139, 11)

HSL

hsl(46, 88%, 37%)

HSB

hsb(46, 94%, 70%)

CMYK

cmyk(0%, 22%, 94%, 30%)

Oklch

oklch(65.6% 0.132 88.2)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#CA6818

Tangerine · Chocolate · Amber Brown

HEX

#CA6818

RGB

rgb(202, 104, 24)

HSL

hsl(27, 79%, 44%)

HSB

hsb(27, 88%, 79%)

CMYK

cmyk(0%, 49%, 88%, 21%)

Oklch

oklch(62.1% 0.149 52.8)

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

#A05163

Crimson · Sienna · Passion Red

HEX

#A05163

RGB

rgb(160, 81, 99)

HSL

hsl(346, 33%, 47%)

HSB

hsb(346, 49%, 63%)

CMYK

cmyk(0%, 49%, 38%, 37%)

Oklch

oklch(53.6% 0.106 6.8)

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

#6E4D55

Crimson · DimGray · Wine Red

HEX

#6E4D55

RGB

rgb(110, 77, 85)

HSL

hsl(345, 18%, 37%)

HSB

hsb(345, 30%, 43%)

CMYK

cmyk(0%, 30%, 23%, 57%)

Oklch

oklch(45.9% 0.046 3.1)

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

#217582

Lake Blue · Teal · Mint Ice

HEX

#217582

RGB

rgb(33, 117, 130)

HSL

hsl(188, 60%, 32%)

HSB

hsb(188, 75%, 51%)

CMYK

cmyk(75%, 10%, 0%, 49%)

Oklch

oklch(52.0% 0.079 210.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B28B0B

0B32B1

Analogous

B1380B

B28B0B

85B10B

Triadic

B28B0B

0BB18B

8B0BB1

Split-Comp.

B28B0B

0B85B1

380BB1

Tetradic

B28B0B

0BB138

0B32B1

B10B85

Contrast Matrix WCAG 2.1 Contrast

B28B0B	CA6818	A05163	6E4D55	217582
—	1.2 Fail	1.7 Fail	2.3 Fail	1.7 Fail
1.2 Fail	—	1.4 Fail	1.9 Fail	1.4 Fail
1.7 Fail	1.4 Fail	—	1.3 Fail	1.0 Fail
2.3 Fail	1.9 Fail	1.3 Fail	—	1.4 Fail
1.7 Fail	1.4 Fail	1.0 Fail	1.4 Fail	—

White BG

3.2AA Large

3.8AA Large

5.5AA

7.4AAA

5.3AA

Black BG

6.6AA

5.5AA

3.9AA Large

2.9Fail

3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A12A

A09F2B

7E7D5F

605F53

45467F

Deuteranopia

A3A631

A5AD30

82885E

626453

413A7E

Tritanopia

B04248

C53B3E

9C5B5A

6C5251

257C7C

Achromatopsia

888888

7C7C7C

6B6B6B

585858

5D5D5D

Shades & Tints Shades & Tints

#B28B0B

Dark

Light

#CA6818

Dark

Light

#A05163

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b28b0b;
  --color-2: #ca6818;
  --color-3: #a05163;
  --color-4: #6e4d55;
  --color-5: #217582;
}

SCSS

$color-1: #b28b0b;
$color-2: #ca6818;
$color-3: #a05163;
$color-4: #6e4d55;
$color-5: #217582;

TAILWIND

colors: {
  'brand-1': '#b28b0b',
  'brand-2': '#ca6818',
  'brand-3': '#a05163',
  'brand-4': '#6e4d55',
  'brand-5': '#217582',
}

RGB Array

[178, 139, 11], [202, 104, 24], [160, 81, 99], [110, 77, 85], [33, 117, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B28B0B, #CA6818, #A05163, #6E4D55, #217582 is ideal for: tech websites, dark mode UIs, game UIs. 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: #b28b0b; --color-2: #ca6818; --color-3: #a05163; --color-4: #6e4d55; --color-5: #217582. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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