#FFE7B2 + #78C3AC + #A1A185 + #AE6B63 + #F21950 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FFE7B2

Goose Yellow · Wheat · Lemon Cream

HEX

#FFE7B2

RGB

rgb(255, 231, 178)

HSL

hsl(41, 100%, 85%)

HSB

hsb(41, 30%, 100%)

CMYK

cmyk(0%, 9%, 30%, 0%)

Oklch

oklch(93.5% 0.073 86.4)

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

#78C3AC

Jade · MediumAquaMarine · Lake Green

HEX

#78C3AC

RGB

rgb(120, 195, 172)

HSL

hsl(162, 38%, 62%)

HSB

hsb(162, 38%, 76%)

CMYK

cmyk(38%, 0%, 12%, 24%)

Oklch

oklch(76.2% 0.082 172.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#A1A185

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#A1A185

RGB

rgb(161, 161, 133)

HSL

hsl(60, 13%, 58%)

HSB

hsb(60, 17%, 63%)

CMYK

cmyk(0%, 0%, 17%, 37%)

Oklch

oklch(70.1% 0.039 107.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#AE6B63

Crimson · Gray · Passion Red

HEX

#AE6B63

RGB

rgb(174, 107, 99)

HSL

hsl(6, 32%, 54%)

HSB

hsb(6, 43%, 68%)

CMYK

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

Oklch

oklch(59.9% 0.087 27.3)

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

#F21950

Vermilion · Crimson · Passion Red

HEX

#F21950

RGB

rgb(242, 25, 80)

HSL

hsl(345, 89%, 52%)

HSB

hsb(345, 90%, 95%)

CMYK

cmyk(0%, 90%, 67%, 5%)

Oklch

oklch(61.6% 0.238 16.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFE7B2

B3CBFF

Analogous

FFC1B3

FFE7B2

F1FFB3

Triadic

FFE7B2

B3FFE7

E7B3FF

Split-Comp.

FFE7B2

B3F1FF

C1B3FF

Tetradic

FFE7B2

B3FFC1

B3CBFF

FFB3F1

Contrast Matrix WCAG 2.1 Contrast

FFE7B2	78C3AC	A1A185	AE6B63	F21950
—	1.7 Fail	2.2 Fail	3.4 AA Large	3.4 AA Large
1.7 Fail	—	1.3 Fail	2.0 Fail	2.0 Fail
2.2 Fail	1.3 Fail	—	1.6 Fail	1.6 Fail
3.4 AA Large	2.0 Fail	1.6 Fail	—	1.0 Fail
3.4 AA Large	2.0 Fail	1.6 Fail	1.0 Fail	—

White BG

1.2Fail

2.1Fail

2.6Fail

4.1AA Large

4.2AA Large

Black BG

17.3AAA

10.2AAA

8.0AAA

5.1AA

5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F4BF

9899B2

A1A18C

919065

949243

Deuteranopia

F6F8C2

948FB3

A1A18D

959A65

A1B140

Tritanopia

FEC9CB

7CB6B7

A19192

AB6667

E73836

Achromatopsia

E8E8E8

AAAAAA

9E9E9E

7E7E7E

606060

Shades & Tints Shades & Tints

#FFE7B2

Dark

Light

#78C3AC

Dark

Light

#A1A185

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffe7b2;
  --color-2: #78c3ac;
  --color-3: #a1a185;
  --color-4: #ae6b63;
  --color-5: #f21950;
}

SCSS

$color-1: #ffe7b2;
$color-2: #78c3ac;
$color-3: #a1a185;
$color-4: #ae6b63;
$color-5: #f21950;

TAILWIND

colors: {
  'brand-1': '#ffe7b2',
  'brand-2': '#78c3ac',
  'brand-3': '#a1a185',
  'brand-4': '#ae6b63',
  'brand-5': '#f21950',
}

RGB Array

[255, 231, 178], [120, 195, 172], [161, 161, 133], [174, 107, 99], [242, 25, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFE7B2, #78C3AC, #A1A185, #AE6B63, #F21950 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: #ffe7b2; --color-2: #78c3ac; --color-3: #a1a185; --color-4: #ae6b63; --color-5: #f21950. 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