#74A286 + #A59677 + #FFAE92 + #F1C28E + #E3D491 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#74A286

Celadon · LightSlateGray · Olive Green

HEX

#74A286

RGB

rgb(116, 162, 134)

HSL

hsl(143, 20%, 55%)

HSB

hsb(143, 28%, 64%)

CMYK

cmyk(28%, 0%, 17%, 36%)

Oklch

oklch(67.1% 0.065 157.4)

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

#A59677

Ginger · Gray · Sunflower

HEX

#A59677

RGB

rgb(165, 150, 119)

HSL

hsl(40, 20%, 56%)

HSB

hsb(40, 28%, 65%)

CMYK

cmyk(0%, 9%, 28%, 35%)

Oklch

oklch(67.8% 0.047 85.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#FFAE92

Apricot · LightSalmon · Peach Orange

HEX

#FFAE92

RGB

rgb(255, 174, 146)

HSL

hsl(15, 100%, 79%)

HSB

hsb(15, 43%, 100%)

CMYK

cmyk(0%, 32%, 43%, 0%)

Oklch

oklch(82.2% 0.103 39.8)

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

#F1C28E

Goose Yellow · BurlyWood · Warm Sun

HEX

#F1C28E

RGB

rgb(241, 194, 142)

HSL

hsl(32, 78%, 75%)

HSB

hsb(32, 41%, 95%)

CMYK

cmyk(0%, 20%, 41%, 5%)

Oklch

oklch(84.4% 0.086 69.1)

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

#E3D491

Goose Yellow · Khaki · Sunflower

HEX

#E3D491

RGB

rgb(227, 212, 145)

HSL

hsl(49, 59%, 73%)

HSB

hsb(49, 36%, 89%)

CMYK

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

Oklch

oklch(86.7% 0.087 97.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

74A286

A37592

Analogous

7BA375

74A286

75A39E

Triadic

74A286

8775A3

A38775

Split-Comp.

74A286

9E75A3

A3757B

Tetradic

74A286

757BA3

A37592

A39E75

Contrast Matrix WCAG 2.1 Contrast

74A286	A59677	FFAE92	F1C28E	E3D491
—	1.0 Fail	1.6 Fail	1.8 Fail	1.9 Fail
1.0 Fail	—	1.6 Fail	1.8 Fail	1.9 Fail
1.6 Fail	1.6 Fail	—	1.1 Fail	1.2 Fail
1.8 Fail	1.8 Fail	1.1 Fail	—	1.1 Fail
1.9 Fail	1.9 Fail	1.2 Fail	1.1 Fail	—

White BG

2.9Fail

1.8Fail

1.6Fail

1.5Fail

Black BG

7.3AAA

7.2AAA

11.7AAA

12.8AAA

14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

88888D

9F9E7F

DCDB99

DDDC9B

DDDCA1

Deuteranopia

85828E

9FA180

E1E79A

DFE39E

DDDEA5

Tritanopia

769293

A48486

FB9E9F

EFA5A7

E2AEB1

Achromatopsia

919191

979797

C3C3C3

CACACA

D1D1D1

Shades & Tints Shades & Tints

#74A286

Dark

Light

#A59677

Dark

Light

#FFAE92

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #74a286;
  --color-2: #a59677;
  --color-3: #ffae92;
  --color-4: #f1c28e;
  --color-5: #e3d491;
}

SCSS

$color-1: #74a286;
$color-2: #a59677;
$color-3: #ffae92;
$color-4: #f1c28e;
$color-5: #e3d491;

TAILWIND

colors: {
  'brand-1': '#74a286',
  'brand-2': '#a59677',
  'brand-3': '#ffae92',
  'brand-4': '#f1c28e',
  'brand-5': '#e3d491',
}

RGB Array

[116, 162, 134], [165, 150, 119], [255, 174, 146], [241, 194, 142], [227, 212, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #74A286, #A59677, #FFAE92, #F1C28E, #E3D491 is ideal for: health products, baby brands, fresh-style blogs. 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: #74a286; --color-2: #a59677; --color-3: #ffae92; --color-4: #f1c28e; --color-5: #e3d491. 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. 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