← Back to Editor

#FF7F00 · #EA8A2C · #AF7A46 · #7D6853 · #504B46

warm

A 5-color warm 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

#FF7F00

Ochre · Orange · Amber Brown

HEX
#FF7F00
RGB
rgb(255, 127, 0)
HSL
hsl(30, 100%, 50%)
HSB
hsb(30, 100%, 100%)
CMYK
cmyk(0%, 50%, 100%, 0%)
Oklch
oklch(73.0% 0.186 52.6)

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

#EA8A2C

Ginger · GoldenRod · Warm Sun

HEX
#EA8A2C
RGB
rgb(234, 138, 44)
HSL
hsl(30, 82%, 55%)
HSB
hsb(30, 81%, 92%)
CMYK
cmyk(0%, 41%, 81%, 8%)
Oklch
oklch(72.2% 0.154 59.5)

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

#AF7A46

Ochre · Sienna · Amber Brown

HEX
#AF7A46
RGB
rgb(175, 122, 70)
HSL
hsl(30, 43%, 48%)
HSB
hsb(30, 60%, 69%)
CMYK
cmyk(0%, 30%, 60%, 31%)
Oklch
oklch(62.2% 0.095 64.0)

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

#7D6853

Ochre · DimGray · Amber Brown

HEX
#7D6853
RGB
rgb(125, 104, 83)
HSL
hsl(30, 20%, 41%)
HSB
hsb(30, 34%, 49%)
CMYK
cmyk(0%, 17%, 34%, 51%)
Oklch
oklch(53.2% 0.041 66.7)

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

#504B46

Dark Cyan · DarkSlateGray · Charcoal

HEX
#504B46
RGB
rgb(80, 75, 70)
HSL
hsl(30, 7%, 29%)
HSB
hsb(30, 12%, 31%)
CMYK
cmyk(0%, 6%, 12%, 69%)
Oklch
oklch(41.6% 0.011 67.5)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF7F00
0080FF

Analogous

FF0000
FF7F00
FFFF00

Triadic

FF7F00
00FF80
8000FF

Split-Comp.

FF7F00
00FFFF
0000FF

Tetradic

FF7F00
00FF00
0080FF
FF00FF

Contrast Matrix WCAG 2.1 Contrast

FF7F00
EA8A2C
AF7A46
7D6853
504B46
—
1.0
Fail
1.5
Fail
2.1
Fail
3.4
AA Large
1.0
Fail
—
1.4
Fail
2.1
Fail
3.4
AA Large
1.5
Fail
1.4
Fail
—
1.4
Fail
2.3
Fail
2.1
Fail
2.1
Fail
1.4
Fail
—
1.6
Fail
3.4
AA Large
3.4
AA Large
2.3
Fail
1.6
Fail
—
White BG
2.5Fail
2.6Fail
3.7AA Large
5.3AA
8.6AAA
Black BG
8.3AAA
8.2AAA
5.7AA
4.0AA Large
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C61F
C0C043
989853
747458
4E4E47

Deuteranopia

CFD926
C6CD48
9B9F56
757759
4E4F48

Tritanopia

F9373C
E55559
AC5D5F
7C5C5D
504848

Achromatopsia

979797
9C9C9C
848484
6C6C6C
4C4C4C

Shades & Tints Shades & Tints

#FF7F00

Dark
Light

#EA8A2C

Dark
Light

#AF7A46

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff7f00;
  --color-2: #ea8a2c;
  --color-3: #af7a46;
  --color-4: #7d6853;
  --color-5: #504b46;
}

SCSS

$color-1: #ff7f00;
$color-2: #ea8a2c;
$color-3: #af7a46;
$color-4: #7d6853;
$color-5: #504b46;

TAILWIND

colors: {
  'brand-1': '#ff7f00',
  'brand-2': '#ea8a2c',
  'brand-3': '#af7a46',
  'brand-4': '#7d6853',
  'brand-5': '#504b46',
}

RGB Array

[255, 127, 0], [234, 138, 44], [175, 122, 70], [125, 104, 83], [80, 75, 70]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FF7F00, #EA8A2C, #AF7A46, #7D6853, #504B46 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: #ff7f00; --color-2: #ea8a2c; --color-3: #af7a46; --color-4: #7d6853; --color-5: #504b46. 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 warm-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