← Back to Editor

#4D7A87 · #26150A · #99936D · #688776 · #D9C5A9

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 LibraryData Visualization

Color Details Color Details

#4D7A87

Slate Blue · SlateGray · Mint Ice

HEX
#4D7A87
RGB
rgb(77, 122, 135)
HSL
hsl(193, 27%, 42%)
HSB
hsb(193, 43%, 53%)
CMYK
cmyk(43%, 10%, 0%, 47%)
Oklch
oklch(55.2% 0.053 218.1)

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

#26150A

Tangerine · Black · Cinnamon

HEX
#26150A
RGB
rgb(38, 21, 10)
HSL
hsl(24, 58%, 9%)
HSB
hsb(24, 74%, 15%)
CMYK
cmyk(0%, 45%, 74%, 85%)
Oklch
oklch(21.6% 0.034 52.9)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#99936D

Autumn Sage · Gray · Sunflower

HEX
#99936D
RGB
rgb(153, 147, 109)
HSL
hsl(52, 18%, 51%)
HSB
hsb(52, 29%, 60%)
CMYK
cmyk(0%, 4%, 29%, 40%)
Oklch
oklch(65.9% 0.054 100.2)

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

#688776

Celadon · Gray · Olive Green

HEX
#688776
RGB
rgb(104, 135, 118)
HSL
hsl(147, 13%, 47%)
HSB
hsb(147, 23%, 53%)
CMYK
cmyk(23%, 0%, 13%, 47%)
Oklch
oklch(59.4% 0.044 160.7)

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

#D9C5A9

Goose Yellow · Silver · Peach Orange

HEX
#D9C5A9
RGB
rgb(217, 197, 169)
HSL
hsl(35, 39%, 76%)
HSB
hsb(35, 22%, 85%)
CMYK
cmyk(0%, 9%, 22%, 15%)
Oklch
oklch(83.3% 0.044 76.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4D7A87
885B4E

Analogous

4E8878
4D7A87
4E5F88

Triadic

4D7A87
884E7B
7B884E

Split-Comp.

4D7A87
884E5F
88784E

Tetradic

4D7A87
784E88
885B4E
5F884E

Contrast Matrix WCAG 2.1 Contrast

4D7A87
26150A
99936D
688776
D9C5A9
—
3.7
AA Large
1.5
Fail
1.2
Fail
2.8
Fail
3.7
AA Large
—
5.7
AA
4.5
AA Large
10.5
AAA
1.5
Fail
5.7
AA
—
1.3
Fail
1.9
Fail
1.2
Fail
4.5
AA Large
1.3
Fail
—
2.4
Fail
2.8
Fail
10.5
AAA
1.9
Fail
2.4
Fail
—
White BG
4.7AA
17.6AAA
3.1AA Large
4.0AA Large
1.7Fail
Black BG
4.4AA Large
1.2Fail
6.7AA
5.3AA
12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

606184
1F1E0D
969676
75767A
D0D0B0

Deuteranopia

5E5B83
20210D
979778
74717B
D2D3B1

Tritanopia

4F8181
250F0F
997D7F
6A7D7E
D8B5B6

Achromatopsia

6E6E6E
191919
909090
7C7C7C
C8C8C8

Shades & Tints Shades & Tints

#4D7A87

Dark
Light

#26150A

Dark
Light

#99936D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4d7a87;
  --color-2: #26150a;
  --color-3: #99936d;
  --color-4: #688776;
  --color-5: #d9c5a9;
}

SCSS

$color-1: #4d7a87;
$color-2: #26150a;
$color-3: #99936d;
$color-4: #688776;
$color-5: #d9c5a9;

TAILWIND

colors: {
  'brand-1': '#4d7a87',
  'brand-2': '#26150a',
  'brand-3': '#99936d',
  'brand-4': '#688776',
  'brand-5': '#d9c5a9',
}

RGB Array

[77, 122, 135], [38, 21, 10], [153, 147, 109], [104, 135, 118], [217, 197, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4D7A87, #26150A, #99936D, #688776, #D9C5A9 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #4d7a87; --color-2: #26150a; --color-3: #99936d; --color-4: #688776; --color-5: #d9c5a9. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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