← Back to Editor

#5D5646 · #847A5F · #CBCAAC · #F4F2F4 · #B5D9DD

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#5D5646

Ochre · DarkOliveGreen · Honey Gold

HEX
#5D5646
RGB
rgb(93, 86, 70)
HSL
hsl(42, 14%, 32%)
HSB
hsb(42, 25%, 36%)
CMYK
cmyk(0%, 8%, 25%, 64%)
Oklch
oklch(45.5% 0.027 87.2)

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

#847A5F

Ochre · DimGray · Honey Gold

HEX
#847A5F
RGB
rgb(132, 122, 95)
HSL
hsl(44, 16%, 45%)
HSB
hsb(44, 28%, 52%)
CMYK
cmyk(0%, 8%, 28%, 48%)
Oklch
oklch(58.1% 0.041 90.1)

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

#CBCAAC

Fresh Green · Silver · Sunflower

HEX
#CBCAAC
RGB
rgb(203, 202, 172)
HSL
hsl(58, 23%, 74%)
HSB
hsb(58, 15%, 80%)
CMYK
cmyk(0%, 0%, 15%, 20%)
Oklch
oklch(83.2% 0.041 105.7)

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

#F4F2F4

Mauve · SeaShell · Cloud White

HEX
#F4F2F4
RGB
rgb(244, 242, 244)
HSL
hsl(300, 8%, 95%)
HSB
hsb(300, 1%, 96%)
CMYK
cmyk(0%, 1%, 0%, 4%)
Oklch
oklch(96.3% 0.003 325.6)

Traditional「Mauve」· Paint「Cloud White」· Creative Morning Mist

#B5D9DD

Sky Blue · LightBlue · Glacier Blue

HEX
#B5D9DD
RGB
rgb(181, 217, 221)
HSL
hsl(186, 37%, 79%)
HSB
hsb(186, 18%, 87%)
CMYK
cmyk(18%, 2%, 0%, 13%)
Oklch
oklch(86.1% 0.038 204.7)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5D5646
464D5D

Analogous

5D4B46
5D5646
585D46

Triadic

5D5646
465D56
56465D

Split-Comp.

5D5646
46585D
4B465D

Tetradic

5D5646
465D4B
464D5D
5D4658

Contrast Matrix WCAG 2.1 Contrast

5D5646
847A5F
CBCAAC
F4F2F4
B5D9DD
—
1.7
Fail
4.4
AA Large
6.5
AA
4.8
AA
1.7
Fail
—
2.6
Fail
3.8
AA Large
2.8
Fail
4.4
AA Large
2.6
Fail
—
1.5
Fail
1.1
Fail
6.5
AA
3.8
AA Large
1.5
Fail
—
1.4
Fail
4.8
AA
2.8
Fail
1.1
Fail
1.4
Fail
—
White BG
7.3AAA
4.3AA Large
1.7Fail
1.1Fail
1.5Fail
Black BG
2.9Fail
4.9AA
12.6AAA
18.9AAA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5A5A4A
808066
CBCBB3
F3F3F4
C5C5DC

Deuteranopia

5A5B4B
808167
CBCBB5
F3F3F3
C3C0DC

Tritanopia

5D4D4E
846B6C
CBB9BA
F4F3F3
B7DBDB

Achromatopsia

565656
7A7A7A
C7C7C7
F3F3F3
CFCFCF

Shades & Tints Shades & Tints

#5D5646

Dark
Light

#847A5F

Dark
Light

#CBCAAC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5d5646;
  --color-2: #847a5f;
  --color-3: #cbcaac;
  --color-4: #f4f2f4;
  --color-5: #b5d9dd;
}

SCSS

$color-1: #5d5646;
$color-2: #847a5f;
$color-3: #cbcaac;
$color-4: #f4f2f4;
$color-5: #b5d9dd;

TAILWIND

colors: {
  'brand-1': '#5d5646',
  'brand-2': '#847a5f',
  'brand-3': '#cbcaac',
  'brand-4': '#f4f2f4',
  'brand-5': '#b5d9dd',
}

RGB Array

[93, 86, 70], [132, 122, 95], [203, 202, 172], [244, 242, 244], [181, 217, 221]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #5D5646, #847A5F, #CBCAAC, #F4F2F4, #B5D9DD is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #5d5646; --color-2: #847a5f; --color-3: #cbcaac; --color-4: #f4f2f4; --color-5: #b5d9dd. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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