← Back to Editor

#ECB494 · #C4AE97 · #9BA995 · #8C9AA8 · #A49FA6

summer

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ECB494

Apricot · BurlyWood · Warm Sun

HEX
#ECB494
RGB
rgb(236, 180, 148)
HSL
hsl(22, 70%, 75%)
HSB
hsb(22, 37%, 93%)
CMYK
cmyk(0%, 24%, 37%, 7%)
Oklch
oklch(81.3% 0.079 51.0)

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

#C4AE97

Ginger · Tan · Warm Sun

HEX
#C4AE97
RGB
rgb(196, 174, 151)
HSL
hsl(31, 28%, 68%)
HSB
hsb(31, 23%, 77%)
CMYK
cmyk(0%, 11%, 23%, 23%)
Oklch
oklch(76.4% 0.041 68.4)

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

#9BA995

Celadon · DarkSeaGreen · Apple Green

HEX
#9BA995
RGB
rgb(155, 169, 149)
HSL
hsl(102, 10%, 62%)
HSB
hsb(102, 12%, 66%)
CMYK
cmyk(8%, 0%, 12%, 34%)
Oklch
oklch(71.8% 0.032 136.2)

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

#8C9AA8

Azure · LightSlateGray · Navy Blue

HEX
#8C9AA8
RGB
rgb(140, 154, 168)
HSL
hsl(210, 14%, 60%)
HSB
hsb(210, 17%, 66%)
CMYK
cmyk(17%, 8%, 0%, 34%)
Oklch
oklch(68.0% 0.026 248.2)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#A49FA6

Ash · DarkGray · Silver Sand

HEX
#A49FA6
RGB
rgb(164, 159, 166)
HSL
hsl(283, 4%, 64%)
HSB
hsb(283, 4%, 65%)
CMYK
cmyk(1%, 4%, 0%, 35%)
Oklch
oklch(70.9% 0.012 316.5)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECB494
93CBEC

Analogous

EC939F
ECB494
ECE093

Triadic

ECB494
93ECB3
B393EC

Split-Comp.

ECB494
93ECE0
939FEC

Tetradic

ECB494
9FEC93
93CBEC
E093EC

Contrast Matrix WCAG 2.1 Contrast

ECB494
C4AE97
9BA995
8C9AA8
A49FA6
—
1.2
Fail
1.4
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.2
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.1
Fail
1.6
Fail
1.3
Fail
1.2
Fail
—
1.1
Fail
1.4
Fail
1.2
Fail
1.1
Fail
1.1
Fail
—
White BG
1.8Fail
2.1Fail
2.5Fail
2.9Fail
2.6Fail
Black BG
11.5AAA
9.8AAA
8.5AAA
7.3AAA
8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D39C
BABA9D
A1A19A
9292A5
A2A2A4

Deuteranopia

D7DB9E
BCBD9E
A09F9B
9190A4
A2A3A4

Tritanopia

E9A2A3
C3A1A2
9C9E9F
8DA2A1
A4A3A3

Achromatopsia

C1C1C1
B2B2B2
A3A3A3
979797
A1A1A1

Shades & Tints Shades & Tints

#ECB494

Dark
Light

#C4AE97

Dark
Light

#9BA995

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecb494;
  --color-2: #c4ae97;
  --color-3: #9ba995;
  --color-4: #8c9aa8;
  --color-5: #a49fa6;
}

SCSS

$color-1: #ecb494;
$color-2: #c4ae97;
$color-3: #9ba995;
$color-4: #8c9aa8;
$color-5: #a49fa6;

TAILWIND

colors: {
  'brand-1': '#ecb494',
  'brand-2': '#c4ae97',
  'brand-3': '#9ba995',
  'brand-4': '#8c9aa8',
  'brand-5': '#a49fa6',
}

RGB Array

[236, 180, 148], [196, 174, 151], [155, 169, 149], [140, 154, 168], [164, 159, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #ECB494, #C4AE97, #9BA995, #8C9AA8, #A49FA6 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ecb494; --color-2: #c4ae97; --color-3: #9ba995; --color-4: #8c9aa8; --color-5: #a49fa6. 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 summer-style 5-color scheme is especially suited for beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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