← Back to Editor

#9BB379 · #B99F62 · #DA7E4B · #B07D52 · #21977D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9BB379

Grass Green · DarkSeaGreen · Olive Green

HEX
#9BB379
RGB
rgb(155, 179, 121)
HSL
hsl(85, 28%, 59%)
HSB
hsb(85, 32%, 70%)
CMYK
cmyk(13%, 0%, 32%, 30%)
Oklch
oklch(73.4% 0.084 126.6)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#B99F62

Ginger · Tan · Sunflower

HEX
#B99F62
RGB
rgb(185, 159, 98)
HSL
hsl(42, 38%, 55%)
HSB
hsb(42, 47%, 73%)
CMYK
cmyk(0%, 14%, 47%, 27%)
Oklch
oklch(71.2% 0.085 87.2)

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

#DA7E4B

Tangerine · Coral · Warm Sun

HEX
#DA7E4B
RGB
rgb(218, 126, 75)
HSL
hsl(21, 66%, 57%)
HSB
hsb(21, 66%, 85%)
CMYK
cmyk(0%, 42%, 66%, 15%)
Oklch
oklch(68.4% 0.132 48.4)

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

#B07D52

Tangerine · Sienna · Warm Sun

HEX
#B07D52
RGB
rgb(176, 125, 82)
HSL
hsl(27, 37%, 51%)
HSB
hsb(27, 53%, 69%)
CMYK
cmyk(0%, 29%, 53%, 31%)
Oklch
oklch(63.1% 0.086 60.4)

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

#21977D

Mineral Blue · Teal · Mint Ice

HEX
#21977D
RGB
rgb(33, 151, 125)
HSL
hsl(167, 64%, 36%)
HSB
hsb(167, 78%, 59%)
CMYK
cmyk(78%, 0%, 17%, 41%)
Oklch
oklch(60.7% 0.108 173.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9BB379
9279B4

Analogous

B4AF79
9BB379
7EB479

Triadic

9BB379
799BB4
B4799B

Split-Comp.

9BB379
797EB4
AF79B4

Tetradic

9BB379
79B4AF
9279B4
B4797E

Contrast Matrix WCAG 2.1 Contrast

9BB379
B99F62
DA7E4B
B07D52
21977D
—
1.1
Fail
1.3
Fail
1.5
Fail
1.6
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
1.4
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
1.2
Fail
1.5
Fail
1.4
Fail
1.2
Fail
—
1.0
Fail
1.6
Fail
1.4
Fail
1.2
Fail
1.0
Fail
—
White BG
2.3Fail
2.6Fail
3.0Fail
3.6AA Large
3.6AA Large
Black BG
9.1AAA
8.2AAA
7.1AAA
5.9AA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A687
AEAE71
B2B157
9A995C
545583

Deuteranopia

A4A28A
AFB174
B8BE5A
9DA15F
4D4485

Tritanopia

9C9295
B87C7F
D56163
AD6566
278889

Achromatopsia

A5A5A5
A0A0A0
949494
878787
717171

Shades & Tints Shades & Tints

#9BB379

Dark
Light

#B99F62

Dark
Light

#DA7E4B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9bb379;
  --color-2: #b99f62;
  --color-3: #da7e4b;
  --color-4: #b07d52;
  --color-5: #21977d;
}

SCSS

$color-1: #9bb379;
$color-2: #b99f62;
$color-3: #da7e4b;
$color-4: #b07d52;
$color-5: #21977d;

TAILWIND

colors: {
  'brand-1': '#9bb379',
  'brand-2': '#b99f62',
  'brand-3': '#da7e4b',
  'brand-4': '#b07d52',
  'brand-5': '#21977d',
}

RGB Array

[155, 179, 121], [185, 159, 98], [218, 126, 75], [176, 125, 82], [33, 151, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9BB379, #B99F62, #DA7E4B, #B07D52, #21977D 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: #9bb379; --color-2: #b99f62; --color-3: #da7e4b; --color-4: #b07d52; --color-5: #21977d. 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