← Back to Editor

#A67755 · #B86D54 · #CA6354 · #DC5953 · #EE4F52

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

#A67755

Tangerine · Sienna · Amber Brown

HEX
#A67755
RGB
rgb(166, 119, 85)
HSL
hsl(25, 32%, 49%)
HSB
hsb(25, 49%, 65%)
CMYK
cmyk(0%, 28%, 49%, 35%)
Oklch
oklch(60.9% 0.076 56.6)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#B86D54

Tangerine · Sienna · Warm Sun

HEX
#B86D54
RGB
rgb(184, 109, 84)
HSL
hsl(15, 41%, 53%)
HSB
hsb(15, 54%, 72%)
CMYK
cmyk(0%, 41%, 54%, 28%)
Oklch
oklch(61.2% 0.103 39.2)

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

#CA6354

Crimson · Tomato · Passion Red

HEX
#CA6354
RGB
rgb(202, 99, 84)
HSL
hsl(8, 53%, 56%)
HSB
hsb(8, 58%, 79%)
CMYK
cmyk(0%, 51%, 58%, 21%)
Oklch
oklch(62.0% 0.134 29.9)

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

#DC5953

Vermilion · Tomato · Passion Red

HEX
#DC5953
RGB
rgb(220, 89, 83)
HSL
hsl(3, 66%, 59%)
HSB
hsb(3, 62%, 86%)
CMYK
cmyk(0%, 60%, 62%, 14%)
Oklch
oklch(63.2% 0.166 25.6)

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

#EE4F52

Peach Pink · Tomato · Coral Red

HEX
#EE4F52
RGB
rgb(238, 79, 82)
HSL
hsl(359, 82%, 62%)
HSB
hsb(359, 67%, 93%)
CMYK
cmyk(0%, 67%, 66%, 7%)
Oklch
oklch(64.8% 0.195 23.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A67755
5584A5

Analogous

A5555C
A67755
A59E55

Triadic

A67755
55A576
7655A5

Split-Comp.

A67755
55A59E
555CA5

Tetradic

A67755
5CA555
5584A5
9E55A5

Contrast Matrix WCAG 2.1 Contrast

A67755
B86D54
CA6354
DC5953
EE4F52
—
1.0
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
—
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.0
Fail
—
1.0
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.0
Fail
—
White BG
3.9AA Large
3.9AA Large
3.9AA Large
3.8AA Large
3.6AA Large
Black BG
5.4AA
5.4AA
5.4AA
5.6AA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

92915D
98975A
9D9C58
A3A254
A9A851

Deuteranopia

94985F
9CA15C
A3AB59
ABB555
B2BE51

Tritanopia

A46465
B45F60
C55A5B
D55656
E65151

Achromatopsia

818181
818181
808080
7F7F7F
7F7F7F

Shades & Tints Shades & Tints

#A67755

Dark
Light

#B86D54

Dark
Light

#CA6354

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a67755;
  --color-2: #b86d54;
  --color-3: #ca6354;
  --color-4: #dc5953;
  --color-5: #ee4f52;
}

SCSS

$color-1: #a67755;
$color-2: #b86d54;
$color-3: #ca6354;
$color-4: #dc5953;
$color-5: #ee4f52;

TAILWIND

colors: {
  'brand-1': '#a67755',
  'brand-2': '#b86d54',
  'brand-3': '#ca6354',
  'brand-4': '#dc5953',
  'brand-5': '#ee4f52',
}

RGB Array

[166, 119, 85], [184, 109, 84], [202, 99, 84], [220, 89, 83], [238, 79, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A67755, #B86D54, #CA6354, #DC5953, #EE4F52 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: #a67755; --color-2: #b86d54; --color-3: #ca6354; --color-4: #dc5953; --color-5: #ee4f52. 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