← Back to Editor

#7FB385 · #00302B · #C3CE94 · #D6E1A9 · #FFFFC3

summer

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#7FB385

Celadon · DarkSeaGreen · Olive Green

HEX
#7FB385
RGB
rgb(127, 179, 133)
HSL
hsl(127, 25%, 60%)
HSB
hsb(127, 29%, 70%)
CMYK
cmyk(29%, 0%, 26%, 30%)
Oklch
oklch(71.8% 0.086 147.6)

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

#00302B

Mineral Blue · Black · Peacock Green

HEX
#00302B
RGB
rgb(0, 48, 43)
HSL
hsl(174, 100%, 9%)
HSB
hsb(174, 100%, 19%)
CMYK
cmyk(100%, 0%, 10%, 81%)
Oklch
oklch(27.8% 0.049 184.0)

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

#C3CE94

Willow Green · Tan · Apple Green

HEX
#C3CE94
RGB
rgb(195, 206, 148)
HSL
hsl(71, 37%, 69%)
HSB
hsb(71, 28%, 81%)
CMYK
cmyk(5%, 0%, 28%, 19%)
Oklch
oklch(82.9% 0.078 116.9)

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

#D6E1A9

Willow Green · Wheat · Apple Green

HEX
#D6E1A9
RGB
rgb(214, 225, 169)
HSL
hsl(72, 48%, 77%)
HSB
hsb(72, 25%, 88%)
CMYK
cmyk(5%, 0%, 25%, 12%)
Oklch
oklch(88.8% 0.074 117.0)

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

#FFFFC3

Fresh Green · Bisque · Lemon Cream

HEX
#FFFFC3
RGB
rgb(255, 255, 195)
HSL
hsl(60, 100%, 88%)
HSB
hsb(60, 24%, 100%)
CMYK
cmyk(0%, 0%, 24%, 0%)
Oklch
oklch(98.6% 0.076 107.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7FB385
B380AD

Analogous

93B380
7FB385
80B39F

Triadic

7FB385
8580B3
B38580

Split-Comp.

7FB385
9F80B3
B38093

Tetradic

7FB385
8093B3
B380AD
B39F80

Contrast Matrix WCAG 2.1 Contrast

7FB385
00302B
C3CE94
D6E1A9
FFFFC3
—
6.0
AA
1.4
Fail
1.7
Fail
2.3
Fail
6.0
AA
—
8.6
AAA
10.4
AAA
14.0
AAA
1.4
Fail
8.6
AAA
—
1.2
Fail
1.6
Fail
1.7
Fail
10.4
AAA
1.2
Fail
—
1.3
Fail
2.3
Fail
14.0
AAA
1.6
Fail
1.3
Fail
—
White BG
2.4Fail
14.4AAA
1.7Fail
1.4Fail
1.0Fail
Black BG
8.7AAA
1.5Fail
12.6AAA
15.2AAA
20.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

969690
15152C
C8C8A2
DBDBB7
FFFFD2

Deuteranopia

938F93
120E2D
C7C6A5
DAD9BA
FFFFD5

Tritanopia

82999B
022D2D
C4ADB0
D7C1C4
FFDDE0

Achromatopsia

9E9E9E
212121
C4C4C4
D7D7D7
F8F8F8

Shades & Tints Shades & Tints

#7FB385

Dark
Light

#00302B

Dark
Light

#C3CE94

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7fb385;
  --color-2: #00302b;
  --color-3: #c3ce94;
  --color-4: #d6e1a9;
  --color-5: #ffffc3;
}

SCSS

$color-1: #7fb385;
$color-2: #00302b;
$color-3: #c3ce94;
$color-4: #d6e1a9;
$color-5: #ffffc3;

TAILWIND

colors: {
  'brand-1': '#7fb385',
  'brand-2': '#00302b',
  'brand-3': '#c3ce94',
  'brand-4': '#d6e1a9',
  'brand-5': '#ffffc3',
}

RGB Array

[127, 179, 133], [0, 48, 43], [195, 206, 148], [214, 225, 169], [255, 255, 195]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #7FB385, #00302B, #C3CE94, #D6E1A9, #FFFFC3 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #7fb385; --color-2: #00302b; --color-3: #c3ce94; --color-4: #d6e1a9; --color-5: #ffffc3. 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. 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 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