← Back to Editor

#701C30 · #7D5C67 · #948875 · #A7BD7B · #D4CC79

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

#701C30

Crimson · Brown · Wine Red

HEX
#701C30
RGB
rgb(112, 28, 48)
HSL
hsl(346, 60%, 27%)
HSB
hsb(346, 75%, 44%)
CMYK
cmyk(0%, 75%, 57%, 56%)
Oklch
oklch(37.0% 0.117 11.1)

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

#7D5C67

Dark Violet · DimGray · Camellia

HEX
#7D5C67
RGB
rgb(125, 92, 103)
HSL
hsl(340, 15%, 43%)
HSB
hsb(340, 26%, 49%)
CMYK
cmyk(0%, 26%, 18%, 51%)
Oklch
oklch(51.2% 0.046 357.0)

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

#948875

Ginger · Gray · Warm Sun

HEX
#948875
RGB
rgb(148, 136, 117)
HSL
hsl(37, 13%, 52%)
HSB
hsb(37, 21%, 58%)
CMYK
cmyk(0%, 8%, 21%, 42%)
Oklch
oklch(63.2% 0.031 79.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#A7BD7B

Willow Green · DarkSeaGreen · Apple Green

HEX
#A7BD7B
RGB
rgb(167, 189, 123)
HSL
hsl(80, 33%, 61%)
HSB
hsb(80, 35%, 74%)
CMYK
cmyk(12%, 0%, 35%, 26%)
Oklch
oklch(76.6% 0.092 123.5)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D4CC79

Fresh Green · BurlyWood · Sunflower

HEX
#D4CC79
RGB
rgb(212, 204, 121)
HSL
hsl(55, 51%, 65%)
HSB
hsb(55, 43%, 83%)
CMYK
cmyk(0%, 4%, 43%, 17%)
Oklch
oklch(83.4% 0.105 103.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

701C30
1C6E5B

Analogous

6E1C58
701C30
6E321C

Triadic

701C30
2F6E1C
1C2F6E

Split-Comp.

701C30
1C6E32
1C586E

Tetradic

701C30
586E1C
1C6E5B
321C6E

Contrast Matrix WCAG 2.1 Contrast

701C30
7D5C67
948875
A7BD7B
D4CC79
—
1.9
Fail
3.2
AA Large
5.4
AA
6.7
AA
1.9
Fail
—
1.7
Fail
2.8
Fail
3.5
AA Large
3.2
AA Large
1.7
Fail
—
1.7
Fail
2.1
Fail
5.4
AA
2.8
Fail
1.7
Fail
—
1.2
Fail
6.7
AA
3.5
AA Large
2.1
Fail
1.2
Fail
—
White BG
11.1AAA
5.8AA
3.5AA Large
2.1Fail
1.7Fail
Black BG
1.9Fail
3.6AA Large
6.0AA
10.2AAA
12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4C4B2B
6F6E64
8F8F7A
B1B18B
D1D08D

Deuteranopia

51572A
717364
90907B
AFAE8F
D1D292

Tritanopia

6C2727
7B6262
937D7E
A8989A
D49DA0

Achromatopsia

373737
676767
898989
AFAFAF
C5C5C5

Shades & Tints Shades & Tints

#701C30

Dark
Light

#7D5C67

Dark
Light

#948875

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #701c30;
  --color-2: #7d5c67;
  --color-3: #948875;
  --color-4: #a7bd7b;
  --color-5: #d4cc79;
}

SCSS

$color-1: #701c30;
$color-2: #7d5c67;
$color-3: #948875;
$color-4: #a7bd7b;
$color-5: #d4cc79;

TAILWIND

colors: {
  'brand-1': '#701c30',
  'brand-2': '#7d5c67',
  'brand-3': '#948875',
  'brand-4': '#a7bd7b',
  'brand-5': '#d4cc79',
}

RGB Array

[112, 28, 48], [125, 92, 103], [148, 136, 117], [167, 189, 123], [212, 204, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #701C30, #7D5C67, #948875, #A7BD7B, #D4CC79 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: #701c30; --color-2: #7d5c67; --color-3: #948875; --color-4: #a7bd7b; --color-5: #d4cc79. 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