← Back to Editor

#FF745F · #858471 · #B8B58C · #D8FC74 · #7DE8DA

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FF745F

Peach Pink · Coral · Coral Red

HEX
#FF745F
RGB
rgb(255, 116, 95)
HSL
hsl(8, 100%, 69%)
HSB
hsb(8, 63%, 100%)
CMYK
cmyk(0%, 55%, 63%, 0%)
Oklch
oklch(72.1% 0.174 30.5)

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

#858471

Autumn Sage · Gray · Warm Gray

HEX
#858471
RGB
rgb(133, 132, 113)
HSL
hsl(57, 8%, 48%)
HSB
hsb(57, 15%, 52%)
CMYK
cmyk(0%, 1%, 15%, 48%)
Oklch
oklch(60.9% 0.028 104.7)

Traditional「Autumn Sage」· Paint「Warm Gray」· Creative Urban Concrete

#B8B58C

Fresh Green · Tan · Sunflower

HEX
#B8B58C
RGB
rgb(184, 181, 140)
HSL
hsl(56, 24%, 64%)
HSB
hsb(56, 24%, 72%)
CMYK
cmyk(0%, 2%, 24%, 28%)
Oklch
oklch(76.5% 0.056 104.1)

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

#D8FC74

Willow Green · Khaki · Apple Green

HEX
#D8FC74
RGB
rgb(216, 252, 116)
HSL
hsl(76, 96%, 72%)
HSB
hsb(76, 54%, 99%)
CMYK
cmyk(14%, 0%, 54%, 1%)
Oklch
oklch(93.8% 0.167 122.0)

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

#7DE8DA

Jade · SkyBlue · Lake Green

HEX
#7DE8DA
RGB
rgb(125, 232, 218)
HSL
hsl(172, 70%, 70%)
HSB
hsb(172, 46%, 91%)
CMYK
cmyk(46%, 0%, 6%, 9%)
Oklch
oklch(86.3% 0.102 184.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF745F
61EAFF

Analogous

FF619B
FF745F
FFC561

Triadic

FF745F
61FF76
7661FF

Split-Comp.

FF745F
61FFC5
619BFF

Tetradic

FF745F
9BFF61
61EAFF
C561FF

Contrast Matrix WCAG 2.1 Contrast

FF745F
858471
B8B58C
D8FC74
7DE8DA
—
1.4
Fail
1.3
Fail
2.3
Fail
1.8
Fail
1.4
Fail
—
1.8
Fail
3.3
AA Large
2.6
Fail
1.3
Fail
1.8
Fail
—
1.8
Fail
1.4
Fail
2.3
Fail
3.3
AA Large
1.8
Fail
—
1.3
Fail
1.8
Fail
2.6
Fail
1.4
Fail
1.3
Fail
—
White BG
2.7Fail
3.8AA Large
2.1Fail
1.2Fail
1.5Fail
Black BG
7.9AAA
5.5AA
10.0AAA
18.1AAA
14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C264
858576
B7B796
E8E895
ABACDD

Deuteranopia

CBD565
858577
B7B798
E6E39D
A59DDE

Tritanopia

F86869
85797A
B89E9F
DAAFB5
82E0E1

Achromatopsia

9B9B9B
828282
B1B1B1
E2E2E2
C6C6C6

Shades & Tints Shades & Tints

#FF745F

Dark
Light

#858471

Dark
Light

#B8B58C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff745f;
  --color-2: #858471;
  --color-3: #b8b58c;
  --color-4: #d8fc74;
  --color-5: #7de8da;
}

SCSS

$color-1: #ff745f;
$color-2: #858471;
$color-3: #b8b58c;
$color-4: #d8fc74;
$color-5: #7de8da;

TAILWIND

colors: {
  'brand-1': '#ff745f',
  'brand-2': '#858471',
  'brand-3': '#b8b58c',
  'brand-4': '#d8fc74',
  'brand-5': '#7de8da',
}

RGB Array

[255, 116, 95], [133, 132, 113], [184, 181, 140], [216, 252, 116], [125, 232, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF745F, #858471, #B8B58C, #D8FC74, #7DE8DA 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: #ff745f; --color-2: #858471; --color-3: #b8b58c; --color-4: #d8fc74; --color-5: #7de8da. 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