← Back to Editor

#584131 · #AFA09D · #9BDBDA · #FCF5EF

A 4-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#584131

Tangerine · DarkOliveGreen · Amber Brown

HEX
#584131
RGB
rgb(88, 65, 49)
HSL
hsl(25, 28%, 27%)
HSB
hsb(25, 44%, 35%)
CMYK
cmyk(0%, 26%, 44%, 65%)
Oklch
oklch(39.6% 0.041 56.0)

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

#AFA09D

Peach Pink · DarkGray · Coral Red

HEX
#AFA09D
RGB
rgb(175, 160, 157)
HSL
hsl(10, 10%, 65%)
HSB
hsb(10, 10%, 69%)
CMYK
cmyk(0%, 9%, 10%, 31%)
Oklch
oklch(71.8% 0.018 31.1)

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

#9BDBDA

Jade · LightBlue · Lake Green

HEX
#9BDBDA
RGB
rgb(155, 219, 218)
HSL
hsl(179, 47%, 73%)
HSB
hsb(179, 29%, 86%)
CMYK
cmyk(29%, 0%, 0%, 14%)
Oklch
oklch(84.8% 0.065 194.8)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#FCF5EF

Apricot · SeaShell · Peach Orange

HEX
#FCF5EF
RGB
rgb(252, 245, 239)
HSL
hsl(28, 68%, 96%)
HSB
hsb(28, 5%, 99%)
CMYK
cmyk(0%, 3%, 5%, 1%)
Oklch
oklch(97.4% 0.011 63.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

584131
324858

Analogous

583235
584131
585532

Triadic

584131
325842
423258

Split-Comp.

584131
325855
323558

Tetradic

584131
355832
324858
553258

Contrast Matrix WCAG 2.1 Contrast

584131
AFA09D
9BDBDA
FCF5EF
—
3.8
AA Large
6.1
AA
8.8
AAA
3.8
AA Large
—
1.6
Fail
2.3
Fail
6.1
AA
1.6
Fail
—
1.4
Fail
8.8
AAA
2.3
Fail
1.4
Fail
—
White BG
9.5AAA
2.5Fail
1.6Fail
1.1Fail
Black BG
2.2Fail
8.3AAA
13.5AAA
19.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4E35
A9A89E
B7B7DA
F9F9F0

Deuteranopia

4F5136
A9AB9E
B3AEDA
F9FAF1

Tritanopia

573839
AE9E9E
9EDADA
FCF2F2

Achromatopsia

464646
A4A4A4
C8C8C8
F6F6F6

Shades & Tints Shades & Tints

#584131

Dark
Light

#AFA09D

Dark
Light

#9BDBDA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #584131;
  --color-2: #afa09d;
  --color-3: #9bdbda;
  --color-4: #fcf5ef;
}

SCSS

$color-1: #584131;
$color-2: #afa09d;
$color-3: #9bdbda;
$color-4: #fcf5ef;

TAILWIND

colors: {
  'brand-1': '#584131',
  'brand-2': '#afa09d',
  'brand-3': '#9bdbda',
  'brand-4': '#fcf5ef',
}

RGB Array

[88, 65, 49], [175, 160, 157], [155, 219, 218], [252, 245, 239]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #584131, #AFA09D, #9BDBDA, #FCF5EF is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #584131; --color-2: #afa09d; --color-3: #9bdbda; --color-4: #fcf5ef. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 4-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