← Back to Editor

#677E86 · #97A09B · #D4C3AF · #D4A976 · #AE7E56

warm

A 5-color warm 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

#677E86

Slate Blue · SlateGray · Mint Ice

HEX
#677E86
RGB
rgb(103, 126, 134)
HSL
hsl(195, 13%, 46%)
HSB
hsb(195, 23%, 53%)
CMYK
cmyk(23%, 6%, 0%, 47%)
Oklch
oklch(57.8% 0.029 220.9)

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

#97A09B

Ash · DarkGray · Silver Sand

HEX
#97A09B
RGB
rgb(151, 160, 155)
HSL
hsl(147, 5%, 61%)
HSB
hsb(147, 6%, 63%)
CMYK
cmyk(6%, 0%, 3%, 37%)
Oklch
oklch(69.7% 0.013 161.9)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#D4C3AF

Goose Yellow · Silver · Peach Orange

HEX
#D4C3AF
RGB
rgb(212, 195, 175)
HSL
hsl(32, 30%, 76%)
HSB
hsb(32, 17%, 83%)
CMYK
cmyk(0%, 8%, 17%, 17%)
Oklch
oklch(82.6% 0.033 71.8)

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

#D4A976

Ginger · Tan · Warm Sun

HEX
#D4A976
RGB
rgb(212, 169, 118)
HSL
hsl(33, 52%, 65%)
HSB
hsb(33, 44%, 83%)
CMYK
cmyk(0%, 20%, 44%, 17%)
Oklch
oklch(76.2% 0.084 70.8)

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

#AE7E56

Tangerine · Sienna · Warm Sun

HEX
#AE7E56
RGB
rgb(174, 126, 86)
HSL
hsl(27, 35%, 51%)
HSB
hsb(27, 51%, 68%)
CMYK
cmyk(0%, 28%, 51%, 32%)
Oklch
oklch(63.2% 0.081 60.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

677E86
856E66

Analogous

66857D
677E86
666E85

Triadic

677E86
85667D
7D8566

Split-Comp.

677E86
85666E
857D66

Tetradic

677E86
7D6685
856E66
6E8566

Contrast Matrix WCAG 2.1 Contrast

677E86
97A09B
D4C3AF
D4A976
AE7E56
—
1.6
Fail
2.5
Fail
2.0
Fail
1.2
Fail
1.6
Fail
—
1.6
Fail
1.2
Fail
1.3
Fail
2.5
Fail
1.6
Fail
—
1.3
Fail
2.1
Fail
2.0
Fail
1.2
Fail
1.3
Fail
—
1.6
Fail
1.2
Fail
1.3
Fail
2.1
Fail
1.6
Fail
—
White BG
4.3AA Large
2.7Fail
1.7Fail
2.2Fail
3.5AA Large
Black BG
4.9AA
7.8AAA
12.2AAA
9.7AAA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

717184
9B9B9C
CDCCB4
C1C182
999960

Deuteranopia

706E84
9A9A9D
CECFB5
C4C785
9CA062

Tritanopia

688382
979D9D
D3B8B9
D28C8E
AC6769

Achromatopsia

787878
9D9D9D
C6C6C6
B0B0B0
888888

Shades & Tints Shades & Tints

#677E86

Dark
Light

#97A09B

Dark
Light

#D4C3AF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #677e86;
  --color-2: #97a09b;
  --color-3: #d4c3af;
  --color-4: #d4a976;
  --color-5: #ae7e56;
}

SCSS

$color-1: #677e86;
$color-2: #97a09b;
$color-3: #d4c3af;
$color-4: #d4a976;
$color-5: #ae7e56;

TAILWIND

colors: {
  'brand-1': '#677e86',
  'brand-2': '#97a09b',
  'brand-3': '#d4c3af',
  'brand-4': '#d4a976',
  'brand-5': '#ae7e56',
}

RGB Array

[103, 126, 134], [151, 160, 155], [212, 195, 175], [212, 169, 118], [174, 126, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #677E86, #97A09B, #D4C3AF, #D4A976, #AE7E56 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: #677e86; --color-2: #97a09b; --color-3: #d4c3af; --color-4: #d4a976; --color-5: #ae7e56. 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 warm-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