← Back to Editor

#F5C787 · #D49D85 · #B88484 · #917679 · #61575C

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

#F5C787

Goose Yellow · BurlyWood · Warm Sun

HEX
#F5C787
RGB
rgb(245, 199, 135)
HSL
hsl(35, 85%, 75%)
HSB
hsb(35, 45%, 96%)
CMYK
cmyk(0%, 19%, 45%, 4%)
Oklch
oklch(85.6% 0.097 75.1)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#D49D85

Apricot · Tan · Warm Sun

HEX
#D49D85
RGB
rgb(212, 157, 133)
HSL
hsl(18, 48%, 68%)
HSB
hsb(18, 37%, 83%)
CMYK
cmyk(0%, 26%, 37%, 17%)
Oklch
oklch(74.2% 0.074 44.6)

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

#B88484

Peach Pink · DarkSalmon · Coral Red

HEX
#B88484
RGB
rgb(184, 132, 132)
HSL
hsl(0, 27%, 62%)
HSB
hsb(0, 28%, 72%)
CMYK
cmyk(0%, 28%, 28%, 28%)
Oklch
oklch(66.5% 0.064 18.9)

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

#917679

Crimson · Gray · Passion Red

HEX
#917679
RGB
rgb(145, 118, 121)
HSL
hsl(353, 11%, 52%)
HSB
hsb(353, 19%, 57%)
CMYK
cmyk(0%, 19%, 17%, 43%)
Oklch
oklch(59.2% 0.034 10.6)

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

#61575C

Ink Gray · DimGray · Charcoal

HEX
#61575C
RGB
rgb(97, 87, 92)
HSL
hsl(330, 5%, 36%)
HSB
hsb(330, 10%, 38%)
CMYK
cmyk(0%, 10%, 5%, 62%)
Oklch
oklch(46.8% 0.015 346.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5C787
89B6F5

Analogous

F59289
F5C787
ECF589

Triadic

F5C787
89F5C8
C889F5

Split-Comp.

F5C787
89ECF5
9289F5

Tetradic

F5C787
89F592
89B6F5
F589EC

Contrast Matrix WCAG 2.1 Contrast

F5C787
D49D85
B88484
917679
61575C
—
1.5
Fail
2.0
Fail
2.6
Fail
4.4
AA Large
1.5
Fail
—
1.3
Fail
1.8
Fail
3.0
Fail
2.0
Fail
1.3
Fail
—
1.3
Fail
2.2
Fail
2.6
Fail
1.8
Fail
1.3
Fail
—
1.7
Fail
4.4
AA Large
3.0
Fail
2.2
Fail
1.7
Fail
—
White BG
1.6Fail
2.3Fail
3.1AA Large
4.1AA Large
6.9AA
Black BG
13.4AAA
9.0AAA
6.7AA
5.1AA
3.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E196
BCBC8B
A1A184
858578
5D5D5B

Deuteranopia

E4E79A
BFC38C
A5A884
878978
5D5E5A

Tritanopia

F3A3A5
D18F90
B58484
907878
605A5A

Achromatopsia

CDCDCD
ABABAB
949494
7E7E7E
5B5B5B

Shades & Tints Shades & Tints

#F5C787

Dark
Light

#D49D85

Dark
Light

#B88484

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5c787;
  --color-2: #d49d85;
  --color-3: #b88484;
  --color-4: #917679;
  --color-5: #61575c;
}

SCSS

$color-1: #f5c787;
$color-2: #d49d85;
$color-3: #b88484;
$color-4: #917679;
$color-5: #61575c;

TAILWIND

colors: {
  'brand-1': '#f5c787',
  'brand-2': '#d49d85',
  'brand-3': '#b88484',
  'brand-4': '#917679',
  'brand-5': '#61575c',
}

RGB Array

[245, 199, 135], [212, 157, 133], [184, 132, 132], [145, 118, 121], [97, 87, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5C787, #D49D85, #B88484, #917679, #61575C 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: #f5c787; --color-2: #d49d85; --color-3: #b88484; --color-4: #917679; --color-5: #61575c. 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 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