← Back to Editor

#AD7575 · #967777 · #837777 · #768A78 · #7F9782

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AD7575

Crimson · Gray · Passion Red

HEX
#AD7575
RGB
rgb(173, 117, 117)
HSL
hsl(0, 25%, 57%)
HSB
hsb(0, 32%, 68%)
CMYK
cmyk(0%, 32%, 32%, 32%)
Oklch
oklch(62.0% 0.071 19.3)

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

#967777

Crimson · Gray · Passion Red

HEX
#967777
RGB
rgb(150, 119, 119)
HSL
hsl(0, 13%, 53%)
HSB
hsb(0, 21%, 59%)
CMYK
cmyk(0%, 21%, 21%, 41%)
Oklch
oklch(59.9% 0.039 18.3)

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

#837777

Ink Gray · Gray · Warm Gray

HEX
#837777
RGB
rgb(131, 119, 119)
HSL
hsl(0, 5%, 49%)
HSB
hsb(0, 9%, 51%)
CMYK
cmyk(0%, 9%, 9%, 49%)
Oklch
oklch(58.0% 0.015 17.6)

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

#768A78

Celadon · Gray · Warm Gray

HEX
#768A78
RGB
rgb(118, 138, 120)
HSL
hsl(126, 8%, 50%)
HSB
hsb(126, 14%, 54%)
CMYK
cmyk(14%, 0%, 13%, 46%)
Oklch
oklch(61.2% 0.035 147.9)

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

#7F9782

Celadon · Gray · Olive Green

HEX
#7F9782
RGB
rgb(127, 151, 130)
HSL
hsl(127, 10%, 55%)
HSB
hsb(127, 16%, 59%)
CMYK
cmyk(16%, 0%, 14%, 41%)
Oklch
oklch(65.2% 0.041 148.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AD7575
76ADAD

Analogous

AD7691
AD7575
AD9176

Triadic

AD7575
76AD76
7676AD

Split-Comp.

AD7575
76AD91
7691AD

Tetradic

AD7575
91AD76
76ADAD
9176AD

Contrast Matrix WCAG 2.1 Contrast

AD7575
967777
837777
768A78
7F9782
—
1.1
Fail
1.1
Fail
1.0
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.3
Fail
1.1
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
1.0
Fail
1.1
Fail
1.2
Fail
—
1.2
Fail
1.2
Fail
1.3
Fail
1.4
Fail
1.2
Fail
—
White BG
3.8AA Large
4.0AA Large
4.3AA Large
3.7AA Large
3.2AA Large
Black BG
5.6AA
5.2AA
4.9AA
5.7AA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

959475
898877
7E7E77
7F7F7C
898A87

Deuteranopia

989C75
8A8D77
7F7F77
7E7C7D
888688

Tritanopia

AA7575
947777
827777
778081
808B8C

Achromatopsia

868686
808080
7B7B7B
828282
8D8D8D

Shades & Tints Shades & Tints

#AD7575

Dark
Light

#967777

Dark
Light

#837777

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ad7575;
  --color-2: #967777;
  --color-3: #837777;
  --color-4: #768a78;
  --color-5: #7f9782;
}

SCSS

$color-1: #ad7575;
$color-2: #967777;
$color-3: #837777;
$color-4: #768a78;
$color-5: #7f9782;

TAILWIND

colors: {
  'brand-1': '#ad7575',
  'brand-2': '#967777',
  'brand-3': '#837777',
  'brand-4': '#768a78',
  'brand-5': '#7f9782',
}

RGB Array

[173, 117, 117], [150, 119, 119], [131, 119, 119], [118, 138, 120], [127, 151, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AD7575, #967777, #837777, #768A78, #7F9782 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: #ad7575; --color-2: #967777; --color-3: #837777; --color-4: #768a78; --color-5: #7f9782. 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