← Back to Editor

#91AA5F · #F4CD55 · #D45C49 · #B24351 · #791E3E

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

#91AA5F

Grass Green · DarkSeaGreen · Olive Green

HEX
#91AA5F
RGB
rgb(145, 170, 95)
HSL
hsl(80, 31%, 52%)
HSB
hsb(80, 44%, 67%)
CMYK
cmyk(15%, 0%, 44%, 33%)
Oklch
oklch(70.1% 0.105 124.1)

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

#F4CD55

Ginger · SandyBrown · Sunflower

HEX
#F4CD55
RGB
rgb(244, 205, 85)
HSL
hsl(45, 88%, 65%)
HSB
hsb(45, 65%, 96%)
CMYK
cmyk(0%, 16%, 65%, 4%)
Oklch
oklch(86.0% 0.143 91.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#D45C49

Vermilion · Tomato · Passion Red

HEX
#D45C49
RGB
rgb(212, 92, 73)
HSL
hsl(8, 62%, 56%)
HSB
hsb(8, 66%, 83%)
CMYK
cmyk(0%, 57%, 66%, 17%)
Oklch
oklch(62.2% 0.156 31.0)

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

#B24351

Crimson · Sienna · Passion Red

HEX
#B24351
RGB
rgb(178, 67, 81)
HSL
hsl(352, 45%, 48%)
HSB
hsb(352, 62%, 70%)
CMYK
cmyk(0%, 62%, 54%, 30%)
Oklch
oklch(53.8% 0.144 15.9)

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

#791E3E

Dark Violet · Brown · Camellia

HEX
#791E3E
RGB
rgb(121, 30, 62)
HSL
hsl(339, 60%, 30%)
HSB
hsb(339, 75%, 47%)
CMYK
cmyk(0%, 75%, 49%, 53%)
Oklch
oklch(39.3% 0.127 3.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

91AA5F
785FAB

Analogous

AB9E5F
91AA5F
6BAB5F

Triadic

91AA5F
5F91AB
AB5F91

Split-Comp.

91AA5F
5F6BAB
9E5FAB

Tetradic

91AA5F
5FAB9E
785FAB
AB5F6B

Contrast Matrix WCAG 2.1 Contrast

91AA5F
F4CD55
D45C49
B24351
791E3E
—
1.7
Fail
1.5
Fail
2.1
Fail
3.9
AA Large
1.7
Fail
—
2.5
Fail
3.6
AA Large
6.6
AA
1.5
Fail
2.5
Fail
—
1.4
Fail
2.6
Fail
2.1
Fail
3.6
AA Large
1.4
Fail
—
1.8
Fail
3.9
AA Large
6.6
AA
2.6
Fail
1.8
Fail
—
White BG
2.6Fail
1.5Fail
3.9AA Large
5.5AA
10.2AAA
Black BG
8.1AAA
13.7AAA
5.4AA
3.8AA Large
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9C71
E3E372
A09F4E
82814E
525136

Deuteranopia

9A9976
E5E879
A7B04F
88914D
575E34

Tritanopia

927F83
F2898E
CE5152
AC4B4A
74302F

Achromatopsia

9A9A9A
CBCBCB
7E7E7E
666666
3D3D3D

Shades & Tints Shades & Tints

#91AA5F

Dark
Light

#F4CD55

Dark
Light

#D45C49

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #91aa5f;
  --color-2: #f4cd55;
  --color-3: #d45c49;
  --color-4: #b24351;
  --color-5: #791e3e;
}

SCSS

$color-1: #91aa5f;
$color-2: #f4cd55;
$color-3: #d45c49;
$color-4: #b24351;
$color-5: #791e3e;

TAILWIND

colors: {
  'brand-1': '#91aa5f',
  'brand-2': '#f4cd55',
  'brand-3': '#d45c49',
  'brand-4': '#b24351',
  'brand-5': '#791e3e',
}

RGB Array

[145, 170, 95], [244, 205, 85], [212, 92, 73], [178, 67, 81], [121, 30, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #91AA5F, #F4CD55, #D45C49, #B24351, #791E3E 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: #91aa5f; --color-2: #f4cd55; --color-3: #d45c49; --color-4: #b24351; --color-5: #791e3e. 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