← Back to Editor

#946D54 · #5CB899 · #D18F66 · #D6C995 · #8EB35B

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

#946D54

Tangerine · DimGray · Amber Brown

HEX
#946D54
RGB
rgb(148, 109, 84)
HSL
hsl(23, 28%, 45%)
HSB
hsb(23, 43%, 58%)
CMYK
cmyk(0%, 26%, 43%, 42%)
Oklch
oklch(56.8% 0.062 53.8)

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

#5CB899

Mineral Blue · CadetBlue · Lake Green

HEX
#5CB899
RGB
rgb(92, 184, 153)
HSL
hsl(160, 39%, 54%)
HSB
hsb(160, 50%, 72%)
CMYK
cmyk(50%, 0%, 17%, 28%)
Oklch
oklch(71.7% 0.100 169.1)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#D18F66

Apricot · DarkSalmon · Warm Sun

HEX
#D18F66
RGB
rgb(209, 143, 102)
HSL
hsl(23, 54%, 61%)
HSB
hsb(23, 51%, 82%)
CMYK
cmyk(0%, 32%, 51%, 18%)
Oklch
oklch(70.7% 0.098 52.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#D6C995

Goose Yellow · Tan · Sunflower

HEX
#D6C995
RGB
rgb(214, 201, 149)
HSL
hsl(48, 44%, 71%)
HSB
hsb(48, 30%, 84%)
CMYK
cmyk(0%, 6%, 30%, 16%)
Oklch
oklch(83.4% 0.070 95.7)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#8EB35B

Grass Green · DarkSeaGreen · Olive Green

HEX
#8EB35B
RGB
rgb(142, 179, 91)
HSL
hsl(85, 37%, 53%)
HSB
hsb(85, 49%, 70%)
CMYK
cmyk(21%, 0%, 49%, 30%)
Oklch
oklch(72.0% 0.123 128.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

946D54
537A93

Analogous

93535A
946D54
938B53

Triadic

946D54
53936B
6B5393

Split-Comp.

946D54
53938B
535A93

Tetradic

946D54
5A9353
537A93
8B5393

Contrast Matrix WCAG 2.1 Contrast

946D54
5CB899
D18F66
D6C995
8EB35B
—
1.9
Fail
1.7
Fail
2.8
Fail
1.9
Fail
1.9
Fail
—
1.1
Fail
1.4
Fail
1.0
Fail
1.7
Fail
1.1
Fail
—
1.6
Fail
1.1
Fail
2.8
Fail
1.4
Fail
1.6
Fail
—
1.4
Fail
1.9
Fail
1.0
Fail
1.1
Fail
1.4
Fail
—
White BG
4.6AA
2.4Fail
2.7Fail
1.7Fail
2.4Fail
Black BG
4.6AA
8.8AAA
7.8AAA
12.6AAA
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

83835A
8485A1
B4B470
D0D0A2
9E9E70

Deuteranopia

85885C
7F78A2
B8BD72
D1D2A5
9C9975

Tritanopia

925F60
61A6A8
CE7879
D5ACAE
908185

Achromatopsia

767676
999999
9E9E9E
C7C7C7
9E9E9E

Shades & Tints Shades & Tints

#946D54

Dark
Light

#5CB899

Dark
Light

#D18F66

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #946d54;
  --color-2: #5cb899;
  --color-3: #d18f66;
  --color-4: #d6c995;
  --color-5: #8eb35b;
}

SCSS

$color-1: #946d54;
$color-2: #5cb899;
$color-3: #d18f66;
$color-4: #d6c995;
$color-5: #8eb35b;

TAILWIND

colors: {
  'brand-1': '#946d54',
  'brand-2': '#5cb899',
  'brand-3': '#d18f66',
  'brand-4': '#d6c995',
  'brand-5': '#8eb35b',
}

RGB Array

[148, 109, 84], [92, 184, 153], [209, 143, 102], [214, 201, 149], [142, 179, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #946D54, #5CB899, #D18F66, #D6C995, #8EB35B 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: #946d54; --color-2: #5cb899; --color-3: #d18f66; --color-4: #d6c995; --color-5: #8eb35b. 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