← Back to Editor

#2A484A · #DD2A47 · #DA9A6C · #E4C680 · #C6B985

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

Color Details Color Details

#2A484A

Slate Blue · DarkSlateGray · Peacock Green

HEX
#2A484A
RGB
rgb(42, 72, 74)
HSL
hsl(184, 28%, 23%)
HSB
hsb(184, 43%, 29%)
CMYK
cmyk(43%, 3%, 0%, 71%)
Oklch
oklch(37.9% 0.036 201.2)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#DD2A47

Vermilion · Crimson · Passion Red

HEX
#DD2A47
RGB
rgb(221, 42, 71)
HSL
hsl(350, 72%, 52%)
HSB
hsb(350, 81%, 87%)
CMYK
cmyk(0%, 81%, 68%, 13%)
Oklch
oklch(58.6% 0.211 18.9)

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

#DA9A6C

Apricot · DarkSalmon · Warm Sun

HEX
#DA9A6C
RGB
rgb(218, 154, 108)
HSL
hsl(25, 60%, 64%)
HSB
hsb(25, 50%, 85%)
CMYK
cmyk(0%, 29%, 50%, 15%)
Oklch
oklch(73.8% 0.098 56.3)

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

#E4C680

Ginger · BurlyWood · Sunflower

HEX
#E4C680
RGB
rgb(228, 198, 128)
HSL
hsl(42, 65%, 70%)
HSB
hsb(42, 44%, 89%)
CMYK
cmyk(0%, 13%, 44%, 11%)
Oklch
oklch(83.7% 0.095 87.2)

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

#C6B985

Ginger · Tan · Sunflower

HEX
#C6B985
RGB
rgb(198, 185, 133)
HSL
hsl(48, 36%, 65%)
HSB
hsb(48, 33%, 78%)
CMYK
cmyk(0%, 7%, 33%, 22%)
Oklch
oklch(78.4% 0.071 95.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2A484A
4B2C2A

Analogous

2A4B3D
2A484A
2A384B

Triadic

2A484A
4B2A49
494B2A

Split-Comp.

2A484A
4B2A38
4B3D2A

Tetradic

2A484A
3D2A4B
4B2C2A
384B2A

Contrast Matrix WCAG 2.1 Contrast

2A484A
DD2A47
DA9A6C
E4C680
C6B985
—
2.1
Fail
4.2
AA Large
6.0
AA
5.0
AA
2.1
Fail
—
2.0
Fail
2.8
Fail
2.4
Fail
4.2
AA Large
2.0
Fail
—
1.4
Fail
1.2
Fail
6.0
AA
2.8
Fail
1.4
Fail
—
1.2
Fail
5.0
AA
2.4
Fail
1.2
Fail
1.2
Fail
—
White BG
9.9AAA
4.7AA
2.4Fail
1.7Fail
2.0Fail
Black BG
2.1Fail
4.5AA Large
8.8AAA
12.7AAA
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

37374A
8F8E40
BEBE77
D7D791
C0C092

Deuteranopia

353349
9AA73E
C2C77A
D9DB95
C1C295

Tritanopia

2C4949
D43A39
D78082
E39EA1
C59C9E

Achromatopsia

3F3F3F
636363
A8A8A8
C7C7C7
B7B7B7

Shades & Tints Shades & Tints

#2A484A

Dark
Light

#DD2A47

Dark
Light

#DA9A6C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2a484a;
  --color-2: #dd2a47;
  --color-3: #da9a6c;
  --color-4: #e4c680;
  --color-5: #c6b985;
}

SCSS

$color-1: #2a484a;
$color-2: #dd2a47;
$color-3: #da9a6c;
$color-4: #e4c680;
$color-5: #c6b985;

TAILWIND

colors: {
  'brand-1': '#2a484a',
  'brand-2': '#dd2a47',
  'brand-3': '#da9a6c',
  'brand-4': '#e4c680',
  'brand-5': '#c6b985',
}

RGB Array

[42, 72, 74], [221, 42, 71], [218, 154, 108], [228, 198, 128], [198, 185, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2A484A, #DD2A47, #DA9A6C, #E4C680, #C6B985 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: #2a484a; --color-2: #dd2a47; --color-3: #da9a6c; --color-4: #e4c680; --color-5: #c6b985. 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