← Back to Editor

#F56607 · #D07437 · #AB8267 · #878072 · #6B6558

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

#F56607

Tangerine · OrangeRed · Amber Brown

HEX
#F56607
RGB
rgb(245, 102, 7)
HSL
hsl(24, 94%, 49%)
HSB
hsb(24, 97%, 96%)
CMYK
cmyk(0%, 58%, 97%, 4%)
Oklch
oklch(68.1% 0.194 44.5)

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

#D07437

Tangerine · Chocolate · Warm Sun

HEX
#D07437
RGB
rgb(208, 116, 55)
HSL
hsl(24, 62%, 52%)
HSB
hsb(24, 74%, 82%)
CMYK
cmyk(0%, 44%, 74%, 18%)
Oklch
oklch(65.1% 0.137 51.4)

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

#AB8267

Tangerine · Gray · Warm Sun

HEX
#AB8267
RGB
rgb(171, 130, 103)
HSL
hsl(24, 29%, 54%)
HSB
hsb(24, 40%, 67%)
CMYK
cmyk(0%, 24%, 40%, 33%)
Oklch
oklch(64.0% 0.064 54.6)

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

#878072

Ochre · Gray · Warm Gray

HEX
#878072
RGB
rgb(135, 128, 114)
HSL
hsl(40, 8%, 49%)
HSB
hsb(40, 16%, 53%)
CMYK
cmyk(0%, 5%, 16%, 47%)
Oklch
oklch(60.2% 0.022 84.6)

Traditional「Ochre」· Paint「Warm Gray」· Creative Urban Concrete

#6B6558

Ochre · DimGray · Honey Gold

HEX
#6B6558
RGB
rgb(107, 101, 88)
HSL
hsl(41, 10%, 38%)
HSB
hsb(41, 18%, 42%)
CMYK
cmyk(0%, 6%, 18%, 58%)
Oklch
oklch(50.8% 0.021 86.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F56607
0794F2

Analogous

F2071F
F56607
F2DB07

Triadic

F56607
07F265
6507F2

Split-Comp.

F56607
07F2DB
071FF2

Tetradic

F56607
1FF207
0794F2
DB07F2

Contrast Matrix WCAG 2.1 Contrast

F56607
D07437
AB8267
878072
6B6558
—
1.1
Fail
1.1
Fail
1.3
Fail
1.9
Fail
1.1
Fail
—
1.0
Fail
1.2
Fail
1.7
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
1.7
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.5
Fail
1.9
Fail
1.7
Fail
1.7
Fail
1.5
Fail
—
White BG
3.1AA Large
3.4AA Large
3.4AA Large
3.9AA Large
5.8AA
Black BG
6.8AA
6.2AA
6.1AA
5.4AA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B61E
A8A746
99996E
848475
68685B

Deuteranopia

BFCA24
AEB449
9C9F6F
848576
69695C

Tritanopia

EE3034
CB5154
A97374
877879
6B5E5E

Achromatopsia

868686
898989
8B8B8B
808080
656565

Shades & Tints Shades & Tints

#F56607

Dark
Light

#D07437

Dark
Light

#AB8267

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f56607;
  --color-2: #d07437;
  --color-3: #ab8267;
  --color-4: #878072;
  --color-5: #6b6558;
}

SCSS

$color-1: #f56607;
$color-2: #d07437;
$color-3: #ab8267;
$color-4: #878072;
$color-5: #6b6558;

TAILWIND

colors: {
  'brand-1': '#f56607',
  'brand-2': '#d07437',
  'brand-3': '#ab8267',
  'brand-4': '#878072',
  'brand-5': '#6b6558',
}

RGB Array

[245, 102, 7], [208, 116, 55], [171, 130, 103], [135, 128, 114], [107, 101, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F56607, #D07437, #AB8267, #878072, #6B6558 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: #f56607; --color-2: #d07437; --color-3: #ab8267; --color-4: #878072; --color-5: #6b6558. 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