← Back to Editor

#EF7438 · #D77043 · #AB7C52 · #957371 · #447584

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 Library

Color Details Color Details

#EF7438

Tangerine · Tomato · Warm Sun

HEX
#EF7438
RGB
rgb(239, 116, 56)
HSL
hsl(20, 85%, 58%)
HSB
hsb(20, 77%, 94%)
CMYK
cmyk(0%, 51%, 77%, 6%)
Oklch
oklch(69.4% 0.168 44.3)

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

#D77043

Tangerine · Chocolate · Warm Sun

HEX
#D77043
RGB
rgb(215, 112, 67)
HSL
hsl(18, 65%, 55%)
HSB
hsb(18, 69%, 84%)
CMYK
cmyk(0%, 48%, 69%, 16%)
Oklch
oklch(65.6% 0.142 43.2)

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

#AB7C52

Tangerine · Sienna · Amber Brown

HEX
#AB7C52
RGB
rgb(171, 124, 82)
HSL
hsl(28, 35%, 50%)
HSB
hsb(28, 52%, 67%)
CMYK
cmyk(0%, 27%, 52%, 33%)
Oklch
oklch(62.4% 0.082 62.2)

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

#957371

Crimson · Gray · Passion Red

HEX
#957371
RGB
rgb(149, 115, 113)
HSL
hsl(3, 15%, 51%)
HSB
hsb(3, 24%, 58%)
CMYK
cmyk(0%, 23%, 24%, 42%)
Oklch
oklch(58.8% 0.043 22.4)

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

#447584

Slate Blue · SlateGray · Mint Ice

HEX
#447584
RGB
rgb(68, 117, 132)
HSL
hsl(194, 32%, 39%)
HSB
hsb(194, 48%, 52%)
CMYK
cmyk(48%, 11%, 0%, 48%)
Oklch
oklch(53.4% 0.058 219.6)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EF7438
39B2EF

Analogous

EF3957
EF7438
EFD139

Triadic

EF7438
39EF76
7639EF

Split-Comp.

EF7438
39EFD1
3957EF

Tetradic

EF7438
57EF39
39B2EF
D139EF

Contrast Matrix WCAG 2.1 Contrast

EF7438
D77043
AB7C52
957371
447584
—
1.1
Fail
1.3
Fail
1.5
Fail
1.8
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
1.5
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
1.8
Fail
1.5
Fail
1.4
Fail
1.2
Fail
—
White BG
2.9Fail
3.3AA Large
3.7AA Large
4.2AA Large
5.1AA
Black BG
7.2AAA
6.3AA
5.7AA
5.0AA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

BAB947
AAA94E
97965C
868671
595A80

Deuteranopia

C1CA4A
B0B851
999D5F
888B72
565380

Tritanopia

E95255
D25658
A96466
937272
467E7D

Achromatopsia

929292
8A8A8A
858585
7D7D7D
686868

Shades & Tints Shades & Tints

#EF7438

Dark
Light

#D77043

Dark
Light

#AB7C52

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ef7438;
  --color-2: #d77043;
  --color-3: #ab7c52;
  --color-4: #957371;
  --color-5: #447584;
}

SCSS

$color-1: #ef7438;
$color-2: #d77043;
$color-3: #ab7c52;
$color-4: #957371;
$color-5: #447584;

TAILWIND

colors: {
  'brand-1': '#ef7438',
  'brand-2': '#d77043',
  'brand-3': '#ab7c52',
  'brand-4': '#957371',
  'brand-5': '#447584',
}

RGB Array

[239, 116, 56], [215, 112, 67], [171, 124, 82], [149, 115, 113], [68, 117, 132]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EF7438, #D77043, #AB7C52, #957371, #447584 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: #ef7438; --color-2: #d77043; --color-3: #ab7c52; --color-4: #957371; --color-5: #447584. 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