← Back to Editor

#534F4D · #865A49 · #F8DDAE · #9FCCB3 · #78B4A1

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

#534F4D

Ink Gray · DarkSlateGray · Charcoal

HEX
#534F4D
RGB
rgb(83, 79, 77)
HSL
hsl(20, 4%, 31%)
HSB
hsb(20, 7%, 33%)
CMYK
cmyk(0%, 5%, 7%, 67%)
Oklch
oklch(43.1% 0.006 48.6)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#865A49

Tangerine · Sienna · Amber Brown

HEX
#865A49
RGB
rgb(134, 90, 73)
HSL
hsl(17, 29%, 41%)
HSB
hsb(17, 46%, 53%)
CMYK
cmyk(0%, 33%, 46%, 47%)
Oklch
oklch(51.1% 0.064 41.9)

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

#F8DDAE

Goose Yellow · Wheat · Peach Orange

HEX
#F8DDAE
RGB
rgb(248, 221, 174)
HSL
hsl(38, 84%, 83%)
HSB
hsb(38, 30%, 97%)
CMYK
cmyk(0%, 11%, 30%, 3%)
Oklch
oklch(90.8% 0.068 81.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#9FCCB3

Celadon · Silver · Apple Green

HEX
#9FCCB3
RGB
rgb(159, 204, 179)
HSL
hsl(147, 31%, 71%)
HSB
hsb(147, 22%, 80%)
CMYK
cmyk(22%, 0%, 12%, 20%)
Oklch
oklch(80.6% 0.059 160.4)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#78B4A1

Mineral Blue · DarkSeaGreen · Lake Green

HEX
#78B4A1
RGB
rgb(120, 180, 161)
HSL
hsl(161, 29%, 59%)
HSB
hsb(161, 33%, 71%)
CMYK
cmyk(33%, 0%, 11%, 29%)
Oklch
oklch(72.3% 0.068 172.4)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

534F4D
4C5052

Analogous

524C4D
534F4D
52514C

Triadic

534F4D
4C524E
4E4C52

Split-Comp.

534F4D
4C5251
4C4D52

Tetradic

534F4D
4D524C
4C5052
514C52

Contrast Matrix WCAG 2.1 Contrast

534F4D
865A49
F8DDAE
9FCCB3
78B4A1
—
1.4
Fail
6.1
AA
4.5
AA
3.4
AA Large
1.4
Fail
—
4.5
AA Large
3.3
AA Large
2.5
Fail
6.1
AA
4.5
AA Large
—
1.4
Fail
1.8
Fail
4.5
AA
3.3
AA Large
1.4
Fail
—
1.3
Fail
3.4
AA Large
2.5
Fail
1.8
Fail
1.3
Fail
—
White BG
8.1AAA
5.9AA
1.3Fail
1.8Fail
2.4Fail
Black BG
2.6Fail
3.6AA Large
15.9AAA
11.8AAA
8.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

51514D
73734D
ECECB9
B2B3B9
9293A6

Deuteranopia

52524E
76794E
EEF0BC
B0ADBB
8F8AA7

Tritanopia

534E4E
845051
F7C2C4
A1BEBF
7BA9AA

Achromatopsia

505050
656565
E0E0E0
BCBCBC
A0A0A0

Shades & Tints Shades & Tints

#534F4D

Dark
Light

#865A49

Dark
Light

#F8DDAE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #534f4d;
  --color-2: #865a49;
  --color-3: #f8ddae;
  --color-4: #9fccb3;
  --color-5: #78b4a1;
}

SCSS

$color-1: #534f4d;
$color-2: #865a49;
$color-3: #f8ddae;
$color-4: #9fccb3;
$color-5: #78b4a1;

TAILWIND

colors: {
  'brand-1': '#534f4d',
  'brand-2': '#865a49',
  'brand-3': '#f8ddae',
  'brand-4': '#9fccb3',
  'brand-5': '#78b4a1',
}

RGB Array

[83, 79, 77], [134, 90, 73], [248, 221, 174], [159, 204, 179], [120, 180, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #534F4D, #865A49, #F8DDAE, #9FCCB3, #78B4A1 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #534f4d; --color-2: #865a49; --color-3: #f8ddae; --color-4: #9fccb3; --color-5: #78b4a1. 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 general-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