#F57051 + #CFA149 + #B2B483 + #B0CFA5 + #E7D89D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F57051

Peach Pink · Coral · Coral Red

HEX

#F57051

RGB

rgb(245, 112, 81)

HSL

hsl(11, 89%, 64%)

HSB

hsb(11, 67%, 96%)

CMYK

cmyk(0%, 54%, 67%, 4%)

Oklch

oklch(70.0% 0.170 34.5)

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

#CFA149

Ginger · GoldenRod · Warm Sun

HEX

#CFA149

RGB

rgb(207, 161, 73)

HSL

hsl(39, 58%, 55%)

HSB

hsb(39, 65%, 81%)

CMYK

cmyk(0%, 22%, 65%, 19%)

Oklch

oklch(73.5% 0.118 81.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#B2B483

Fresh Green · Tan · Sunflower

HEX

#B2B483

RGB

rgb(178, 180, 131)

HSL

hsl(62, 25%, 61%)

HSB

hsb(62, 27%, 71%)

CMYK

cmyk(1%, 0%, 27%, 29%)

Oklch

oklch(75.6% 0.066 109.8)

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

#B0CFA5

Celadon · Silver · Apple Green

HEX

#B0CFA5

RGB

rgb(176, 207, 165)

HSL

hsl(104, 30%, 73%)

HSB

hsb(104, 20%, 81%)

CMYK

cmyk(15%, 0%, 20%, 19%)

Oklch

oklch(82.1% 0.066 137.5)

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

#E7D89D

Goose Yellow · Khaki · Lemon Cream

HEX

#E7D89D

RGB

rgb(231, 216, 157)

HSL

hsl(48, 61%, 76%)

HSB

hsb(48, 32%, 91%)

CMYK

cmyk(0%, 6%, 32%, 9%)

Oklch

oklch(88.0% 0.078 95.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F57051

51D7F5

Analogous

F55185

F57051

F5C151

Triadic

F57051

51F56F

6F51F5

Split-Comp.

F57051

51F5C1

5185F5

Tetradic

F57051

85F551

51D7F5

C151F5

Contrast Matrix WCAG 2.1 Contrast

F57051	CFA149	B2B483	B0CFA5	E7D89D
—	1.2 Fail	1.3 Fail	1.7 Fail	2.0 Fail
1.2 Fail	—	1.1 Fail	1.4 Fail	1.7 Fail
1.3 Fail	1.1 Fail	—	1.3 Fail	1.5 Fail
1.7 Fail	1.4 Fail	1.3 Fail	—	1.2 Fail
2.0 Fail	1.7 Fail	1.5 Fail	1.2 Fail	—

White BG

2.9Fail

2.4Fail

2.2Fail

1.7Fail

1.4Fail

Black BG

7.3AAA

8.8AAA

9.7AAA

12.3AAA

14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBA59

BBBB5E

B3B38F

BDBEAF

E1E0AB

Deuteranopia

C3CD5A

BEC163

B3B392

BCB9B2

E1E3AF

Tritanopia

EE5E60

CD6F73

B2989A

B2B7B9

E6B7B9

Achromatopsia

949494

A5A5A5

AEAEAE

C1C1C1

D6D6D6

Shades & Tints Shades & Tints

#F57051

Dark

Light

#CFA149

Dark

Light

#B2B483

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f57051;
  --color-2: #cfa149;
  --color-3: #b2b483;
  --color-4: #b0cfa5;
  --color-5: #e7d89d;
}

SCSS

$color-1: #f57051;
$color-2: #cfa149;
$color-3: #b2b483;
$color-4: #b0cfa5;
$color-5: #e7d89d;

TAILWIND

colors: {
  'brand-1': '#f57051',
  'brand-2': '#cfa149',
  'brand-3': '#b2b483',
  'brand-4': '#b0cfa5',
  'brand-5': '#e7d89d',
}

RGB Array

[245, 112, 81], [207, 161, 73], [178, 180, 131], [176, 207, 165], [231, 216, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F57051, #CFA149, #B2B483, #B0CFA5, #E7D89D 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: #f57051; --color-2: #cfa149; --color-3: #b2b483; --color-4: #b0cfa5; --color-5: #e7d89d. 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