← Back to Editor

#945167 · #D44E47 · #F27642 · #DDBC6E · #B3AA60

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

#945167

Dark Violet · DimGray · Camellia

HEX
#945167
RGB
rgb(148, 81, 103)
HSL
hsl(340, 29%, 45%)
HSB
hsb(340, 45%, 58%)
CMYK
cmyk(0%, 45%, 30%, 42%)
Oklch
oklch(52.1% 0.093 359.8)

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

#D44E47

Vermilion · Tomato · Passion Red

HEX
#D44E47
RGB
rgb(212, 78, 71)
HSL
hsl(3, 62%, 55%)
HSB
hsb(3, 67%, 83%)
CMYK
cmyk(0%, 63%, 67%, 17%)
Oklch
oklch(60.4% 0.170 26.4)

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

#F27642

Tangerine · Coral · Warm Sun

HEX
#F27642
RGB
rgb(242, 118, 66)
HSL
hsl(18, 87%, 60%)
HSB
hsb(18, 73%, 95%)
CMYK
cmyk(0%, 51%, 73%, 5%)
Oklch
oklch(70.2% 0.166 42.1)

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

#DDBC6E

Ginger · BurlyWood · Sunflower

HEX
#DDBC6E
RGB
rgb(221, 188, 110)
HSL
hsl(42, 62%, 65%)
HSB
hsb(42, 50%, 87%)
CMYK
cmyk(0%, 15%, 50%, 13%)
Oklch
oklch(80.7% 0.104 87.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#B3AA60

Autumn Sage · Tan · Sunflower

HEX
#B3AA60
RGB
rgb(179, 170, 96)
HSL
hsl(53, 35%, 54%)
HSB
hsb(53, 46%, 70%)
CMYK
cmyk(0%, 5%, 46%, 30%)
Oklch
oklch(72.9% 0.096 102.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

945167
51947E

Analogous

945189
945167
945D51

Triadic

945167
689451
516894

Split-Comp.

945167
51945D
518994

Tetradic

945167
899451
51947E
5D5194

Contrast Matrix WCAG 2.1 Contrast

945167
D44E47
F27642
DDBC6E
B3AA60
—
1.4
Fail
2.0
Fail
3.2
AA Large
2.4
Fail
1.4
Fail
—
1.5
Fail
2.3
Fail
1.8
Fail
2.0
Fail
1.5
Fail
—
1.5
Fail
1.2
Fail
3.2
AA Large
2.3
Fail
1.5
Fail
—
1.3
Fail
2.4
Fail
1.8
Fail
1.2
Fail
1.3
Fail
—
White BG
5.8AA
4.2AA Large
2.8Fail
1.8Fail
2.4Fail
Black BG
3.6AA Large
5.0AA
7.4AAA
11.5AAA
8.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

777662
9A9949
BCBB4F
CFCE81
AFAF72

Deuteranopia

7B8060
A2AC49
C4CD52
D1D385
B0B076

Tritanopia

915D5D
CD4A4A
EC595B
DB9093
B38083

Achromatopsia

686868
757575
959595
BDBDBD
A4A4A4

Shades & Tints Shades & Tints

#945167

Dark
Light

#D44E47

Dark
Light

#F27642

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #945167;
  --color-2: #d44e47;
  --color-3: #f27642;
  --color-4: #ddbc6e;
  --color-5: #b3aa60;
}

SCSS

$color-1: #945167;
$color-2: #d44e47;
$color-3: #f27642;
$color-4: #ddbc6e;
$color-5: #b3aa60;

TAILWIND

colors: {
  'brand-1': '#945167',
  'brand-2': '#d44e47',
  'brand-3': '#f27642',
  'brand-4': '#ddbc6e',
  'brand-5': '#b3aa60',
}

RGB Array

[148, 81, 103], [212, 78, 71], [242, 118, 66], [221, 188, 110], [179, 170, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #945167, #D44E47, #F27642, #DDBC6E, #B3AA60 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: #945167; --color-2: #d44e47; --color-3: #f27642; --color-4: #ddbc6e; --color-5: #b3aa60. 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