← Back to Editor

#272129 · #402B35 · #085441 · #449444 · #DDF0AA

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 LibraryData Visualization

Color Details Color Details

#272129

Dark Plum · DarkSlateGray · Dark Purple

HEX
#272129
RGB
rgb(39, 33, 41)
HSL
hsl(285, 11%, 15%)
HSB
hsb(285, 20%, 16%)
CMYK
cmyk(5%, 20%, 0%, 84%)
Oklch
oklch(25.8% 0.017 317.7)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#402B35

Dark Violet · DarkSlateGray · Raspberry

HEX
#402B35
RGB
rgb(64, 43, 53)
HSL
hsl(331, 20%, 21%)
HSB
hsb(331, 33%, 25%)
CMYK
cmyk(0%, 33%, 17%, 75%)
Oklch
oklch(31.8% 0.035 349.2)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#085441

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#085441
RGB
rgb(8, 84, 65)
HSL
hsl(165, 83%, 18%)
HSB
hsb(165, 90%, 33%)
CMYK
cmyk(90%, 0%, 23%, 67%)
Oklch
oklch(39.8% 0.076 170.2)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#449444

Celadon · SeaGreen · Olive Green

HEX
#449444
RGB
rgb(68, 148, 68)
HSL
hsl(120, 37%, 42%)
HSB
hsb(120, 54%, 58%)
CMYK
cmyk(54%, 0%, 54%, 42%)
Oklch
oklch(59.7% 0.140 143.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#DDF0AA

Willow Green · Wheat · Apple Green

HEX
#DDF0AA
RGB
rgb(221, 240, 170)
HSL
hsl(76, 70%, 80%)
HSB
hsb(76, 29%, 94%)
CMYK
cmyk(8%, 0%, 29%, 6%)
Oklch
oklch(92.4% 0.093 120.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

272129
242A22

Analogous

24222A
272129
2A2228

Triadic

272129
2A2822
222A28

Split-Comp.

272129
282A22
222A24

Tetradic

272129
2A2422
242A22
22282A

Contrast Matrix WCAG 2.1 Contrast

272129
402B35
085441
449444
DDF0AA
—
1.2
Fail
1.8
Fail
4.2
AA Large
12.8
AAA
1.2
Fail
—
1.5
Fail
3.4
AA Large
10.6
AAA
1.8
Fail
1.5
Fail
—
2.4
Fail
7.3
AAA
4.2
AA Large
3.4
AA Large
2.4
Fail
—
3.1
AA Large
12.8
AAA
10.6
AAA
7.3
AAA
3.1
AA Large
—
White BG
15.7AAA
13.0AAA
8.9AAA
3.8AA Large
1.2Fail
Black BG
1.3Fail
1.6Fail
2.4Fail
5.6AA
17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

242427
373733
292A46
676757
E5E5BB

Deuteranopia

252527
383A32
251F47
625C5C
E4E3BF

Tritanopia

272625
3F3130
0C494A
48676A
DEC8CB

Achromatopsia

242424
323232
3B3B3B
737373
E2E2E2

Shades & Tints Shades & Tints

#272129

Dark
Light

#402B35

Dark
Light

#085441

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #272129;
  --color-2: #402b35;
  --color-3: #085441;
  --color-4: #449444;
  --color-5: #ddf0aa;
}

SCSS

$color-1: #272129;
$color-2: #402b35;
$color-3: #085441;
$color-4: #449444;
$color-5: #ddf0aa;

TAILWIND

colors: {
  'brand-1': '#272129',
  'brand-2': '#402b35',
  'brand-3': '#085441',
  'brand-4': '#449444',
  'brand-5': '#ddf0aa',
}

RGB Array

[39, 33, 41], [64, 43, 53], [8, 84, 65], [68, 148, 68], [221, 240, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #272129, #402B35, #085441, #449444, #DDF0AA is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #272129; --color-2: #402b35; --color-3: #085441; --color-4: #449444; --color-5: #ddf0aa. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. High-contrast palettes naturally meet WCAG accessibility standards. 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