← Back to Editor

#708CA1 · #94AAC2 · #E1E2E2 · #AC917C · #977D6E

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

#708CA1

Slate Blue · LightSlateGray · Navy Blue

HEX
#708CA1
RGB
rgb(112, 140, 161)
HSL
hsl(206, 21%, 54%)
HSB
hsb(206, 30%, 63%)
CMYK
cmyk(30%, 13%, 0%, 37%)
Oklch
oklch(62.6% 0.045 240.8)

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

#94AAC2

Azure · DarkGray · Cobalt Blue

HEX
#94AAC2
RGB
rgb(148, 170, 194)
HSL
hsl(211, 27%, 67%)
HSB
hsb(211, 24%, 76%)
CMYK
cmyk(24%, 12%, 0%, 24%)
Oklch
oklch(72.9% 0.043 250.7)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#E1E2E2

Plain White · Lavender · Cloud White

HEX
#E1E2E2
RGB
rgb(225, 226, 226)
HSL
hsl(180, 2%, 88%)
HSB
hsb(180, 0%, 89%)
CMYK
cmyk(0%, 0%, 0%, 11%)
Oklch
oklch(91.2% 0.001 197.1)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#AC917C

Tangerine · Gray · Warm Sun

HEX
#AC917C
RGB
rgb(172, 145, 124)
HSL
hsl(26, 22%, 58%)
HSB
hsb(26, 28%, 67%)
CMYK
cmyk(0%, 16%, 28%, 33%)
Oklch
oklch(67.6% 0.044 59.8)

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

#977D6E

Tangerine · Gray · Warm Sun

HEX
#977D6E
RGB
rgb(151, 125, 110)
HSL
hsl(22, 16%, 51%)
HSB
hsb(22, 27%, 59%)
CMYK
cmyk(0%, 17%, 27%, 41%)
Oklch
oklch(61.0% 0.039 51.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

708CA1
A28671

Analogous

71A29F
708CA1
7174A2

Triadic

708CA1
A2718D
8DA271

Split-Comp.

708CA1
A27174
A29F71

Tetradic

708CA1
9F71A2
A28671
74A271

Contrast Matrix WCAG 2.1 Contrast

708CA1
94AAC2
E1E2E2
AC917C
977D6E
—
1.5
Fail
2.7
Fail
1.2
Fail
1.1
Fail
1.5
Fail
—
1.8
Fail
1.2
Fail
1.6
Fail
2.7
Fail
1.8
Fail
—
2.3
Fail
3.0
Fail
1.2
Fail
1.2
Fail
2.3
Fail
—
1.3
Fail
1.1
Fail
1.6
Fail
3.0
Fail
1.3
Fail
—
White BG
3.5AA Large
2.4Fail
1.3Fail
3.0Fail
3.8AA Large
Black BG
6.0AA
8.8AAA
16.2AAA
7.1AAA
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7C7C9C
9E9EBC
E1E1E2
A0A081
8C8C72

Deuteranopia

7B789B
9C9BBB
E1E1E2
A2A482
8D8F73

Tritanopia

719897
95B8B7
E1E2E2
AB8586
967475

Achromatopsia

868686
A6A6A6
E2E2E2
979797
838383

Shades & Tints Shades & Tints

#708CA1

Dark
Light

#94AAC2

Dark
Light

#E1E2E2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #708ca1;
  --color-2: #94aac2;
  --color-3: #e1e2e2;
  --color-4: #ac917c;
  --color-5: #977d6e;
}

SCSS

$color-1: #708ca1;
$color-2: #94aac2;
$color-3: #e1e2e2;
$color-4: #ac917c;
$color-5: #977d6e;

TAILWIND

colors: {
  'brand-1': '#708ca1',
  'brand-2': '#94aac2',
  'brand-3': '#e1e2e2',
  'brand-4': '#ac917c',
  'brand-5': '#977d6e',
}

RGB Array

[112, 140, 161], [148, 170, 194], [225, 226, 226], [172, 145, 124], [151, 125, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #708CA1, #94AAC2, #E1E2E2, #AC917C, #977D6E 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: #708ca1; --color-2: #94aac2; --color-3: #e1e2e2; --color-4: #ac917c; --color-5: #977d6e. 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