← Back to Editor

#638E7D · #4F4061 · #975771 · #F37B6A · #FCB57D

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

Color Details Color Details

#638E7D

Mineral Blue · SlateGray · Olive Green

HEX
#638E7D
RGB
rgb(99, 142, 125)
HSL
hsl(156, 18%, 47%)
HSB
hsb(156, 30%, 56%)
CMYK
cmyk(30%, 0%, 12%, 44%)
Oklch
oklch(61.0% 0.054 168.0)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#4F4061

Deep Indigo · DarkSlateGray · Eggplant

HEX
#4F4061
RGB
rgb(79, 64, 97)
HSL
hsl(267, 20%, 32%)
HSB
hsb(267, 34%, 38%)
CMYK
cmyk(19%, 34%, 0%, 62%)
Oklch
oklch(40.1% 0.057 304.8)

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

#975771

Dark Violet · Gray · Camellia

HEX
#975771
RGB
rgb(151, 87, 113)
HSL
hsl(336, 27%, 47%)
HSB
hsb(336, 42%, 59%)
CMYK
cmyk(0%, 42%, 25%, 41%)
Oklch
oklch(53.8% 0.090 354.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#F37B6A

Peach Pink · Salmon · Coral Red

HEX
#F37B6A
RGB
rgb(243, 123, 106)
HSL
hsl(7, 85%, 68%)
HSB
hsb(7, 56%, 95%)
CMYK
cmyk(0%, 49%, 56%, 5%)
Oklch
oklch(71.7% 0.151 29.6)

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

#FCB57D

Apricot · LightSalmon · Warm Sun

HEX
#FCB57D
RGB
rgb(252, 181, 125)
HSL
hsl(26, 95%, 74%)
HSB
hsb(26, 50%, 99%)
CMYK
cmyk(0%, 28%, 50%, 1%)
Oklch
oklch(82.8% 0.110 58.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

638E7D
8D6274

Analogous

628D67
638E7D
62898D

Triadic

638E7D
7C628D
8D7C62

Split-Comp.

638E7D
8D6289
8D6762

Tetradic

638E7D
67628D
8D6274
898D62

Contrast Matrix WCAG 2.1 Contrast

638E7D
4F4061
975771
F37B6A
FCB57D
—
2.5
Fail
1.5
Fail
1.4
Fail
2.1
Fail
2.5
Fail
—
1.8
Fail
3.5
AA Large
5.4
AA
1.5
Fail
1.8
Fail
—
2.0
Fail
3.1
AA Large
1.4
Fail
3.5
AA Large
2.0
Fail
—
1.5
Fail
2.1
Fail
5.4
AA
3.1
AA Large
1.5
Fail
—
White BG
3.7AA Large
9.4AAA
5.4AA
2.7Fail
1.7Fail
Black BG
5.7AA
2.2Fail
3.9AA Large
7.9AAA
12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

767681
494859
7B7B6B
BFBE6E
DDDD8B

Deuteranopia

737082
494B57
7F8469
C6CF6F
E1E78E

Tritanopia

658485
4E5351
946665
ED7172
F89598

Achromatopsia

7F7F7F
484848
6D6D6D
9D9D9D
C4C4C4

Shades & Tints Shades & Tints

#638E7D

Dark
Light

#4F4061

Dark
Light

#975771

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #638e7d;
  --color-2: #4f4061;
  --color-3: #975771;
  --color-4: #f37b6a;
  --color-5: #fcb57d;
}

SCSS

$color-1: #638e7d;
$color-2: #4f4061;
$color-3: #975771;
$color-4: #f37b6a;
$color-5: #fcb57d;

TAILWIND

colors: {
  'brand-1': '#638e7d',
  'brand-2': '#4f4061',
  'brand-3': '#975771',
  'brand-4': '#f37b6a',
  'brand-5': '#fcb57d',
}

RGB Array

[99, 142, 125], [79, 64, 97], [151, 87, 113], [243, 123, 106], [252, 181, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #638E7D, #4F4061, #975771, #F37B6A, #FCB57D is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #638e7d; --color-2: #4f4061; --color-3: #975771; --color-4: #f37b6a; --color-5: #fcb57d. 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 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