← Back to Editor

#D4526A · #C1C7AD · #AAC0B3 · #96C8BF · #657292

summer

A 5-color summer 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

#D4526A

Crimson · Tomato · Passion Red

HEX
#D4526A
RGB
rgb(212, 82, 106)
HSL
hsl(349, 60%, 58%)
HSB
hsb(349, 61%, 83%)
CMYK
cmyk(0%, 61%, 50%, 17%)
Oklch
oklch(61.6% 0.164 12.1)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#C1C7AD

Willow Green · Silver · Apple Green

HEX
#C1C7AD
RGB
rgb(193, 199, 173)
HSL
hsl(74, 19%, 73%)
HSB
hsb(74, 13%, 78%)
CMYK
cmyk(3%, 0%, 13%, 22%)
Oklch
oklch(81.8% 0.036 117.8)

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

#AAC0B3

Celadon · DarkGray · Apple Green

HEX
#AAC0B3
RGB
rgb(170, 192, 179)
HSL
hsl(145, 15%, 71%)
HSB
hsb(145, 11%, 75%)
CMYK
cmyk(11%, 0%, 7%, 25%)
Oklch
oklch(78.7% 0.030 159.7)

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

#96C8BF

Jade · LightSteelBlue · Lake Green

HEX
#96C8BF
RGB
rgb(150, 200, 191)
HSL
hsl(169, 31%, 69%)
HSB
hsb(169, 25%, 78%)
CMYK
cmyk(25%, 0%, 4%, 22%)
Oklch
oklch(79.5% 0.054 182.6)

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

#657292

Indigo · SlateGray · Navy Blue

HEX
#657292
RGB
rgb(101, 114, 146)
HSL
hsl(223, 18%, 48%)
HSB
hsb(223, 31%, 57%)
CMYK
cmyk(31%, 22%, 0%, 43%)
Oklch
oklch(55.4% 0.052 267.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4526A
54D4BD

Analogous

D454AB
D4526A
D47C54

Triadic

D4526A
6BD454
546BD4

Split-Comp.

D4526A
54D47C
54ABD4

Tetradic

D4526A
ABD454
54D4BD
7C54D4

Contrast Matrix WCAG 2.1 Contrast

D4526A
C1C7AD
AAC0B3
96C8BF
657292
—
2.3
Fail
2.1
Fail
2.2
Fail
1.2
Fail
2.3
Fail
—
1.1
Fail
1.1
Fail
2.8
Fail
2.1
Fail
1.1
Fail
—
1.0
Fail
2.5
Fail
2.2
Fail
1.1
Fail
1.0
Fail
—
2.6
Fail
1.2
Fail
2.8
Fail
2.5
Fail
2.6
Fail
—
White BG
4.0AA Large
1.7Fail
1.9Fail
1.9Fail
4.8AA
Black BG
5.2AA
12.0AAA
10.9AAA
11.3AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9B64
C4C4B3
B4B4B6
ACACC1
6B6B8A

Deuteranopia

A3AD63
C3C3B5
B2B1B7
A9A5C2
6A6988

Tritanopia

CD605F
C1B8B9
ABB9B9
99C3C3
668483

Achromatopsia

7C7C7C
C2C2C2
B8B8B8
B8B8B8
727272

Shades & Tints Shades & Tints

#D4526A

Dark
Light

#C1C7AD

Dark
Light

#AAC0B3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4526a;
  --color-2: #c1c7ad;
  --color-3: #aac0b3;
  --color-4: #96c8bf;
  --color-5: #657292;
}

SCSS

$color-1: #d4526a;
$color-2: #c1c7ad;
$color-3: #aac0b3;
$color-4: #96c8bf;
$color-5: #657292;

TAILWIND

colors: {
  'brand-1': '#d4526a',
  'brand-2': '#c1c7ad',
  'brand-3': '#aac0b3',
  'brand-4': '#96c8bf',
  'brand-5': '#657292',
}

RGB Array

[212, 82, 106], [193, 199, 173], [170, 192, 179], [150, 200, 191], [101, 114, 146]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #D4526A, #C1C7AD, #AAC0B3, #96C8BF, #657292 is ideal for: brand design, premium product pages, magazine layouts. 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: #d4526a; --color-2: #c1c7ad; --color-3: #aac0b3; --color-4: #96c8bf; --color-5: #657292. 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. 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