← Back to Editor

#FFB827 · #BFB723 · #7FB33C · #24A359 · #18C46E

summer

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#FFB827

Ginger · GoldenRod · Sunflower

HEX
#FFB827
RGB
rgb(255, 184, 39)
HSL
hsl(40, 100%, 58%)
HSB
hsb(40, 85%, 100%)
CMYK
cmyk(0%, 28%, 85%, 0%)
Oklch
oklch(82.8% 0.163 78.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#BFB723

Autumn Sage · GoldenRod · Honey Gold

HEX
#BFB723
RGB
rgb(191, 183, 35)
HSL
hsl(57, 69%, 44%)
HSB
hsb(57, 82%, 75%)
CMYK
cmyk(0%, 4%, 82%, 25%)
Oklch
oklch(76.2% 0.154 106.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#7FB33C

Grass Green · Olive · Olive Green

HEX
#7FB33C
RGB
rgb(127, 179, 60)
HSL
hsl(86, 50%, 47%)
HSB
hsb(86, 66%, 70%)
CMYK
cmyk(29%, 0%, 66%, 30%)
Oklch
oklch(70.6% 0.158 129.9)

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

#24A359

Pine Green · SeaGreen · Forest Green

HEX
#24A359
RGB
rgb(36, 163, 89)
HSL
hsl(145, 64%, 39%)
HSB
hsb(145, 78%, 64%)
CMYK
cmyk(78%, 0%, 45%, 36%)
Oklch
oklch(63.2% 0.153 152.2)

Traditional「Pine Green」· Paint「Forest Green」· Creative Blush Sunrise

#18C46E

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#18C46E
RGB
rgb(24, 196, 110)
HSL
hsl(150, 78%, 43%)
HSB
hsb(150, 88%, 77%)
CMYK
cmyk(88%, 0%, 44%, 23%)
Oklch
oklch(72.2% 0.178 153.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFB827
2970FF

Analogous

FF4D29
FFB827
DBFF29

Triadic

FFB827
29FFB8
B829FF

Split-Comp.

FFB827
29DBFF
4D29FF

Tetradic

FFB827
29FF4C
2970FF
FF29DB

Contrast Matrix WCAG 2.1 Contrast

FFB827
BFB723
7FB33C
24A359
18C46E
—
1.2
Fail
1.4
Fail
1.9
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
1.6
Fail
1.1
Fail
1.4
Fail
1.2
Fail
—
1.3
Fail
1.1
Fail
1.9
Fail
1.6
Fail
1.3
Fail
—
1.4
Fail
1.3
Fail
1.1
Fail
1.1
Fail
1.4
Fail
—
White BG
1.7Fail
2.1Fail
2.5Fail
3.3AA Large
2.3Fail
Black BG
12.1AAA
10.0AAA
8.4AAA
6.5AA
9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E04A
BCBB47
969659
5B5C6B
626483

Deuteranopia

E4EA53
BCBD4F
938F60
544A6F
594C88

Tritanopia

FB666C
BF6369
827075
2A797C
219397

Achromatopsia

BDBDBD
A9A9A9
969696
757575
878787

Shades & Tints Shades & Tints

#FFB827

Dark
Light

#BFB723

Dark
Light

#7FB33C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffb827;
  --color-2: #bfb723;
  --color-3: #7fb33c;
  --color-4: #24a359;
  --color-5: #18c46e;
}

SCSS

$color-1: #ffb827;
$color-2: #bfb723;
$color-3: #7fb33c;
$color-4: #24a359;
$color-5: #18c46e;

TAILWIND

colors: {
  'brand-1': '#ffb827',
  'brand-2': '#bfb723',
  'brand-3': '#7fb33c',
  'brand-4': '#24a359',
  'brand-5': '#18c46e',
}

RGB Array

[255, 184, 39], [191, 183, 35], [127, 179, 60], [36, 163, 89], [24, 196, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #FFB827, #BFB723, #7FB33C, #24A359, #18C46E is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ffb827; --color-2: #bfb723; --color-3: #7fb33c; --color-4: #24a359; --color-5: #18c46e. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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