← Back to Editor

#C2F7C3 · #6EC1A7 · #36A096 · #0D747B · #0E6171

A 5-color palette 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

#C2F7C3

Emerald · LightGray · Mint Green

HEX
#C2F7C3
RGB
rgb(194, 247, 195)
HSL
hsl(121, 77%, 86%)
HSB
hsb(121, 21%, 97%)
CMYK
cmyk(21%, 0%, 21%, 3%)
Oklch
oklch(92.6% 0.088 145.3)

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

#6EC1A7

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#6EC1A7
RGB
rgb(110, 193, 167)
HSL
hsl(161, 40%, 59%)
HSB
hsb(161, 43%, 76%)
CMYK
cmyk(43%, 0%, 13%, 24%)
Oklch
oklch(75.1% 0.090 171.5)

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

#36A096

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#36A096
RGB
rgb(54, 160, 150)
HSL
hsl(174, 50%, 42%)
HSB
hsb(174, 66%, 63%)
CMYK
cmyk(66%, 0%, 6%, 37%)
Oklch
oklch(64.3% 0.096 186.2)

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

#0D747B

Lake Blue · Teal · Mint Ice

HEX
#0D747B
RGB
rgb(13, 116, 123)
HSL
hsl(184, 81%, 27%)
HSB
hsb(184, 89%, 48%)
CMYK
cmyk(89%, 6%, 0%, 52%)
Oklch
oklch(51.0% 0.084 202.5)

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

#0E6171

Lake Blue · Teal · Peacock Green

HEX
#0E6171
RGB
rgb(14, 97, 113)
HSL
hsl(190, 78%, 25%)
HSB
hsb(190, 88%, 44%)
CMYK
cmyk(88%, 14%, 0%, 56%)
Oklch
oklch(45.5% 0.076 215.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C2F7C3
F7C0F6

Analogous

DAF7C0
C2F7C3
C0F7DC

Triadic

C2F7C3
C1C0F7
F7C1C0

Split-Comp.

C2F7C3
DCC0F7
F7C0DA

Tetradic

C2F7C3
C0DAF7
F7C0F6
F7DCC0

Contrast Matrix WCAG 2.1 Contrast

C2F7C3
6EC1A7
36A096
0D747B
0E6171
—
1.8
Fail
2.6
Fail
4.6
AA
5.9
AA
1.8
Fail
—
1.5
Fail
2.6
Fail
3.3
AA Large
2.6
Fail
1.5
Fail
—
1.7
Fail
2.2
Fail
4.6
AA
2.6
Fail
1.7
Fail
—
1.3
Fail
5.9
AA
3.3
AA Large
2.2
Fail
1.3
Fail
—
White BG
1.2Fail
2.1Fail
3.2AA Large
5.5AA
7.1AAA
Black BG
17.4AAA
9.8AAA
6.6AA
3.8AA Large
3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D9D0
9293AD
646598
3A3B79
32336D

Deuteranopia

D6D2D3
8D87AF
5E5699
342C79
2D276C

Tritanopia

C5DADC
72B2B3
3B9A9B
127878
126A69

Achromatopsia

E1E1E1
A5A5A5
7F7F7F
565656
4A4A4A

Shades & Tints Shades & Tints

#C2F7C3

Dark
Light

#6EC1A7

Dark
Light

#36A096

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c2f7c3;
  --color-2: #6ec1a7;
  --color-3: #36a096;
  --color-4: #0d747b;
  --color-5: #0e6171;
}

SCSS

$color-1: #c2f7c3;
$color-2: #6ec1a7;
$color-3: #36a096;
$color-4: #0d747b;
$color-5: #0e6171;

TAILWIND

colors: {
  'brand-1': '#c2f7c3',
  'brand-2': '#6ec1a7',
  'brand-3': '#36a096',
  'brand-4': '#0d747b',
  'brand-5': '#0e6171',
}

RGB Array

[194, 247, 195], [110, 193, 167], [54, 160, 150], [13, 116, 123], [14, 97, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C2F7C3, #6EC1A7, #36A096, #0D747B, #0E6171 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: #c2f7c3; --color-2: #6ec1a7; --color-3: #36a096; --color-4: #0d747b; --color-5: #0e6171. 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 general-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