← Back to Editor

#FF6D60 · #ED9E5C · #B39984 · #827468 · #695444

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

#FF6D60

Peach Pink · Coral · Coral Red

HEX
#FF6D60
RGB
rgb(255, 109, 96)
HSL
hsl(5, 100%, 69%)
HSB
hsb(5, 62%, 100%)
CMYK
cmyk(0%, 57%, 62%, 0%)
Oklch
oklch(71.2% 0.181 27.6)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#ED9E5C

Apricot · SandyBrown · Warm Sun

HEX
#ED9E5C
RGB
rgb(237, 158, 92)
HSL
hsl(27, 80%, 65%)
HSB
hsb(27, 61%, 93%)
CMYK
cmyk(0%, 33%, 61%, 7%)
Oklch
oklch(76.5% 0.125 59.2)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#B39984

Apricot · DarkGray · Warm Sun

HEX
#B39984
RGB
rgb(179, 153, 132)
HSL
hsl(27, 24%, 61%)
HSB
hsb(27, 26%, 70%)
CMYK
cmyk(0%, 15%, 26%, 30%)
Oklch
oklch(70.1% 0.043 61.0)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#827468

Tangerine · Gray · Amber Brown

HEX
#827468
RGB
rgb(130, 116, 104)
HSL
hsl(28, 11%, 46%)
HSB
hsb(28, 20%, 51%)
CMYK
cmyk(0%, 11%, 20%, 49%)
Oklch
oklch(56.8% 0.025 62.9)

TraditionalTangerine」· PaintAmber Brown」· Creative Blush Sunrise

#695444

Tangerine · DarkOliveGreen · Amber Brown

HEX
#695444
RGB
rgb(105, 84, 68)
HSL
hsl(26, 21%, 34%)
HSB
hsb(26, 35%, 41%)
CMYK
cmyk(0%, 20%, 35%, 59%)
Oklch
oklch(46.3% 0.037 59.0)

TraditionalTangerine」· PaintAmber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF6D60
61F2FF

Analogous

FF61A3
FF6D60
FFBD61

Triadic

FF6D60
61FF6E
6E61FF

Split-Comp.

FF6D60
61FFBD
61A3FF

Tetradic

FF6D60
A3FF61
61F2FF
BD61FF

Contrast Matrix WCAG 2.1 Contrast

FF6D60
ED9E5C
B39984
827468
695444
1.3
Fail
1.0
Fail
1.6
Fail
2.6
Fail
1.3
Fail
1.2
Fail
2.1
Fail
3.3
AA Large
1.0
Fail
1.2
Fail
1.7
Fail
2.6
Fail
1.6
Fail
2.1
Fail
1.7
Fail
1.6
Fail
2.6
Fail
3.3
AA Large
2.6
Fail
1.6
Fail
White BG
2.8Fail
2.2Fail
2.7Fail
4.5AA
7.1AAA
Black BG
7.6AAA
9.6AAA
7.8AAA
4.6AA
3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0BE63
CBCA6C
A8A889
7C7C6B
606048

Deuteranopia

C8D364
CFD570
A9AB8A
7D7E6C
616349

Tritanopia

F86666
E9797B
B28D8E
816D6E
684B4C

Achromatopsia

979797
AEAEAE
9E9E9E
777777
585858

Shades & Tints Shades & Tints

#FF6D60

Dark
Light

#ED9E5C

Dark
Light

#B39984

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff6d60;
  --color-2: #ed9e5c;
  --color-3: #b39984;
  --color-4: #827468;
  --color-5: #695444;
}

SCSS

$color-1: #ff6d60;
$color-2: #ed9e5c;
$color-3: #b39984;
$color-4: #827468;
$color-5: #695444;

TAILWIND

colors: {
  'brand-1': '#ff6d60',
  'brand-2': '#ed9e5c',
  'brand-3': '#b39984',
  'brand-4': '#827468',
  'brand-5': '#695444',
}

RGB Array

[255, 109, 96], [237, 158, 92], [179, 153, 132], [130, 116, 104], [105, 84, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #FF6D60, #ED9E5C, #B39984, #827468, #695444 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: #ff6d60; --color-2: #ed9e5c; --color-3: #b39984; --color-4: #827468; --color-5: #695444. 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