← Back to Editor

#4F6362 · #618572 · #AD998E · #E0A190 · #FF707A

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

#4F6362

Mineral Blue · DimGray · Mint Ice

HEX
#4F6362
RGB
rgb(79, 99, 98)
HSL
hsl(177, 11%, 35%)
HSB
hsb(177, 20%, 39%)
CMYK
cmyk(20%, 0%, 1%, 61%)
Oklch
oklch(48.3% 0.024 192.6)

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

#618572

Celadon · DimGray · Olive Green

HEX
#618572
RGB
rgb(97, 133, 114)
HSL
hsl(148, 16%, 45%)
HSB
hsb(148, 27%, 52%)
CMYK
cmyk(27%, 0%, 14%, 48%)
Oklch
oklch(58.4% 0.050 161.3)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#AD998E

Apricot · DarkGray · Warm Sun

HEX
#AD998E
RGB
rgb(173, 153, 142)
HSL
hsl(21, 16%, 62%)
HSB
hsb(21, 18%, 68%)
CMYK
cmyk(0%, 12%, 18%, 32%)
Oklch
oklch(69.7% 0.029 50.7)

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

#E0A190

Peach Pink · Tan · Coral Red

HEX
#E0A190
RGB
rgb(224, 161, 144)
HSL
hsl(13, 56%, 72%)
HSB
hsb(13, 36%, 88%)
CMYK
cmyk(0%, 28%, 36%, 12%)
Oklch
oklch(76.5% 0.079 35.7)

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

#FF707A

Peach Pink · Salmon · Coral Red

HEX
#FF707A
RGB
rgb(255, 112, 122)
HSL
hsl(356, 100%, 72%)
HSB
hsb(356, 56%, 100%)
CMYK
cmyk(0%, 56%, 52%, 0%)
Oklch
oklch(72.1% 0.174 18.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4F6362
634F50

Analogous

4F6358
4F6362
4F5A63

Triadic

4F6362
624F63
63624F

Split-Comp.

4F6362
634F5A
63584F

Tetradic

4F6362
584F63
634F50
5A634F

Contrast Matrix WCAG 2.1 Contrast

4F6362
618572
AD998E
E0A190
FF707A
—
1.6
Fail
2.3
Fail
2.9
Fail
2.4
Fail
1.6
Fail
—
1.5
Fail
1.9
Fail
1.5
Fail
2.3
Fail
1.5
Fail
—
1.3
Fail
1.0
Fail
2.9
Fail
1.9
Fail
1.3
Fail
—
1.2
Fail
2.4
Fail
1.5
Fail
1.0
Fail
1.2
Fail
—
White BG
6.4AA
4.1AA Large
2.7Fail
2.2Fail
2.7Fail
Black BG
3.3AA Large
5.1AA
7.7AAA
9.7AAA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

585862
717177
A4A491
C5C494
C1C078

Deuteranopia

575562
6F6C78
A6A791
C8CD95
C9D477

Tritanopia

506262
637A7B
AC9393
DD9798
F87675

Achromatopsia

5D5D5D
787878
9E9E9E
B2B2B2
9C9C9C

Shades & Tints Shades & Tints

#4F6362

Dark
Light

#618572

Dark
Light

#AD998E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4f6362;
  --color-2: #618572;
  --color-3: #ad998e;
  --color-4: #e0a190;
  --color-5: #ff707a;
}

SCSS

$color-1: #4f6362;
$color-2: #618572;
$color-3: #ad998e;
$color-4: #e0a190;
$color-5: #ff707a;

TAILWIND

colors: {
  'brand-1': '#4f6362',
  'brand-2': '#618572',
  'brand-3': '#ad998e',
  'brand-4': '#e0a190',
  'brand-5': '#ff707a',
}

RGB Array

[79, 99, 98], [97, 133, 114], [173, 153, 142], [224, 161, 144], [255, 112, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4F6362, #618572, #AD998E, #E0A190, #FF707A is ideal for: corporate websites, product showcases, portfolios. 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: #4f6362; --color-2: #618572; --color-3: #ad998e; --color-4: #e0a190; --color-5: #ff707a. 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. 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