#84AA9F + #F3E26C + #DA9A7E + #687849 + #E6DAAA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#84AA9F

Mineral Blue · DarkSeaGreen · Lake Green

HEX

#84AA9F

RGB

rgb(132, 170, 159)

HSL

hsl(163, 18%, 59%)

HSB

hsb(163, 22%, 67%)

CMYK

cmyk(22%, 0%, 6%, 33%)

Oklch

oklch(70.7% 0.044 175.4)

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

#F3E26C

Fresh Green · Khaki · Sunflower

HEX

#F3E26C

RGB

rgb(243, 226, 108)

HSL

hsl(52, 85%, 69%)

HSB

hsb(52, 56%, 95%)

CMYK

cmyk(0%, 7%, 56%, 5%)

Oklch

oklch(90.4% 0.140 101.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#DA9A7E

Apricot · DarkSalmon · Warm Sun

HEX

#DA9A7E

RGB

rgb(218, 154, 126)

HSL

hsl(18, 55%, 67%)

HSB

hsb(18, 42%, 85%)

CMYK

cmyk(0%, 29%, 42%, 15%)

Oklch

oklch(74.2% 0.087 44.5)

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

#687849

Grass Green · DarkOliveGreen · Forest Green

HEX

#687849

RGB

rgb(104, 120, 73)

HSL

hsl(80, 24%, 38%)

HSB

hsb(80, 39%, 47%)

CMYK

cmyk(13%, 0%, 39%, 53%)

Oklch

oklch(54.7% 0.071 124.0)

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

#E6DAAA

Goose Yellow · Wheat · Lemon Cream

HEX

#E6DAAA

RGB

rgb(230, 218, 170)

HSL

hsl(48, 55%, 78%)

HSB

hsb(48, 26%, 90%)

CMYK

cmyk(0%, 5%, 26%, 10%)

Oklch

oklch(88.6% 0.064 95.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

84AA9F

A9848E

Analogous

84A98C

84AA9F

84A1A9

Triadic

84AA9F

9F84A9

A99F84

Split-Comp.

84AA9F

A984A1

A98C84

Tetradic

84AA9F

8C84A9

A9848E

A1A984

Contrast Matrix WCAG 2.1 Contrast

84AA9F	F3E26C	DA9A7E	687849	E6DAAA
—	1.9 Fail	1.1 Fail	1.9 Fail	1.8 Fail
1.9 Fail	—	1.8 Fail	3.6 AA Large	1.1 Fail
1.1 Fail	1.8 Fail	—	2.0 Fail	1.7 Fail
1.9 Fail	3.6 AA Large	2.0 Fail	—	3.4 AA Large
1.8 Fail	1.1 Fail	1.7 Fail	3.4 AA Large	—

White BG

2.6Fail

1.3Fail

2.4Fail

4.8AA

1.4Fail

Black BG

8.2AAA

15.9AAA

8.9AAA

4.4AA Large

15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9495A2

ECEB89

BEBE85

6F6F54

E1E1B6

Deuteranopia

928FA2

EDEE8F

C2C786

6E6D57

E2E2B8

Tritanopia

86A4A4

F29FA4

D78A8B

695D5F

E5BFC1

Achromatopsia

9D9D9D

DADADA

AAAAAA

6E6E6E

D8D8D8

Shades & Tints Shades & Tints

#84AA9F

Dark

Light

#F3E26C

Dark

Light

#DA9A7E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #84aa9f;
  --color-2: #f3e26c;
  --color-3: #da9a7e;
  --color-4: #687849;
  --color-5: #e6daaa;
}

SCSS

$color-1: #84aa9f;
$color-2: #f3e26c;
$color-3: #da9a7e;
$color-4: #687849;
$color-5: #e6daaa;

TAILWIND

colors: {
  'brand-1': '#84aa9f',
  'brand-2': '#f3e26c',
  'brand-3': '#da9a7e',
  'brand-4': '#687849',
  'brand-5': '#e6daaa',
}

RGB Array

[132, 170, 159], [243, 226, 108], [218, 154, 126], [104, 120, 73], [230, 218, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #84AA9F, #F3E26C, #DA9A7E, #687849, #E6DAAA 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: #84aa9f; --color-2: #f3e26c; --color-3: #da9a7e; --color-4: #687849; --color-5: #e6daaa. 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