← Back to Editor

#796763 · #D36362 · #FF7461 · #FFA45E · #9C8D8A

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

#796763

Crimson · DimGray · Passion Red

HEX
#796763
RGB
rgb(121, 103, 99)
HSL
hsl(11, 10%, 43%)
HSB
hsb(11, 18%, 47%)
CMYK
cmyk(0%, 15%, 18%, 53%)
Oklch
oklch(53.0% 0.024 32.6)

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

#D36362

Peach Pink · LightCoral · Coral Red

HEX
#D36362
RGB
rgb(211, 99, 98)
HSL
hsl(1, 56%, 61%)
HSB
hsb(1, 54%, 83%)
CMYK
cmyk(0%, 53%, 54%, 17%)
Oklch
oklch(63.5% 0.142 22.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FF7461

Peach Pink · Coral · Coral Red

HEX
#FF7461
RGB
rgb(255, 116, 97)
HSL
hsl(7, 100%, 69%)
HSB
hsb(7, 62%, 100%)
CMYK
cmyk(0%, 55%, 62%, 0%)
Oklch
oklch(72.2% 0.173 29.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FFA45E

Apricot · SandyBrown · Warm Sun

HEX
#FFA45E
RGB
rgb(255, 164, 94)
HSL
hsl(26, 100%, 68%)
HSB
hsb(26, 63%, 100%)
CMYK
cmyk(0%, 36%, 63%, 0%)
Oklch
oklch(79.6% 0.138 56.6)

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

#9C8D8A

Crimson · Gray · Silver Sand

HEX
#9C8D8A
RGB
rgb(156, 141, 138)
HSL
hsl(10, 8%, 58%)
HSB
hsb(10, 12%, 61%)
CMYK
cmyk(0%, 10%, 12%, 39%)
Oklch
oklch(65.6% 0.019 31.1)

Traditional「Crimson」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

796763
637579

Analogous

79636A
796763
797263

Triadic

796763
637967
676379

Split-Comp.

796763
637972
636A79

Tetradic

796763
6A7963
637579
726379

Contrast Matrix WCAG 2.1 Contrast

796763
D36362
FF7461
FFA45E
9C8D8A
—
1.5
Fail
2.0
Fail
2.7
Fail
1.7
Fail
1.5
Fail
—
1.4
Fail
1.9
Fail
1.2
Fail
2.0
Fail
1.4
Fail
—
1.4
Fail
1.2
Fail
2.7
Fail
1.9
Fail
1.4
Fail
—
1.6
Fail
1.7
Fail
1.2
Fail
1.2
Fail
1.6
Fail
—
White BG
5.3AA
3.7AA Large
2.7Fail
2.0Fail
3.2AA Large
Black BG
3.9AA Large
5.7AA
7.9AAA
10.7AAA
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

717164
A3A162
C3C266
D8D76F
96958B

Deuteranopia

727464
A9B162
CBD567
DDE473
96988B

Tritanopia

786565
CD6262
F8696A
FA7C7F
9B8B8B

Achromatopsia

6C6C6C
848484
9B9B9B
B7B7B7
919191

Shades & Tints Shades & Tints

#796763

Dark
Light

#D36362

Dark
Light

#FF7461

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #796763;
  --color-2: #d36362;
  --color-3: #ff7461;
  --color-4: #ffa45e;
  --color-5: #9c8d8a;
}

SCSS

$color-1: #796763;
$color-2: #d36362;
$color-3: #ff7461;
$color-4: #ffa45e;
$color-5: #9c8d8a;

TAILWIND

colors: {
  'brand-1': '#796763',
  'brand-2': '#d36362',
  'brand-3': '#ff7461',
  'brand-4': '#ffa45e',
  'brand-5': '#9c8d8a',
}

RGB Array

[121, 103, 99], [211, 99, 98], [255, 116, 97], [255, 164, 94], [156, 141, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #796763, #D36362, #FF7461, #FFA45E, #9C8D8A 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: #796763; --color-2: #d36362; --color-3: #ff7461; --color-4: #ffa45e; --color-5: #9c8d8a. 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