← Back to Editor

#F9E09E · #D5BD91 · #A58382 · #8F6A7C · #685A7D

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 Library

Color Details Color Details

#F9E09E

Goose Yellow · Khaki · Lemon Cream

HEX
#F9E09E
RGB
rgb(249, 224, 158)
HSL
hsl(44, 88%, 80%)
HSB
hsb(44, 37%, 98%)
CMYK
cmyk(0%, 10%, 37%, 2%)
Oklch
oklch(91.2% 0.088 89.7)

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

#D5BD91

Ginger · Tan · Warm Sun

HEX
#D5BD91
RGB
rgb(213, 189, 145)
HSL
hsl(39, 45%, 70%)
HSB
hsb(39, 32%, 84%)
CMYK
cmyk(0%, 11%, 32%, 16%)
Oklch
oklch(80.8% 0.065 82.5)

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

#A58382

Crimson · Gray · Passion Red

HEX
#A58382
RGB
rgb(165, 131, 130)
HSL
hsl(2, 16%, 58%)
HSB
hsb(2, 21%, 65%)
CMYK
cmyk(0%, 21%, 21%, 35%)
Oklch
oklch(64.2% 0.042 20.3)

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

#8F6A7C

Dark Violet · Gray · Camellia

HEX
#8F6A7C
RGB
rgb(143, 106, 124)
HSL
hsl(331, 15%, 49%)
HSB
hsb(331, 26%, 56%)
CMYK
cmyk(0%, 26%, 13%, 44%)
Oklch
oklch(56.7% 0.053 348.2)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#685A7D

Deep Indigo · DimGray · Violet

HEX
#685A7D
RGB
rgb(104, 90, 125)
HSL
hsl(264, 16%, 42%)
HSB
hsb(264, 28%, 49%)
CMYK
cmyk(17%, 28%, 0%, 51%)
Oklch
oklch(49.5% 0.057 302.7)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9E09E
9FB7F9

Analogous

F9B49F
F9E09E
E4F99F

Triadic

F9E09E
9FF9E1
E19FF9

Split-Comp.

F9E09E
9FE4F9
B49FF9

Tetradic

F9E09E
9FF9B4
9FB7F9
F99FE4

Contrast Matrix WCAG 2.1 Contrast

F9E09E
D5BD91
A58382
8F6A7C
685A7D
—
1.4
Fail
2.6
Fail
3.6
AA Large
4.8
AA
1.4
Fail
—
1.9
Fail
2.5
Fail
3.4
AA Large
2.6
Fail
1.9
Fail
—
1.4
Fail
1.8
Fail
3.6
AA Large
2.5
Fail
1.4
Fail
—
1.4
Fail
4.8
AA
3.4
AA Large
1.8
Fail
1.4
Fail
—
White BG
1.3Fail
1.8Fail
3.4AA Large
4.6AA
6.3AA
Black BG
16.2AAA
11.5AAA
6.2AA
4.5AA
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEEAE
CBCA9C
969682
7F7F78
626275

Deuteranopia

F0F2B2
CCCE9E
989B82
818477
636473

Tritanopia

F8BBBD
D4A4A6
A38282
8D7473
676E6C

Achromatopsia

E0E0E0
BFBFBF
8D8D8D
777777
626262

Shades & Tints Shades & Tints

#F9E09E

Dark
Light

#D5BD91

Dark
Light

#A58382

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9e09e;
  --color-2: #d5bd91;
  --color-3: #a58382;
  --color-4: #8f6a7c;
  --color-5: #685a7d;
}

SCSS

$color-1: #f9e09e;
$color-2: #d5bd91;
$color-3: #a58382;
$color-4: #8f6a7c;
$color-5: #685a7d;

TAILWIND

colors: {
  'brand-1': '#f9e09e',
  'brand-2': '#d5bd91',
  'brand-3': '#a58382',
  'brand-4': '#8f6a7c',
  'brand-5': '#685a7d',
}

RGB Array

[249, 224, 158], [213, 189, 145], [165, 131, 130], [143, 106, 124], [104, 90, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9E09E, #D5BD91, #A58382, #8F6A7C, #685A7D 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: #f9e09e; --color-2: #d5bd91; --color-3: #a58382; --color-4: #8f6a7c; --color-5: #685a7d. 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