← Back to Editor

#B3A376 · #9FA17C · #90B097 · #A6BDA8 · #C4C29F

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B3A376

Ginger · Tan · Sunflower

HEX
#B3A376
RGB
rgb(179, 163, 118)
HSL
hsl(44, 29%, 58%)
HSB
hsb(44, 34%, 70%)
CMYK
cmyk(0%, 9%, 34%, 30%)
Oklch
oklch(71.8% 0.064 90.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#9FA17C

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#9FA17C
RGB
rgb(159, 161, 124)
HSL
hsl(63, 16%, 56%)
HSB
hsb(63, 23%, 63%)
CMYK
cmyk(1%, 0%, 23%, 37%)
Oklch
oklch(69.8% 0.052 110.2)

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

#90B097

Celadon · DarkSeaGreen · Apple Green

HEX
#90B097
RGB
rgb(144, 176, 151)
HSL
hsl(133, 17%, 63%)
HSB
hsb(133, 18%, 69%)
CMYK
cmyk(18%, 0%, 14%, 31%)
Oklch
oklch(72.6% 0.050 151.6)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#A6BDA8

Celadon · DarkGray · Apple Green

HEX
#A6BDA8
RGB
rgb(166, 189, 168)
HSL
hsl(125, 15%, 70%)
HSB
hsb(125, 12%, 74%)
CMYK
cmyk(12%, 0%, 11%, 26%)
Oklch
oklch(77.5% 0.039 147.6)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#C4C29F

Fresh Green · Tan · Sunflower

HEX
#C4C29F
RGB
rgb(196, 194, 159)
HSL
hsl(57, 24%, 70%)
HSB
hsb(57, 19%, 77%)
CMYK
cmyk(0%, 1%, 19%, 23%)
Oklch
oklch(80.7% 0.047 104.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3A376
7585B3

Analogous

B38375
B3A376
A4B375

Triadic

B3A376
75B3A2
A275B3

Split-Comp.

B3A376
75A4B3
8375B3

Tetradic

B3A376
75B383
7585B3
B375A4

Contrast Matrix WCAG 2.1 Contrast

B3A376
9FA17C
90B097
A6BDA8
C4C29F
—
1.1
Fail
1.1
Fail
1.2
Fail
1.4
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.5
Fail
1.1
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.2
Fail
1.3
Fail
1.2
Fail
—
1.1
Fail
1.4
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
White BG
2.5Fail
2.7Fail
2.4Fail
2.0Fail
1.8Fail
Black BG
8.4AAA
7.9AAA
8.8AAA
10.5AAA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAC81
A0A085
9E9E9D
B0B0AD
C3C3A7

Deuteranopia

ADAE84
A0A087
9C9A9F
AFADAE
C3C3AA

Tritanopia

B2898B
9F8C8E
92A2A3
A7B1B2
C4AEB0

Achromatopsia

A3A3A3
9C9C9C
A4A4A4
B4B4B4
BFBFBF

Shades & Tints Shades & Tints

#B3A376

Dark
Light

#9FA17C

Dark
Light

#90B097

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3a376;
  --color-2: #9fa17c;
  --color-3: #90b097;
  --color-4: #a6bda8;
  --color-5: #c4c29f;
}

SCSS

$color-1: #b3a376;
$color-2: #9fa17c;
$color-3: #90b097;
$color-4: #a6bda8;
$color-5: #c4c29f;

TAILWIND

colors: {
  'brand-1': '#b3a376',
  'brand-2': '#9fa17c',
  'brand-3': '#90b097',
  'brand-4': '#a6bda8',
  'brand-5': '#c4c29f',
}

RGB Array

[179, 163, 118], [159, 161, 124], [144, 176, 151], [166, 189, 168], [196, 194, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3A376, #9FA17C, #90B097, #A6BDA8, #C4C29F is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b3a376; --color-2: #9fa17c; --color-3: #90b097; --color-4: #a6bda8; --color-5: #c4c29f. 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. Restrained colors convey professionalism and trust. 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