← Back to Editor

#74747C · #75425A · #CF646D · #D5B480 · #D9D5A2

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

#74747C

Ink Gray · Gray · Warm Gray

HEX
#74747C
RGB
rgb(116, 116, 124)
HSL
hsl(240, 3%, 47%)
HSB
hsb(240, 6%, 49%)
CMYK
cmyk(6%, 6%, 0%, 51%)
Oklch
oklch(56.2% 0.012 286.0)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#75425A

Dark Violet · DimGray · Camellia

HEX
#75425A
RGB
rgb(117, 66, 90)
HSL
hsl(332, 28%, 36%)
HSB
hsb(332, 44%, 46%)
CMYK
cmyk(0%, 44%, 23%, 54%)
Oklch
oklch(44.8% 0.077 351.0)

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

#CF646D

Crimson · LightCoral · Passion Red

HEX
#CF646D
RGB
rgb(207, 100, 109)
HSL
hsl(355, 53%, 60%)
HSB
hsb(355, 52%, 81%)
CMYK
cmyk(0%, 52%, 47%, 19%)
Oklch
oklch(63.4% 0.136 16.5)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#D5B480

Ginger · BurlyWood · Warm Sun

HEX
#D5B480
RGB
rgb(213, 180, 128)
HSL
hsl(37, 50%, 67%)
HSB
hsb(37, 40%, 84%)
CMYK
cmyk(0%, 15%, 40%, 16%)
Oklch
oklch(78.7% 0.078 78.6)

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

#D9D5A2

Fresh Green · Wheat · Sunflower

HEX
#D9D5A2
RGB
rgb(217, 213, 162)
HSL
hsl(56, 42%, 74%)
HSB
hsb(56, 25%, 85%)
CMYK
cmyk(0%, 2%, 25%, 15%)
Oklch
oklch(86.4% 0.067 104.0)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

74747C
7B7B74

Analogous

74787B
74747C
78747B

Triadic

74747C
7B7474
747B74

Split-Comp.

74747C
7B7874
787B74

Tetradic

74747C
7B7478
7B7B74
747B78

Contrast Matrix WCAG 2.1 Contrast

74747C
75425A
CF646D
D5B480
D9D5A2
—
1.7
Fail
1.3
Fail
2.4
Fail
3.1
AA Large
1.7
Fail
—
2.1
Fail
4.0
AA Large
5.2
AA
1.3
Fail
2.1
Fail
—
1.9
Fail
2.5
Fail
2.4
Fail
4.0
AA Large
1.9
Fail
—
1.3
Fail
3.1
AA Large
5.2
AA
2.5
Fail
1.3
Fail
—
White BG
4.6AA
7.8AAA
3.7AA Large
2.0Fail
1.5Fail
Black BG
4.5AA
2.7Fail
5.7AA
10.7AAA
14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

74747A
5F5E54
A1A06B
C7C68D
D7D7AE

Deuteranopia

74747A
626653
A7AF6A
C9CB90
D8D8B1

Tritanopia

747978
72504F
CA6969
D39799
D9B8BA

Achromatopsia

757575
545454
858585
B8B8B8
D0D0D0

Shades & Tints Shades & Tints

#74747C

Dark
Light

#75425A

Dark
Light

#CF646D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #74747c;
  --color-2: #75425a;
  --color-3: #cf646d;
  --color-4: #d5b480;
  --color-5: #d9d5a2;
}

SCSS

$color-1: #74747c;
$color-2: #75425a;
$color-3: #cf646d;
$color-4: #d5b480;
$color-5: #d9d5a2;

TAILWIND

colors: {
  'brand-1': '#74747c',
  'brand-2': '#75425a',
  'brand-3': '#cf646d',
  'brand-4': '#d5b480',
  'brand-5': '#d9d5a2',
}

RGB Array

[116, 116, 124], [117, 66, 90], [207, 100, 109], [213, 180, 128], [217, 213, 162]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #74747C, #75425A, #CF646D, #D5B480, #D9D5A2 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: #74747c; --color-2: #75425a; --color-3: #cf646d; --color-4: #d5b480; --color-5: #d9d5a2. 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