#BA9157 + #357063 + #245166 + #704124 + #99632C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BA9157

Ginger · DarkSalmon · Warm Sun

HEX

#BA9157

RGB

rgb(186, 145, 87)

HSL

hsl(35, 42%, 54%)

HSB

hsb(35, 53%, 73%)

CMYK

cmyk(0%, 22%, 53%, 27%)

Oklch

oklch(68.3% 0.090 74.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#357063

Mineral Blue · SeaGreen · Mint Ice

HEX

#357063

RGB

rgb(53, 112, 99)

HSL

hsl(167, 36%, 32%)

HSB

hsb(167, 53%, 44%)

CMYK

cmyk(53%, 0%, 12%, 56%)

Oklch

oklch(50.1% 0.066 177.2)

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

#245166

Slate Blue · DarkSlateGray · Mint Ice

HEX

#245166

RGB

rgb(36, 81, 102)

HSL

hsl(199, 48%, 27%)

HSB

hsb(199, 65%, 40%)

CMYK

cmyk(65%, 21%, 0%, 60%)

Oklch

oklch(41.3% 0.060 230.9)

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

#704124

Tangerine · DarkOliveGreen · Amber Brown

HEX

#704124

RGB

rgb(112, 65, 36)

HSL

hsl(23, 51%, 29%)

HSB

hsb(23, 68%, 44%)

CMYK

cmyk(0%, 42%, 68%, 56%)

Oklch

oklch(42.5% 0.078 51.0)

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

#99632C

Ochre · Sienna · Amber Brown

HEX

#99632C

RGB

rgb(153, 99, 44)

HSL

hsl(30, 55%, 39%)

HSB

hsb(30, 71%, 60%)

CMYK

cmyk(0%, 35%, 71%, 40%)

Oklch

oklch(54.8% 0.099 63.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BA9157

5881BB

Analogous

BB6158

BA9157

B3BB58

Triadic

BA9157

58BB92

9258BB

Split-Comp.

BA9157

58B3BB

6158BB

Tetradic

BA9157

58BB61

5881BB

BB58B3

Contrast Matrix WCAG 2.1 Contrast

BA9157	357063	245166	704124	99632C
—	2.0 Fail	3.0 Fail	2.9 Fail	1.7 Fail
2.0 Fail	—	1.5 Fail	1.5 Fail	1.1 Fail
3.0 Fail	1.5 Fail	—	1.0 Fail	1.7 Fail
2.9 Fail	1.5 Fail	1.0 Fail	—	1.7 Fail
1.7 Fail	1.1 Fail	1.7 Fail	1.7 Fail	—

White BG

2.9Fail

5.8AA

8.6AAA

8.5AAA

5.0AA

Black BG

7.3AAA

3.6AA Large

2.4Fail

2.5Fail

4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A865

4F4F66

373861

5C5B2B

828139

Deuteranopia

ABAE68

4B4767

353260

5E622D

85893D

Tritanopia

B87073

386969

265D5C

6E3132

964446

Achromatopsia

979797

5D5D5D

464646

4C4C4C

6D6D6D

Shades & Tints Shades & Tints

#BA9157

Dark

Light

#357063

Dark

Light

#245166

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ba9157;
  --color-2: #357063;
  --color-3: #245166;
  --color-4: #704124;
  --color-5: #99632c;
}

SCSS

$color-1: #ba9157;
$color-2: #357063;
$color-3: #245166;
$color-4: #704124;
$color-5: #99632c;

TAILWIND

colors: {
  'brand-1': '#ba9157',
  'brand-2': '#357063',
  'brand-3': '#245166',
  'brand-4': '#704124',
  'brand-5': '#99632c',
}

RGB Array

[186, 145, 87], [53, 112, 99], [36, 81, 102], [112, 65, 36], [153, 99, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BA9157, #357063, #245166, #704124, #99632C 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: #ba9157; --color-2: #357063; --color-3: #245166; --color-4: #704124; --color-5: #99632c. 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