← Back to Editor

#99A381 · #DAB16F · #6F543F · #C3845B · #F1875D

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

#99A381

Grass Green · DarkSeaGreen · Olive Green

HEX
#99A381
RGB
rgb(153, 163, 129)
HSL
hsl(78, 16%, 57%)
HSB
hsb(78, 21%, 64%)
CMYK
cmyk(6%, 0%, 21%, 36%)
Oklch
oklch(69.8% 0.049 121.0)

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

#DAB16F

Ginger · BurlyWood · Warm Sun

HEX
#DAB16F
RGB
rgb(218, 177, 111)
HSL
hsl(37, 59%, 65%)
HSB
hsb(37, 49%, 85%)
CMYK
cmyk(0%, 19%, 49%, 15%)
Oklch
oklch(78.3% 0.097 78.5)

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

#6F543F

Tangerine · DarkOliveGreen · Amber Brown

HEX
#6F543F
RGB
rgb(111, 84, 63)
HSL
hsl(26, 28%, 34%)
HSB
hsb(26, 43%, 44%)
CMYK
cmyk(0%, 24%, 43%, 56%)
Oklch
oklch(46.8% 0.048 59.1)

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

#C3845B

Tangerine · DarkSalmon · Warm Sun

HEX
#C3845B
RGB
rgb(195, 132, 91)
HSL
hsl(24, 46%, 56%)
HSB
hsb(24, 53%, 76%)
CMYK
cmyk(0%, 32%, 53%, 24%)
Oklch
oklch(66.8% 0.096 53.4)

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

#F1875D

Apricot · Coral · Warm Sun

HEX
#F1875D
RGB
rgb(241, 135, 93)
HSL
hsl(17, 84%, 65%)
HSB
hsb(17, 61%, 95%)
CMYK
cmyk(0%, 44%, 61%, 5%)
Oklch
oklch(73.1% 0.142 41.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

99A381
8A80A3

Analogous

A39C80
99A381
87A380

Triadic

99A381
8098A3
A38098

Split-Comp.

99A381
8087A3
9C80A3

Tetradic

99A381
80A39C
8A80A3
A38087

Contrast Matrix WCAG 2.1 Contrast

99A381
DAB16F
6F543F
C3845B
F1875D
—
1.3
Fail
2.6
Fail
1.2
Fail
1.1
Fail
1.3
Fail
—
3.5
AA Large
1.6
Fail
1.3
Fail
2.6
Fail
3.5
AA Large
—
2.2
Fail
2.8
Fail
1.2
Fail
1.6
Fail
2.2
Fail
—
1.2
Fail
1.1
Fail
1.3
Fail
2.8
Fail
1.2
Fail
—
White BG
2.7Fail
2.0Fail
7.0AA
3.1AA Large
2.5Fail
Black BG
7.9AAA
10.5AAA
3.0AA Large
6.8AA
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9D89
C8C87F
636344
A8A765
C3C267

Deuteranopia

9D9C8B
CBCE83
656745
ABB067
C9D16A

Tritanopia

9A9091
D88C8E
6E4849
C06D6E
EC6F71

Achromatopsia

9C9C9C
B6B6B6
5A5A5A
929292
A2A2A2

Shades & Tints Shades & Tints

#99A381

Dark
Light

#DAB16F

Dark
Light

#6F543F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #99a381;
  --color-2: #dab16f;
  --color-3: #6f543f;
  --color-4: #c3845b;
  --color-5: #f1875d;
}

SCSS

$color-1: #99a381;
$color-2: #dab16f;
$color-3: #6f543f;
$color-4: #c3845b;
$color-5: #f1875d;

TAILWIND

colors: {
  'brand-1': '#99a381',
  'brand-2': '#dab16f',
  'brand-3': '#6f543f',
  'brand-4': '#c3845b',
  'brand-5': '#f1875d',
}

RGB Array

[153, 163, 129], [218, 177, 111], [111, 84, 63], [195, 132, 91], [241, 135, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #99A381, #DAB16F, #6F543F, #C3845B, #F1875D 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: #99a381; --color-2: #dab16f; --color-3: #6f543f; --color-4: #c3845b; --color-5: #f1875d. 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