← Back to Editor

#687372 · #916951 · #EB6F28 · #DEC178 · #E3DD88

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

#687372

Ink Gray · DimGray · Warm Gray

HEX
#687372
RGB
rgb(104, 115, 114)
HSL
hsl(175, 5%, 43%)
HSB
hsb(175, 10%, 45%)
CMYK
cmyk(10%, 0%, 1%, 55%)
Oklch
oklch(54.6% 0.013 190.2)

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

#916951

Tangerine · Sienna · Amber Brown

HEX
#916951
RGB
rgb(145, 105, 81)
HSL
hsl(23, 28%, 44%)
HSB
hsb(23, 44%, 57%)
CMYK
cmyk(0%, 28%, 44%, 43%)
Oklch
oklch(55.6% 0.063 52.0)

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

#EB6F28

Tangerine · Chocolate · Warm Sun

HEX
#EB6F28
RGB
rgb(235, 111, 40)
HSL
hsl(22, 83%, 54%)
HSB
hsb(22, 83%, 92%)
CMYK
cmyk(0%, 53%, 83%, 8%)
Oklch
oklch(68.0% 0.173 46.1)

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

#DEC178

Ginger · BurlyWood · Sunflower

HEX
#DEC178
RGB
rgb(222, 193, 120)
HSL
hsl(43, 61%, 67%)
HSB
hsb(43, 46%, 87%)
CMYK
cmyk(0%, 13%, 46%, 13%)
Oklch
oklch(82.0% 0.098 88.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E3DD88

Fresh Green · Khaki · Sunflower

HEX
#E3DD88
RGB
rgb(227, 221, 136)
HSL
hsl(56, 62%, 71%)
HSB
hsb(56, 40%, 89%)
CMYK
cmyk(0%, 3%, 40%, 11%)
Oklch
oklch(88.4% 0.107 104.9)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

687372
736869

Analogous

68736D
687372
686F73

Triadic

687372
726873
737268

Split-Comp.

687372
73686F
736D68

Tetradic

687372
6D6873
736869
6F7368

Contrast Matrix WCAG 2.1 Contrast

687372
916951
EB6F28
DEC178
E3DD88
—
1.0
Fail
1.6
Fail
2.8
Fail
3.5
AA Large
1.0
Fail
—
1.6
Fail
2.8
Fail
3.4
AA Large
1.6
Fail
1.6
Fail
—
1.8
Fail
2.2
Fail
2.8
Fail
2.8
Fail
1.8
Fail
—
1.2
Fail
3.5
AA Large
3.4
AA Large
2.2
Fail
1.2
Fail
—
White BG
4.9AA
4.8AA
3.1AA Large
1.7Fail
1.4Fail
Black BG
4.3AA Large
4.3AA Large
6.8AA
12.0AAA
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6D72
807F57
B5B439
D1D18A
E0E09D

Deuteranopia

6C6B72
828558
BDC63D
D3D58E
E1E1A2

Tritanopia

697272
8F5B5C
E5474A
DD989B
E3ADB0

Achromatopsia

707070
727272
8C8C8C
C1C1C1
D5D5D5

Shades & Tints Shades & Tints

#687372

Dark
Light

#916951

Dark
Light

#EB6F28

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #687372;
  --color-2: #916951;
  --color-3: #eb6f28;
  --color-4: #dec178;
  --color-5: #e3dd88;
}

SCSS

$color-1: #687372;
$color-2: #916951;
$color-3: #eb6f28;
$color-4: #dec178;
$color-5: #e3dd88;

TAILWIND

colors: {
  'brand-1': '#687372',
  'brand-2': '#916951',
  'brand-3': '#eb6f28',
  'brand-4': '#dec178',
  'brand-5': '#e3dd88',
}

RGB Array

[104, 115, 114], [145, 105, 81], [235, 111, 40], [222, 193, 120], [227, 221, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #687372, #916951, #EB6F28, #DEC178, #E3DD88 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: #687372; --color-2: #916951; --color-3: #eb6f28; --color-4: #dec178; --color-5: #e3dd88. 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