← Back to Editor

#CFFFB3 · #1AFFC5 · #29A489 · #34615D · #3A3E46

summer

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#CFFFB3

Emerald · Wheat · Mint Green

HEX
#CFFFB3
RGB
rgb(207, 255, 179)
HSL
hsl(98, 100%, 85%)
HSB
hsb(98, 30%, 100%)
CMYK
cmyk(19%, 0%, 30%, 0%)
Oklch
oklch(94.8% 0.111 134.4)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#1AFFC5

Mineral Blue · Turquoise · Lake Green

HEX
#1AFFC5
RGB
rgb(26, 255, 197)
HSL
hsl(165, 100%, 55%)
HSB
hsb(165, 90%, 100%)
CMYK
cmyk(90%, 0%, 23%, 0%)
Oklch
oklch(89.0% 0.177 168.4)

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

#29A489

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#29A489
RGB
rgb(41, 164, 137)
HSL
hsl(167, 60%, 40%)
HSB
hsb(167, 75%, 64%)
CMYK
cmyk(75%, 0%, 16%, 36%)
Oklch
oklch(64.6% 0.112 174.1)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#34615D

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#34615D
RGB
rgb(52, 97, 93)
HSL
hsl(175, 30%, 29%)
HSB
hsb(175, 46%, 38%)
CMYK
cmyk(46%, 0%, 4%, 62%)
Oklch
oklch(45.9% 0.050 188.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#3A3E46

Indigo · DarkSlateGray · Dark Stone

HEX
#3A3E46
RGB
rgb(58, 62, 70)
HSL
hsl(220, 9%, 25%)
HSB
hsb(220, 17%, 27%)
CMYK
cmyk(17%, 11%, 0%, 73%)
Oklch
oklch(36.3% 0.015 264.4)

Traditional「Indigo」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFFFB3
E3B3FF

Analogous

F5FFB3
CFFFB3
B3FFBD

Triadic

CFFFB3
B3CFFF
FFB3CF

Split-Comp.

CFFFB3
BDB3FF
FFB3F5

Tetradic

CFFFB3
B3F5FF
E3B3FF
FFBDB3

Contrast Matrix WCAG 2.1 Contrast

CFFFB3
1AFFC5
29A489
34615D
3A3E46
—
1.2
Fail
2.8
Fail
6.2
AA
9.5
AAA
1.2
Fail
—
2.4
Fail
5.4
AA
8.3
AAA
2.8
Fail
2.4
Fail
—
2.2
Fail
3.5
AA Large
6.2
AA
5.4
AA
2.2
Fail
—
1.5
Fail
9.5
AAA
8.3
AAA
3.5
AA Large
1.5
Fail
—
White BG
1.1Fail
1.3Fail
3.1AA Large
7.0AA
10.7AAA
Black BG
18.6AAA
16.2AAA
6.8AA
3.0AA Large
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E4C5
7D7FD3
5E5F90
47485E
3C3C44

Deuteranopia

E1DDCA
705FD6
574E91
45425E
3C3B44

Tritanopia

D1D4D7
25DEE1
2F9596
365F5F
3A4342

Achromatopsia

E8E8E8
B4B4B4
7C7C7C
535353
3E3E3E

Shades & Tints Shades & Tints

#CFFFB3

Dark
Light

#1AFFC5

Dark
Light

#29A489

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfffb3;
  --color-2: #1affc5;
  --color-3: #29a489;
  --color-4: #34615d;
  --color-5: #3a3e46;
}

SCSS

$color-1: #cfffb3;
$color-2: #1affc5;
$color-3: #29a489;
$color-4: #34615d;
$color-5: #3a3e46;

TAILWIND

colors: {
  'brand-1': '#cfffb3',
  'brand-2': '#1affc5',
  'brand-3': '#29a489',
  'brand-4': '#34615d',
  'brand-5': '#3a3e46',
}

RGB Array

[207, 255, 179], [26, 255, 197], [41, 164, 137], [52, 97, 93], [58, 62, 70]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #CFFFB3, #1AFFC5, #29A489, #34615D, #3A3E46 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #cfffb3; --color-2: #1affc5; --color-3: #29a489; --color-4: #34615d; --color-5: #3a3e46. 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 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