#B8B291 + #9F9F75 + #14A887 + #525FB5 + #712381 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B8B291

Fresh Green · Tan · Sunflower

HEX

#B8B291

RGB

rgb(184, 178, 145)

HSL

hsl(51, 22%, 65%)

HSB

hsb(51, 21%, 72%)

CMYK

cmyk(0%, 3%, 21%, 28%)

Oklch

oklch(76.0% 0.046 98.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#9F9F75

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#9F9F75

RGB

rgb(159, 159, 117)

HSL

hsl(60, 18%, 54%)

HSB

hsb(60, 26%, 62%)

CMYK

cmyk(0%, 0%, 26%, 38%)

Oklch

oklch(69.2% 0.058 107.8)

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

#14A887

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#14A887

RGB

rgb(20, 168, 135)

HSL

hsl(167, 79%, 37%)

HSB

hsb(167, 88%, 66%)

CMYK

cmyk(88%, 0%, 20%, 34%)

Oklch

oklch(65.3% 0.124 171.7)

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

#525FB5

Azure · SlateBlue · Navy Blue

HEX

#525FB5

RGB

rgb(82, 95, 181)

HSL

hsl(232, 40%, 52%)

HSB

hsb(232, 55%, 71%)

CMYK

cmyk(55%, 48%, 0%, 29%)

Oklch

oklch(51.8% 0.135 274.2)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#712381

Royal Purple · Purple · Eggplant

HEX

#712381

RGB

rgb(113, 35, 129)

HSL

hsl(290, 57%, 32%)

HSB

hsb(290, 73%, 51%)

CMYK

cmyk(12%, 73%, 0%, 49%)

Oklch

oklch(41.9% 0.161 320.3)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8B291

9298B9

Analogous

B9A092

B8B291

ACB992

Triadic

B8B291

92B9B3

B392B9

Split-Comp.

B8B291

92ACB9

A092B9

Tetradic

B8B291

92B9A0

9298B9

B992AC

Contrast Matrix WCAG 2.1 Contrast

B8B291	9F9F75	14A887	525FB5	712381
—	1.3 Fail	1.4 Fail	2.7 Fail	4.3 AA Large
1.3 Fail	—	1.1 Fail	2.1 Fail	3.4 AA Large
1.4 Fail	1.1 Fail	—	1.9 Fail	3.1 AA Large
2.7 Fail	2.1 Fail	1.9 Fail	—	1.6 Fail
4.3 AA Large	3.4 AA Large	3.1 AA Large	1.6 Fail	—

White BG

2.1Fail

2.7Fail

3.0AA Large

5.7AA

9.3AAA

Black BG

9.8AAA

7.7AAA

7.0AA

3.7AA Large

2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B599

9F9F7F

54558F

5858A0

4F4F6A

Deuteranopia

B6B69B

9F9F82

4C4091

57569B

545A65

Tritanopia

B89FA1

9F8789

1B9597

53908C

6D5854

Achromatopsia

B0B0B0

9A9A9A

787878

656565

454545

Shades & Tints Shades & Tints

#B8B291

Dark

Light

#9F9F75

Dark

Light

#14A887

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8b291;
  --color-2: #9f9f75;
  --color-3: #14a887;
  --color-4: #525fb5;
  --color-5: #712381;
}

SCSS

$color-1: #b8b291;
$color-2: #9f9f75;
$color-3: #14a887;
$color-4: #525fb5;
$color-5: #712381;

TAILWIND

colors: {
  'brand-1': '#b8b291',
  'brand-2': '#9f9f75',
  'brand-3': '#14a887',
  'brand-4': '#525fb5',
  'brand-5': '#712381',
}

RGB Array

[184, 178, 145], [159, 159, 117], [20, 168, 135], [82, 95, 181], [113, 35, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #B8B291, #9F9F75, #14A887, #525FB5, #712381 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: #b8b291; --color-2: #9f9f75; --color-3: #14a887; --color-4: #525fb5; --color-5: #712381. 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 warm-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