#F4E393 + #D4C37E + #98A378 + #628068 + #587A69 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F4E393

Goose Yellow · Khaki · Lemon Cream

HEX

#F4E393

RGB

rgb(244, 227, 147)

HSL

hsl(49, 82%, 77%)

HSB

hsb(49, 40%, 96%)

CMYK

cmyk(0%, 7%, 40%, 4%)

Oklch

oklch(91.2% 0.102 97.7)

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

#D4C37E

Ginger · BurlyWood · Sunflower

HEX

#D4C37E

RGB

rgb(212, 195, 126)

HSL

hsl(48, 50%, 66%)

HSB

hsb(48, 41%, 83%)

CMYK

cmyk(0%, 8%, 41%, 17%)

Oklch

oklch(81.6% 0.091 96.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#98A378

Grass Green · DarkSeaGreen · Olive Green

HEX

#98A378

RGB

rgb(152, 163, 120)

HSL

hsl(75, 19%, 55%)

HSB

hsb(75, 26%, 64%)

CMYK

cmyk(7%, 0%, 26%, 36%)

Oklch

oklch(69.5% 0.061 119.7)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#628068

Celadon · DimGray · Olive Green

HEX

#628068

RGB

rgb(98, 128, 104)

HSL

hsl(132, 13%, 44%)

HSB

hsb(132, 23%, 50%)

CMYK

cmyk(23%, 0%, 19%, 50%)

Oklch

oklch(56.9% 0.050 150.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#587A69

Mineral Blue · DimGray · Olive Green

HEX

#587A69

RGB

rgb(88, 122, 105)

HSL

hsl(150, 16%, 41%)

HSB

hsb(150, 28%, 48%)

CMYK

cmyk(28%, 0%, 14%, 52%)

Oklch

oklch(54.8% 0.047 162.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4E393

94A6F4

Analogous

F4B394

F4E393

D6F494

Triadic

F4E393

94F4E3

E394F4

Split-Comp.

F4E393

94D6F4

B394F4

Tetradic

F4E393

94F4B3

94A6F4

F494D6

Contrast Matrix WCAG 2.1 Contrast

F4E393	D4C37E	98A378	628068	587A69
—	1.4 Fail	2.1 Fail	3.4 AA Large	3.7 AA Large
1.4 Fail	—	1.5 Fail	2.5 Fail	2.7 Fail
2.1 Fail	1.5 Fail	—	1.6 Fail	1.8 Fail
3.4 AA Large	2.5 Fail	1.6 Fail	—	1.1 Fail
3.7 AA Large	2.7 Fail	1.8 Fail	1.1 Fail	—

White BG

1.3Fail

1.8Fail

2.7Fail

4.4AA Large

4.8AA

Black BG

16.3AAA

11.9AAA

7.8AAA

4.8AA

4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDECA6

CDCC8F

9D9D82

6F6F6E

67676D

Deuteranopia

EEEFAB

CECF93

9C9B85

6D6B6F

65626E

Tritanopia

F3B6B9

D39C9F

998B8C

647273

5A7071

Achromatopsia

DFDFDF

C0C0C0

9B9B9B

747474

6E6E6E

Shades & Tints Shades & Tints

#F4E393

Dark

Light

#D4C37E

Dark

Light

#98A378

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4e393;
  --color-2: #d4c37e;
  --color-3: #98a378;
  --color-4: #628068;
  --color-5: #587a69;
}

SCSS

$color-1: #f4e393;
$color-2: #d4c37e;
$color-3: #98a378;
$color-4: #628068;
$color-5: #587a69;

TAILWIND

colors: {
  'brand-1': '#f4e393',
  'brand-2': '#d4c37e',
  'brand-3': '#98a378',
  'brand-4': '#628068',
  'brand-5': '#587a69',
}

RGB Array

[244, 227, 147], [212, 195, 126], [152, 163, 120], [98, 128, 104], [88, 122, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4E393, #D4C37E, #98A378, #628068, #587A69 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: #f4e393; --color-2: #d4c37e; --color-3: #98a378; --color-4: #628068; --color-5: #587a69. 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