← Back to Editor

#678C84 · #DE7E4E · #7E6A5F · #6E4646 · #2B2C40

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

#678C84

Mineral Blue · SlateGray · Mint Ice

HEX
#678C84
RGB
rgb(103, 140, 132)
HSL
hsl(167, 15%, 48%)
HSB
hsb(167, 26%, 55%)
CMYK
cmyk(26%, 0%, 6%, 45%)
Oklch
oklch(61.0% 0.043 180.0)

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

#DE7E4E

Tangerine · Coral · Warm Sun

HEX
#DE7E4E
RGB
rgb(222, 126, 78)
HSL
hsl(20, 69%, 59%)
HSB
hsb(20, 65%, 87%)
CMYK
cmyk(0%, 43%, 65%, 13%)
Oklch
oklch(68.9% 0.135 46.2)

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

#7E6A5F

Tangerine · DimGray · Amber Brown

HEX
#7E6A5F
RGB
rgb(126, 106, 95)
HSL
hsl(21, 14%, 43%)
HSB
hsb(21, 25%, 49%)
CMYK
cmyk(0%, 16%, 25%, 51%)
Oklch
oklch(54.0% 0.031 50.5)

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

#6E4646

Crimson · DimGray · Wine Red

HEX
#6E4646
RGB
rgb(110, 70, 70)
HSL
hsl(0, 22%, 35%)
HSB
hsb(0, 36%, 43%)
CMYK
cmyk(0%, 36%, 36%, 57%)
Oklch
oklch(44.0% 0.055 19.5)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#2B2C40

Indigo · DarkSlateGray · Prussian Blue

HEX
#2B2C40
RGB
rgb(43, 44, 64)
HSL
hsl(237, 20%, 21%)
HSB
hsb(237, 33%, 25%)
CMYK
cmyk(33%, 31%, 0%, 75%)
Oklch
oklch(30.1% 0.036 281.8)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

678C84
8D6870

Analogous

688D72
678C84
68828D

Triadic

678C84
85688D
8D8568

Split-Comp.

678C84
8D6882
8D7268

Tetradic

678C84
72688D
8D6870
828D68

Contrast Matrix WCAG 2.1 Contrast

678C84
DE7E4E
7E6A5F
6E4646
2B2C40
—
1.3
Fail
1.4
Fail
2.2
Fail
3.7
AA Large
1.3
Fail
—
1.8
Fail
2.7
Fail
4.7
AA
1.4
Fail
1.8
Fail
—
1.6
Fail
2.7
Fail
2.2
Fail
2.7
Fail
1.6
Fail
—
1.7
Fail
3.7
AA Large
4.7
AA
2.7
Fail
1.7
Fail
—
White BG
3.7AA Large
2.9Fail
5.1AA
8.0AAA
13.7AAA
Black BG
5.7AA
7.2AAA
4.1AA Large
2.6Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

777786
B4B45A
757562
5D5C46
2B2B3B

Deuteranopia

757286
BAC15C
777862
5F6246
2B2B3A

Tritanopia

698788
D96365
7D6464
6C4646
2B3737

Achromatopsia

808080
959595
6F6F6F
525252
2E2E2E

Shades & Tints Shades & Tints

#678C84

Dark
Light

#DE7E4E

Dark
Light

#7E6A5F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #678c84;
  --color-2: #de7e4e;
  --color-3: #7e6a5f;
  --color-4: #6e4646;
  --color-5: #2b2c40;
}

SCSS

$color-1: #678c84;
$color-2: #de7e4e;
$color-3: #7e6a5f;
$color-4: #6e4646;
$color-5: #2b2c40;

TAILWIND

colors: {
  'brand-1': '#678c84',
  'brand-2': '#de7e4e',
  'brand-3': '#7e6a5f',
  'brand-4': '#6e4646',
  'brand-5': '#2b2c40',
}

RGB Array

[103, 140, 132], [222, 126, 78], [126, 106, 95], [110, 70, 70], [43, 44, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #678C84, #DE7E4E, #7E6A5F, #6E4646, #2B2C40 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: #678c84; --color-2: #de7e4e; --color-3: #7e6a5f; --color-4: #6e4646; --color-5: #2b2c40. 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