← Back to Editor

#DF4351 · #7B3D30 · #AB8216 · #99A887 · #B1D2B3

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

Color Details Color Details

#DF4351

Vermilion · Tomato · Passion Red

HEX
#DF4351
RGB
rgb(223, 67, 81)
HSL
hsl(355, 71%, 57%)
HSB
hsb(355, 70%, 87%)
CMYK
cmyk(0%, 70%, 64%, 13%)
Oklch
oklch(61.1% 0.192 20.1)

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

#7B3D30

Crimson · Sienna · Wine Red

HEX
#7B3D30
RGB
rgb(123, 61, 48)
HSL
hsl(10, 44%, 34%)
HSB
hsb(10, 61%, 48%)
CMYK
cmyk(0%, 50%, 61%, 52%)
Oklch
oklch(43.6% 0.089 33.1)

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

#AB8216

Ochre · DarkGoldenRod · Honey Gold

HEX
#AB8216
RGB
rgb(171, 130, 22)
HSL
hsl(43, 77%, 38%)
HSB
hsb(43, 87%, 67%)
CMYK
cmyk(0%, 24%, 87%, 33%)
Oklch
oklch(63.0% 0.123 85.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#99A887

Grass Green · DarkSeaGreen · Olive Green

HEX
#99A887
RGB
rgb(153, 168, 135)
HSL
hsl(87, 16%, 59%)
HSB
hsb(87, 20%, 66%)
CMYK
cmyk(9%, 0%, 20%, 34%)
Oklch
oklch(71.1% 0.050 127.5)

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

#B1D2B3

Celadon · Silver · Apple Green

HEX
#B1D2B3
RGB
rgb(177, 210, 179)
HSL
hsl(124, 27%, 76%)
HSB
hsb(124, 16%, 82%)
CMYK
cmyk(16%, 0%, 15%, 18%)
Oklch
oklch(83.1% 0.055 146.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DF4351
43DFD2

Analogous

DF439E
DF4351
DF8443

Triadic

DF4351
50DF43
4350DF

Split-Comp.

DF4351
43DF84
439EDF

Tetradic

DF4351
9EDF43
43DFD2
8443DF

Contrast Matrix WCAG 2.1 Contrast

DF4351
7B3D30
AB8216
99A887
B1D2B3
—
2.0
Fail
1.2
Fail
1.6
Fail
2.5
Fail
2.0
Fail
—
2.3
Fail
3.3
AA Large
5.0
AA
1.2
Fail
2.3
Fail
—
1.4
Fail
2.1
Fail
1.6
Fail
3.3
AA Large
1.4
Fail
—
1.5
Fail
2.5
Fail
5.0
AA
2.1
Fail
1.5
Fail
—
White BG
4.2AA Large
8.2AAA
3.5AA Large
2.5Fail
1.6Fail
Black BG
5.1AA
2.6Fail
5.9AA
8.3AAA
12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9A4E
606033
999930
9FA08F
BFC0BB

Deuteranopia

A5B04D
646834
9C9F36
9F9E91
BDBBBC

Tritanopia

D74B4A
783636
A94549
9A9597
B3C0C2

Achromatopsia

737373
4E4E4E
828282
A0A0A0
C5C5C5

Shades & Tints Shades & Tints

#DF4351

Dark
Light

#7B3D30

Dark
Light

#AB8216

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #df4351;
  --color-2: #7b3d30;
  --color-3: #ab8216;
  --color-4: #99a887;
  --color-5: #b1d2b3;
}

SCSS

$color-1: #df4351;
$color-2: #7b3d30;
$color-3: #ab8216;
$color-4: #99a887;
$color-5: #b1d2b3;

TAILWIND

colors: {
  'brand-1': '#df4351',
  'brand-2': '#7b3d30',
  'brand-3': '#ab8216',
  'brand-4': '#99a887',
  'brand-5': '#b1d2b3',
}

RGB Array

[223, 67, 81], [123, 61, 48], [171, 130, 22], [153, 168, 135], [177, 210, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DF4351, #7B3D30, #AB8216, #99A887, #B1D2B3 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: #df4351; --color-2: #7b3d30; --color-3: #ab8216; --color-4: #99a887; --color-5: #b1d2b3. 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