← Back to Editor

#6F7E97 · #6A5781 · #671750 · #D0A19C · #C9D2CB

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

Color Details Color Details

#6F7E97

Azure · SlateGray · Navy Blue

HEX
#6F7E97
RGB
rgb(111, 126, 151)
HSL
hsl(218, 16%, 51%)
HSB
hsb(218, 26%, 59%)
CMYK
cmyk(26%, 17%, 0%, 41%)
Oklch
oklch(59.0% 0.042 260.6)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#6A5781

Deep Indigo · DimGray · Violet

HEX
#6A5781
RGB
rgb(106, 87, 129)
HSL
hsl(267, 19%, 42%)
HSB
hsb(267, 33%, 51%)
CMYK
cmyk(18%, 33%, 0%, 49%)
Oklch
oklch(49.2% 0.069 304.7)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#671750

Rose Purple · Purple · Eggplant

HEX
#671750
RGB
rgb(103, 23, 80)
HSL
hsl(317, 63%, 25%)
HSB
hsb(317, 78%, 40%)
CMYK
cmyk(0%, 78%, 22%, 60%)
Oklch
oklch(36.1% 0.129 342.0)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#D0A19C

Peach Pink · Tan · Coral Red

HEX
#D0A19C
RGB
rgb(208, 161, 156)
HSL
hsl(6, 36%, 71%)
HSB
hsb(6, 25%, 82%)
CMYK
cmyk(0%, 23%, 25%, 18%)
Oklch
oklch(75.1% 0.057 25.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#C9D2CB

Celadon · LightGray · Pearl Gray

HEX
#C9D2CB
RGB
rgb(201, 210, 203)
HSL
hsl(133, 9%, 81%)
HSB
hsb(133, 4%, 82%)
CMYK
cmyk(4%, 0%, 3%, 18%)
Oklch
oklch(85.5% 0.014 152.6)

Traditional「Celadon」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6F7E97
96876E

Analogous

6E9196
6F7E97
736E96

Triadic

6F7E97
966E7D
7D966E

Split-Comp.

6F7E97
96736E
91966E

Tetradic

6F7E97
966E91
96876E
6E9673

Contrast Matrix WCAG 2.1 Contrast

6F7E97
6A5781
671750
D0A19C
C9D2CB
—
1.6
Fail
2.8
Fail
1.8
Fail
2.7
Fail
1.6
Fail
—
1.8
Fail
2.8
Fail
4.1
AA Large
2.8
Fail
1.8
Fail
—
5.1
AA
7.5
AAA
1.8
Fail
2.8
Fail
5.1
AA
—
1.5
Fail
2.7
Fail
4.1
AA Large
7.5
AAA
1.5
Fail
—
White BG
4.1AA Large
6.4AA
11.6AAA
2.3Fail
1.5Fail
Black BG
5.1AA
3.3AA Large
1.8Fail
9.3AAA
13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

757691
626277
444442
BCBB9D
CDCDCD

Deuteranopia

757390
636474
494F3F
BEC29E
CCCCCD

Tritanopia

708C8B
696F6D
633735
CE9E9E
C9CECE

Achromatopsia

7C7C7C
616161
353535
AEAEAE
CFCFCF

Shades & Tints Shades & Tints

#6F7E97

Dark
Light

#6A5781

Dark
Light

#671750

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6f7e97;
  --color-2: #6a5781;
  --color-3: #671750;
  --color-4: #d0a19c;
  --color-5: #c9d2cb;
}

SCSS

$color-1: #6f7e97;
$color-2: #6a5781;
$color-3: #671750;
$color-4: #d0a19c;
$color-5: #c9d2cb;

TAILWIND

colors: {
  'brand-1': '#6f7e97',
  'brand-2': '#6a5781',
  'brand-3': '#671750',
  'brand-4': '#d0a19c',
  'brand-5': '#c9d2cb',
}

RGB Array

[111, 126, 151], [106, 87, 129], [103, 23, 80], [208, 161, 156], [201, 210, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #6F7E97, #6A5781, #671750, #D0A19C, #C9D2CB is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #6f7e97; --color-2: #6a5781; --color-3: #671750; --color-4: #d0a19c; --color-5: #c9d2cb. 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 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