← Back to Editor

#826E56 · #847862 · #969A7F · #B8B07F · #F0DA91

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

#826E56

Ochre · DimGray · Amber Brown

HEX
#826E56
RGB
rgb(130, 110, 86)
HSL
hsl(33, 20%, 42%)
HSB
hsb(33, 34%, 51%)
CMYK
cmyk(0%, 15%, 34%, 49%)
Oklch
oklch(55.1% 0.043 71.8)

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

#847862

Ochre · Gray · Amber Brown

HEX
#847862
RGB
rgb(132, 120, 98)
HSL
hsl(39, 15%, 45%)
HSB
hsb(39, 26%, 52%)
CMYK
cmyk(0%, 9%, 26%, 48%)
Oklch
oklch(57.7% 0.035 82.6)

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

#969A7F

Autumn Sage · Gray · Sunflower

HEX
#969A7F
RGB
rgb(150, 154, 127)
HSL
hsl(69, 12%, 55%)
HSB
hsb(69, 18%, 60%)
CMYK
cmyk(3%, 0%, 18%, 40%)
Oklch
oklch(67.5% 0.039 114.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#B8B07F

Fresh Green · Tan · Sunflower

HEX
#B8B07F
RGB
rgb(184, 176, 127)
HSL
hsl(52, 29%, 61%)
HSB
hsb(52, 31%, 72%)
CMYK
cmyk(0%, 4%, 31%, 28%)
Oklch
oklch(75.2% 0.067 100.0)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#F0DA91

Goose Yellow · Khaki · Sunflower

HEX
#F0DA91
RGB
rgb(240, 218, 145)
HSL
hsl(46, 76%, 75%)
HSB
hsb(46, 40%, 94%)
CMYK
cmyk(0%, 9%, 40%, 6%)
Oklch
oklch(89.0% 0.095 93.3)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

826E56
566981

Analogous

815856
826E56
7E8156

Triadic

826E56
56816D
6D5681

Split-Comp.

826E56
567E81
585681

Tetradic

826E56
568158
566981
81567E

Contrast Matrix WCAG 2.1 Contrast

826E56
847862
969A7F
B8B07F
F0DA91
—
1.1
Fail
1.7
Fail
2.2
Fail
3.5
AA Large
1.1
Fail
—
1.5
Fail
2.0
Fail
3.1
AA Large
1.7
Fail
1.5
Fail
—
1.3
Fail
2.1
Fail
2.2
Fail
2.0
Fail
1.3
Fail
—
1.6
Fail
3.5
AA Large
3.1
AA Large
2.1
Fail
1.6
Fail
—
White BG
4.9AA
4.3AA Large
2.9Fail
2.2Fail
1.4Fail
Black BG
4.3AA Large
4.8AA
7.2AAA
9.6AAA
15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

79795C
7F7F67
989886
B5B48B
E6E6A3

Deuteranopia

7B7C5D
808069
989787
B5B68E
E8E9A7

Tritanopia

816061
836C6C
968B8C
B89496
EFB1B4

Achromatopsia

717171
797979
969696
ADADAD
D8D8D8

Shades & Tints Shades & Tints

#826E56

Dark
Light

#847862

Dark
Light

#969A7F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #826e56;
  --color-2: #847862;
  --color-3: #969a7f;
  --color-4: #b8b07f;
  --color-5: #f0da91;
}

SCSS

$color-1: #826e56;
$color-2: #847862;
$color-3: #969a7f;
$color-4: #b8b07f;
$color-5: #f0da91;

TAILWIND

colors: {
  'brand-1': '#826e56',
  'brand-2': '#847862',
  'brand-3': '#969a7f',
  'brand-4': '#b8b07f',
  'brand-5': '#f0da91',
}

RGB Array

[130, 110, 86], [132, 120, 98], [150, 154, 127], [184, 176, 127], [240, 218, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #826E56, #847862, #969A7F, #B8B07F, #F0DA91 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: #826e56; --color-2: #847862; --color-3: #969a7f; --color-4: #b8b07f; --color-5: #f0da91. 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