#707C8C + #A7A09A + #D2A29E + #ECA18A + #F88A97 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#707C8C

Indigo · SlateGray · Navy Blue

HEX

#707C8C

RGB

rgb(112, 124, 140)

HSL

hsl(214, 11%, 49%)

HSB

hsb(214, 20%, 55%)

CMYK

cmyk(20%, 11%, 0%, 45%)

Oklch

oklch(58.2% 0.028 255.6)

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

#A7A09A

Ash · DarkGray · Silver Sand

HEX

#A7A09A

RGB

rgb(167, 160, 154)

HSL

hsl(28, 7%, 63%)

HSB

hsb(28, 8%, 65%)

CMYK

cmyk(0%, 4%, 8%, 35%)

Oklch

oklch(71.0% 0.012 63.3)

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

#D2A29E

Peach Pink · Tan · Coral Red

HEX

#D2A29E

RGB

rgb(210, 162, 158)

HSL

hsl(5, 37%, 72%)

HSB

hsb(5, 25%, 82%)

CMYK

cmyk(0%, 23%, 25%, 18%)

Oklch

oklch(75.5% 0.058 24.0)

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

#ECA18A

Peach Pink · DarkSalmon · Coral Red

HEX

#ECA18A

RGB

rgb(236, 161, 138)

HSL

hsl(14, 72%, 73%)

HSB

hsb(14, 42%, 93%)

CMYK

cmyk(0%, 32%, 42%, 7%)

Oklch

oklch(77.7% 0.096 37.8)

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

#F88A97

Peach Pink · LightCoral · Coral Red

HEX

#F88A97

RGB

rgb(248, 138, 151)

HSL

hsl(353, 89%, 76%)

HSB

hsb(353, 44%, 97%)

CMYK

cmyk(0%, 44%, 39%, 3%)

Oklch

oklch(75.6% 0.134 13.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

707C8C

8B7F6F

Analogous

6F898B

707C8C

716F8B

Triadic

707C8C

8B6F7B

7B8B6F

Split-Comp.

707C8C

8B716F

898B6F

Tetradic

707C8C

8B6F89

8B7F6F

6F8B71

Contrast Matrix WCAG 2.1 Contrast

707C8C	A7A09A	D2A29E	ECA18A	F88A97
—	1.6 Fail	1.9 Fail	2.0 Fail	1.8 Fail
1.6 Fail	—	1.2 Fail	1.2 Fail	1.1 Fail
1.9 Fail	1.2 Fail	—	1.1 Fail	1.0 Fail
2.0 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.8 Fail	1.1 Fail	1.0 Fail	1.1 Fail	—

White BG

4.2AA Large

2.6Fail

2.2Fail

2.1Fail

2.3Fail

Black BG

5.0AA

8.1AAA

9.4AAA

10.0AAA

9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

757588

A4A49B

BDBD9F

CCCB90

C8C794

Deuteranopia

757487

A4A59C

C0C49F

D0D691

CFD793

Tritanopia

718584

A79D9D

D0A0A0

E89495

F39191

Achromatopsia

7A7A7A

A1A1A1

B0B0B0

B5B5B5

ACACAC

Shades & Tints Shades & Tints

#707C8C

Dark

Light

#A7A09A

Dark

Light

#D2A29E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #707c8c;
  --color-2: #a7a09a;
  --color-3: #d2a29e;
  --color-4: #eca18a;
  --color-5: #f88a97;
}

SCSS

$color-1: #707c8c;
$color-2: #a7a09a;
$color-3: #d2a29e;
$color-4: #eca18a;
$color-5: #f88a97;

TAILWIND

colors: {
  'brand-1': '#707c8c',
  'brand-2': '#a7a09a',
  'brand-3': '#d2a29e',
  'brand-4': '#eca18a',
  'brand-5': '#f88a97',
}

RGB Array

[112, 124, 140], [167, 160, 154], [210, 162, 158], [236, 161, 138], [248, 138, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #707C8C, #A7A09A, #D2A29E, #ECA18A, #F88A97 is ideal for: health products, baby brands, fresh-style blogs. 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: #707c8c; --color-2: #a7a09a; --color-3: #d2a29e; --color-4: #eca18a; --color-5: #f88a97. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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