← Back to Editor

#AD1034 · #874547 · #617A59 · #AB7F3D · #F58321

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

#AD1034

Vermilion · FireBrick · Wine Red

HEX
#AD1034
RGB
rgb(173, 16, 52)
HSL
hsl(346, 83%, 37%)
HSB
hsb(346, 91%, 68%)
CMYK
cmyk(0%, 91%, 70%, 32%)
Oklch
oklch(48.0% 0.184 17.7)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#874547

Crimson · Sienna · Wine Red

HEX
#874547
RGB
rgb(135, 69, 71)
HSL
hsl(358, 32%, 40%)
HSB
hsb(358, 49%, 53%)
CMYK
cmyk(0%, 49%, 47%, 47%)
Oklch
oklch(47.3% 0.090 19.2)

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

#617A59

Celadon · DimGray · Olive Green

HEX
#617A59
RGB
rgb(97, 122, 89)
HSL
hsl(105, 16%, 41%)
HSB
hsb(105, 27%, 48%)
CMYK
cmyk(20%, 0%, 27%, 52%)
Oklch
oklch(55.0% 0.058 138.2)

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

#AB7F3D

Ochre · Sienna · Amber Brown

HEX
#AB7F3D
RGB
rgb(171, 127, 61)
HSL
hsl(36, 47%, 45%)
HSB
hsb(36, 64%, 67%)
CMYK
cmyk(0%, 26%, 64%, 33%)
Oklch
oklch(62.7% 0.099 75.2)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#F58321

Tangerine · GoldenRod · Warm Sun

HEX
#F58321
RGB
rgb(245, 131, 33)
HSL
hsl(28, 91%, 55%)
HSB
hsb(28, 87%, 96%)
CMYK
cmyk(0%, 47%, 87%, 4%)
Oklch
oklch(72.4% 0.170 54.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AD1034
10AD88

Analogous

AD1083
AD1034
AD3A10

Triadic

AD1034
35AD10
1035AD

Split-Comp.

AD1034
10AD3A
1083AD

Tetradic

AD1034
83AD10
10AD88
3A10AD

Contrast Matrix WCAG 2.1 Contrast

AD1034
874547
617A59
AB7F3D
F58321
—
1.0
Fail
1.5
Fail
2.0
Fail
2.8
Fail
1.0
Fail
—
1.5
Fail
2.0
Fail
2.7
Fail
1.5
Fail
1.5
Fail
—
1.3
Fail
1.8
Fail
2.0
Fail
2.0
Fail
1.3
Fail
—
1.4
Fail
2.8
Fail
2.7
Fail
1.8
Fail
1.4
Fail
—
White BG
7.2AAA
7.1AAA
4.7AA
3.6AA Large
2.6Fail
Black BG
2.9Fail
3.0Fail
4.4AA Large
5.8AA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

69682B
6A6A47
6C6C61
98984D
C4C339

Deuteranopia

727E29
6E7346
6A6963
9B9E51
CAD33E

Tritanopia

A52423
844646
626769
A95A5C
EF4B50

Achromatopsia

434343
595959
6F6F6F
858585
9A9A9A

Shades & Tints Shades & Tints

#AD1034

Dark
Light

#874547

Dark
Light

#617A59

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ad1034;
  --color-2: #874547;
  --color-3: #617a59;
  --color-4: #ab7f3d;
  --color-5: #f58321;
}

SCSS

$color-1: #ad1034;
$color-2: #874547;
$color-3: #617a59;
$color-4: #ab7f3d;
$color-5: #f58321;

TAILWIND

colors: {
  'brand-1': '#ad1034',
  'brand-2': '#874547',
  'brand-3': '#617a59',
  'brand-4': '#ab7f3d',
  'brand-5': '#f58321',
}

RGB Array

[173, 16, 52], [135, 69, 71], [97, 122, 89], [171, 127, 61], [245, 131, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #AD1034, #874547, #617A59, #AB7F3D, #F58321 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: #ad1034; --color-2: #874547; --color-3: #617a59; --color-4: #ab7f3d; --color-5: #f58321. 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