← Back to Editor

#D4B08A · #899C84 · #588C81 · #75686F · #A6446B

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

#D4B08A

Ginger · Tan · Warm Sun

HEX
#D4B08A
RGB
rgb(212, 176, 138)
HSL
hsl(31, 46%, 69%)
HSB
hsb(31, 35%, 83%)
CMYK
cmyk(0%, 17%, 35%, 17%)
Oklch
oklch(78.0% 0.066 68.1)

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

#899C84

Celadon · Gray · Olive Green

HEX
#899C84
RGB
rgb(137, 156, 132)
HSL
hsl(108, 11%, 56%)
HSB
hsb(108, 15%, 61%)
CMYK
cmyk(12%, 0%, 15%, 39%)
Oklch
oklch(67.1% 0.041 139.2)

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

#588C81

Mineral Blue · SlateGray · Mint Ice

HEX
#588C81
RGB
rgb(88, 140, 129)
HSL
hsl(167, 23%, 45%)
HSB
hsb(167, 37%, 55%)
CMYK
cmyk(37%, 0%, 8%, 45%)
Oklch
oklch(60.0% 0.058 179.3)

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

#75686F

Ink Gray · DimGray · Warm Gray

HEX
#75686F
RGB
rgb(117, 104, 111)
HSL
hsl(328, 6%, 43%)
HSB
hsb(328, 11%, 46%)
CMYK
cmyk(0%, 11%, 5%, 54%)
Oklch
oklch(53.2% 0.019 344.1)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#A6446B

Dark Violet · MediumVioletRed · Camellia

HEX
#A6446B
RGB
rgb(166, 68, 107)
HSL
hsl(336, 42%, 46%)
HSB
hsb(336, 59%, 65%)
CMYK
cmyk(0%, 59%, 36%, 35%)
Oklch
oklch(52.8% 0.135 357.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4B08A
8CAFD4

Analogous

D48D8C
D4B08A
D3D48C

Triadic

D4B08A
8CD4B1
B18CD4

Split-Comp.

D4B08A
8CD3D4
8D8CD4

Tetradic

D4B08A
8CD48D
8CAFD4
D48CD3

Contrast Matrix WCAG 2.1 Contrast

D4B08A
899C84
588C81
75686F
A6446B
—
1.5
Fail
1.9
Fail
2.6
Fail
2.8
Fail
1.5
Fail
—
1.3
Fail
1.8
Fail
2.0
Fail
1.9
Fail
1.3
Fail
—
1.4
Fail
1.5
Fail
2.6
Fail
1.8
Fail
1.4
Fail
—
1.1
Fail
2.8
Fail
2.0
Fail
1.5
Fail
1.1
Fail
—
White BG
2.0Fail
2.9Fail
3.8AA Large
5.3AA
5.7AA
Black BG
10.4AAA
7.2AAA
5.5AA
4.0AA Large
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C493
91918A
6F6F84
6F6F6D
7C7B62

Deuteranopia

C7C995
908F8B
6C6884
70716D
81895F

Tritanopia

D29A9C
8A8E8F
5B8686
746C6C
A15A58

Achromatopsia

B6B6B6
949494
7B7B7B
6D6D6D
666666

Shades & Tints Shades & Tints

#D4B08A

Dark
Light

#899C84

Dark
Light

#588C81

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4b08a;
  --color-2: #899c84;
  --color-3: #588c81;
  --color-4: #75686f;
  --color-5: #a6446b;
}

SCSS

$color-1: #d4b08a;
$color-2: #899c84;
$color-3: #588c81;
$color-4: #75686f;
$color-5: #a6446b;

TAILWIND

colors: {
  'brand-1': '#d4b08a',
  'brand-2': '#899c84',
  'brand-3': '#588c81',
  'brand-4': '#75686f',
  'brand-5': '#a6446b',
}

RGB Array

[212, 176, 138], [137, 156, 132], [88, 140, 129], [117, 104, 111], [166, 68, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4B08A, #899C84, #588C81, #75686F, #A6446B 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: #d4b08a; --color-2: #899c84; --color-3: #588c81; --color-4: #75686f; --color-5: #a6446b. 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