← Back to Editor

#34BFA4 · #68C698 · #94CC8D · #C1D283 · #EDD878

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#34BFA4

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#34BFA4
RGB
rgb(52, 191, 164)
HSL
hsl(168, 57%, 48%)
HSB
hsb(168, 73%, 75%)
CMYK
cmyk(73%, 0%, 14%, 25%)
Oklch
oklch(72.5% 0.122 176.5)

TraditionalMineral Blue」· PaintMint Ice」· Creative Blush Sunrise

#68C698

Mineral Blue · MediumAquaMarine · Olive Green

HEX
#68C698
RGB
rgb(104, 198, 152)
HSL
hsl(151, 45%, 59%)
HSB
hsb(151, 47%, 78%)
CMYK
cmyk(47%, 0%, 23%, 22%)
Oklch
oklch(75.6% 0.113 160.7)

TraditionalMineral Blue」· PaintOlive Green」· Creative Blush Sunrise

#94CC8D

Celadon · DarkSeaGreen · Apple Green

HEX
#94CC8D
RGB
rgb(148, 204, 141)
HSL
hsl(113, 38%, 68%)
HSB
hsb(113, 31%, 80%)
CMYK
cmyk(27%, 0%, 31%, 20%)
Oklch
oklch(79.0% 0.105 141.8)

TraditionalCeladon」· PaintApple Green」· Creative Mint Breeze

#C1D283

Willow Green · Tan · Apple Green

HEX
#C1D283
RGB
rgb(193, 210, 131)
HSL
hsl(73, 47%, 67%)
HSB
hsb(73, 38%, 82%)
CMYK
cmyk(8%, 0%, 38%, 18%)
Oklch
oklch(83.3% 0.104 118.6)

TraditionalWillow Green」· PaintApple Green」· Creative Mint Breeze

#EDD878

Ginger · Khaki · Sunflower

HEX
#EDD878
RGB
rgb(237, 216, 120)
HSL
hsl(49, 76%, 70%)
HSB
hsb(49, 49%, 93%)
CMYK
cmyk(0%, 9%, 49%, 7%)
Oklch
oklch(88.0% 0.119 97.3)

TraditionalGinger」· PaintSunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

34BFA4
C03551

Analogous

35C05E
34BFA4
3596C0

Triadic

34BFA4
A435C0
C0A435

Split-Comp.

34BFA4
C03596
C05E35

Tetradic

34BFA4
5E35C0
C03551
96C035

Contrast Matrix WCAG 2.1 Contrast

34BFA4
68C698
94CC8D
C1D283
EDD878
1.1
Fail
1.2
Fail
1.4
Fail
1.6
Fail
1.1
Fail
1.1
Fail
1.3
Fail
1.5
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.3
Fail
1.4
Fail
1.3
Fail
1.1
Fail
1.1
Fail
1.6
Fail
1.5
Fail
1.3
Fail
1.1
Fail
White BG
2.3Fail
2.1Fail
1.9Fail
1.6Fail
1.4Fail
Black BG
9.1AAA
10.1AAA
11.3AAA
12.8AAA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7071AB
9192A3
ACAD9C
C8C996
E4E48F

Deuteranopia

685EAC
8B84A6
A9A5A0
C7C69B
E5E795

Tritanopia

3BB0B1
6DACAE
97A8AB
C2A5A9
ECA2A6

Achromatopsia

929292
A5A5A5
B4B4B4
C4C4C4
D3D3D3

Shades & Tints Shades & Tints

#34BFA4

Dark
Light

#68C698

Dark
Light

#94CC8D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #34bfa4;
  --color-2: #68c698;
  --color-3: #94cc8d;
  --color-4: #c1d283;
  --color-5: #edd878;
}

SCSS

$color-1: #34bfa4;
$color-2: #68c698;
$color-3: #94cc8d;
$color-4: #c1d283;
$color-5: #edd878;

TAILWIND

colors: {
  'brand-1': '#34bfa4',
  'brand-2': '#68c698',
  'brand-3': '#94cc8d',
  'brand-4': '#c1d283',
  'brand-5': '#edd878',
}

RGB Array

[52, 191, 164], [104, 198, 152], [148, 204, 141], [193, 210, 131], [237, 216, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #34BFA4, #68C698, #94CC8D, #C1D283, #EDD878 is ideal for: corporate websites, product showcases, portfolios. 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: #34bfa4; --color-2: #68c698; --color-3: #94cc8d; --color-4: #c1d283; --color-5: #edd878. 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 general-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