#F44645 + #F5B282 + #E0D09D + #B7BF86 + #86BF86 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F44645

Peach Pink · Tomato · Coral Red

HEX

#F44645

RGB

rgb(244, 70, 69)

HSL

hsl(0, 89%, 61%)

HSB

hsb(0, 72%, 96%)

CMYK

cmyk(0%, 71%, 72%, 4%)

Oklch

oklch(64.7% 0.211 25.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F5B282

Apricot · LightSalmon · Warm Sun

HEX

#F5B282

RGB

rgb(245, 178, 130)

HSL

hsl(25, 85%, 74%)

HSB

hsb(25, 47%, 96%)

CMYK

cmyk(0%, 27%, 47%, 4%)

Oklch

oklch(81.6% 0.101 56.4)

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

#E0D09D

Goose Yellow · Khaki · Sunflower

HEX

#E0D09D

RGB

rgb(224, 208, 157)

HSL

hsl(46, 52%, 75%)

HSB

hsb(46, 30%, 88%)

CMYK

cmyk(0%, 7%, 30%, 12%)

Oklch

oklch(85.8% 0.069 92.7)

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

#B7BF86

Fresh Green · Tan · Sunflower

HEX

#B7BF86

RGB

rgb(183, 191, 134)

HSL

hsl(68, 31%, 64%)

HSB

hsb(68, 30%, 75%)

CMYK

cmyk(4%, 0%, 30%, 25%)

Oklch

oklch(78.4% 0.077 114.7)

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

#86BF86

Celadon · DarkSeaGreen · Apple Green

HEX

#86BF86

RGB

rgb(134, 191, 134)

HSL

hsl(120, 31%, 64%)

HSB

hsb(120, 30%, 75%)

CMYK

cmyk(30%, 0%, 30%, 25%)

Oklch

oklch(75.0% 0.100 144.5)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F44645

43F4F4

Analogous

F4439C

F44645

F49C43

Triadic

F44645

43F443

4343F4

Split-Comp.

F44645

43F49C

439CF4

Tetradic

F44645

9CF443

43F4F4

9C43F4

Contrast Matrix WCAG 2.1 Contrast

F44645	F5B282	E0D09D	B7BF86	86BF86
—	2.0 Fail	2.4 Fail	1.9 Fail	1.7 Fail
2.0 Fail	—	1.2 Fail	1.1 Fail	1.2 Fail
2.4 Fail	1.2 Fail	—	1.3 Fail	1.4 Fail
1.9 Fail	1.1 Fail	1.3 Fail	—	1.1 Fail
1.7 Fail	1.2 Fail	1.4 Fail	1.1 Fail	—

White BG

3.6AA Large

1.8Fail

1.5Fail

1.9Fail

2.1Fail

Black BG

5.8AA

11.6AAA

13.7AAA

10.8AAA

9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A9A745

D8D78E

D9D9A9

BABB94

9F9F94

Deuteranopia

B3C045

DCE190

DADBAC

BAB997

9B9797

Tritanopia

EB4545

F29799

DFB3B5

B79FA1

899FA1

Achromatopsia

7A7A7A

C1C1C1

CFCFCF

B6B6B6

A7A7A7

Shades & Tints Shades & Tints

#F44645

Dark

Light

#F5B282

Dark

Light

#E0D09D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f44645;
  --color-2: #f5b282;
  --color-3: #e0d09d;
  --color-4: #b7bf86;
  --color-5: #86bf86;
}

SCSS

$color-1: #f44645;
$color-2: #f5b282;
$color-3: #e0d09d;
$color-4: #b7bf86;
$color-5: #86bf86;

TAILWIND

colors: {
  'brand-1': '#f44645',
  'brand-2': '#f5b282',
  'brand-3': '#e0d09d',
  'brand-4': '#b7bf86',
  'brand-5': '#86bf86',
}

RGB Array

[244, 70, 69], [245, 178, 130], [224, 208, 157], [183, 191, 134], [134, 191, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F44645, #F5B282, #E0D09D, #B7BF86, #86BF86 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: #f44645; --color-2: #f5b282; --color-3: #e0d09d; --color-4: #b7bf86; --color-5: #86bf86. 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