← Back to Editor

#BF8E8E · #E07E7E · #F57B25 · #E08824 · #BF8E8E

summer

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BF8E8E

Peach Pink · Tan · Coral Red

HEX
#BF8E8E
RGB
rgb(191, 142, 142)
HSL
hsl(0, 28%, 65%)
HSB
hsb(0, 26%, 75%)
CMYK
cmyk(0%, 26%, 26%, 25%)
Oklch
oklch(69.4% 0.060 18.7)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#E07E7E

Peach Pink · LightCoral · Coral Red

HEX
#E07E7E
RGB
rgb(224, 126, 126)
HSL
hsl(0, 61%, 69%)
HSB
hsb(0, 44%, 88%)
CMYK
cmyk(0%, 44%, 44%, 12%)
Oklch
oklch(70.0% 0.122 20.6)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#F57B25

Tangerine · Chocolate · Warm Sun

HEX
#F57B25
RGB
rgb(245, 123, 37)
HSL
hsl(25, 91%, 55%)
HSB
hsb(25, 85%, 96%)
CMYK
cmyk(0%, 50%, 85%, 4%)
Oklch
oklch(71.2% 0.174 50.0)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

#E08824

Ginger · GoldenRod · Warm Sun

HEX
#E08824
RGB
rgb(224, 136, 36)
HSL
hsl(32, 75%, 51%)
HSB
hsb(32, 84%, 88%)
CMYK
cmyk(0%, 39%, 84%, 12%)
Oklch
oklch(70.5% 0.150 62.9)

TraditionalGinger」· PaintWarm Sun」· Creative Blush Sunrise

#BF8E8E

Peach Pink · Tan · Coral Red

HEX
#BF8E8E
RGB
rgb(191, 142, 142)
HSL
hsl(0, 28%, 65%)
HSB
hsb(0, 26%, 75%)
CMYK
cmyk(0%, 26%, 26%, 25%)
Oklch
oklch(69.4% 0.060 18.7)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BF8E8E
8DBFBF

Analogous

BF8DA6
BF8E8E
BFA68D

Triadic

BF8E8E
8DBF8D
8D8DBF

Split-Comp.

BF8E8E
8DBFA6
8DA6BF

Tetradic

BF8E8E
A6BF8D
8DBFBF
A68DBF

Contrast Matrix WCAG 2.1 Contrast

BF8E8E
E07E7E
F57B25
E08824
BF8E8E
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.0
Fail
White BG
2.8Fail
2.8Fail
2.7Fail
2.7Fail
2.8Fail
Black BG
7.5AAA
7.5AAA
7.7AAA
7.7AAA
7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAA98E
B6B57E
C0BF3A
BAB93C
AAA98E

Deuteranopia

ADB08E
BBC37E
C7D03F
BFC642
ADB08E

Tritanopia

BD8E8E
DB7E7E
EF4A4E
DC4F54
BD8E8E

Achromatopsia

9D9D9D
9B9B9B
969696
979797
9D9D9D

Shades & Tints Shades & Tints

#BF8E8E

Dark
Light

#E07E7E

Dark
Light

#F57B25

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bf8e8e;
  --color-2: #e07e7e;
  --color-3: #f57b25;
  --color-4: #e08824;
  --color-5: #bf8e8e;
}

SCSS

$color-1: #bf8e8e;
$color-2: #e07e7e;
$color-3: #f57b25;
$color-4: #e08824;
$color-5: #bf8e8e;

TAILWIND

colors: {
  'brand-1': '#bf8e8e',
  'brand-2': '#e07e7e',
  'brand-3': '#f57b25',
  'brand-4': '#e08824',
  'brand-5': '#bf8e8e',
}

RGB Array

[191, 142, 142], [224, 126, 126], [245, 123, 37], [224, 136, 36], [191, 142, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #BF8E8E, #E07E7E, #F57B25, #E08824, #BF8E8E 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: #bf8e8e; --color-2: #e07e7e; --color-3: #f57b25; --color-4: #e08824; --color-5: #bf8e8e. 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 summer-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