← Back to Editor

#4AFFD9 · #C2FF61 · #FFF44A · #FFCD4A · #FF4A9A

summer

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#4AFFD9

Jade · Turquoise · Lake Green

HEX
#4AFFD9
RGB
rgb(74, 255, 217)
HSL
hsl(167, 100%, 65%)
HSB
hsb(167, 71%, 100%)
CMYK
cmyk(71%, 0%, 15%, 0%)
Oklch
oklch(90.1% 0.153 175.2)

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

#C2FF61

Willow Green · GreenYellow · Apple Green

HEX
#C2FF61
RGB
rgb(194, 255, 97)
HSL
hsl(83, 100%, 69%)
HSB
hsb(83, 62%, 100%)
CMYK
cmyk(24%, 0%, 62%, 0%)
Oklch
oklch(92.9% 0.195 127.7)

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

#FFF44A

Fresh Green · Khaki · Sunflower

HEX
#FFF44A
RGB
rgb(255, 244, 74)
HSL
hsl(56, 100%, 65%)
HSB
hsb(56, 71%, 100%)
CMYK
cmyk(0%, 4%, 71%, 0%)
Oklch
oklch(94.8% 0.180 105.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#FFCD4A

Ginger · SandyBrown · Sunflower

HEX
#FFCD4A
RGB
rgb(255, 205, 74)
HSL
hsl(43, 100%, 65%)
HSB
hsb(43, 71%, 100%)
CMYK
cmyk(0%, 20%, 71%, 0%)
Oklch
oklch(87.0% 0.153 87.3)

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

#FF4A9A

Rouge · DeepPink · Rose Pink

HEX
#FF4A9A
RGB
rgb(255, 74, 154)
HSL
hsl(333, 100%, 65%)
HSB
hsb(333, 71%, 100%)
CMYK
cmyk(0%, 71%, 40%, 0%)
Oklch
oklch(68.8% 0.225 358.0)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4AFFD9
FF4D73

Analogous

4DFF7F
4AFFD9
4DCCFF

Triadic

4AFFD9
D84DFF
FFD84D

Split-Comp.

4AFFD9
FF4DCC
FF7F4D

Tetradic

4AFFD9
7F4DFF
FF4D73
CCFF4D

Contrast Matrix WCAG 2.1 Contrast

4AFFD9
C2FF61
FFF44A
FFCD4A
FF4A9A
—
1.1
Fail
1.1
Fail
1.2
Fail
2.5
Fail
1.1
Fail
—
1.0
Fail
1.3
Fail
2.7
Fail
1.1
Fail
1.0
Fail
—
1.3
Fail
2.7
Fail
1.2
Fail
1.3
Fail
1.3
Fail
—
2.1
Fail
2.5
Fail
2.7
Fail
2.7
Fail
2.1
Fail
—
White BG
1.3Fail
1.2Fail
1.1Fail
1.5Fail
3.1AA Large
Black BG
16.6AAA
17.8AAA
18.3AAA
14.1AAA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

989AE2
DCDD87
FAFA73
E9E96A
B1AF87

Deuteranopia

8E80E4
D9D490
FBFC7D
ECF071
BBC982

Tritanopia

53E9EB
C5A5AC
FE949B
FD8388
F67774

Achromatopsia

C5C5C5
DBDBDB
E4E4E4
CDCDCD
898989

Shades & Tints Shades & Tints

#4AFFD9

Dark
Light

#C2FF61

Dark
Light

#FFF44A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4affd9;
  --color-2: #c2ff61;
  --color-3: #fff44a;
  --color-4: #ffcd4a;
  --color-5: #ff4a9a;
}

SCSS

$color-1: #4affd9;
$color-2: #c2ff61;
$color-3: #fff44a;
$color-4: #ffcd4a;
$color-5: #ff4a9a;

TAILWIND

colors: {
  'brand-1': '#4affd9',
  'brand-2': '#c2ff61',
  'brand-3': '#fff44a',
  'brand-4': '#ffcd4a',
  'brand-5': '#ff4a9a',
}

RGB Array

[74, 255, 217], [194, 255, 97], [255, 244, 74], [255, 205, 74], [255, 74, 154]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #4AFFD9, #C2FF61, #FFF44A, #FFCD4A, #FF4A9A is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. 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: #4affd9; --color-2: #c2ff61; --color-3: #fff44a; --color-4: #ffcd4a; --color-5: #ff4a9a. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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