#69BE53 + #54B875 + #3FB397 + #2AAEBA + #14A9DC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#69BE53

Celadon · MediumSeaGreen · Olive Green

HEX

#69BE53

RGB

rgb(105, 190, 83)

HSL

hsl(108, 45%, 54%)

HSB

hsb(108, 56%, 75%)

CMYK

cmyk(45%, 0%, 56%, 25%)

Oklch

oklch(72.4% 0.166 139.6)

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

#54B875

Celadon · MediumSeaGreen · Olive Green

HEX

#54B875

RGB

rgb(84, 184, 117)

HSL

hsl(140, 41%, 53%)

HSB

hsb(140, 54%, 72%)

CMYK

cmyk(54%, 0%, 36%, 28%)

Oklch

oklch(70.5% 0.136 152.1)

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

#3FB397

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#3FB397

RGB

rgb(63, 179, 151)

HSL

hsl(166, 48%, 47%)

HSB

hsb(166, 65%, 70%)

CMYK

cmyk(65%, 0%, 16%, 30%)

Oklch

oklch(69.4% 0.112 173.8)

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

#2AAEBA

Lake Blue · LightSeaGreen · Mint Ice

HEX

#2AAEBA

RGB

rgb(42, 174, 186)

HSL

hsl(185, 63%, 45%)

HSB

hsb(185, 77%, 73%)

CMYK

cmyk(77%, 6%, 0%, 27%)

Oklch

oklch(68.9% 0.109 204.3)

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

#14A9DC

Lake Blue · DarkTurquoise · Mint Ice

HEX

#14A9DC

RGB

rgb(20, 169, 220)

HSL

hsl(195, 83%, 47%)

HSB

hsb(195, 91%, 86%)

CMYK

cmyk(91%, 23%, 0%, 14%)

Oklch

oklch(68.8% 0.133 229.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

69BE53

A955BE

Analogous

9FBE55

69BE53

55BE75

Triadic

69BE53

556ABE

BE556A

Split-Comp.

69BE53

7555BE

BE559F

Tetradic

69BE53

559FBE

A955BE

BE7555

Contrast Matrix WCAG 2.1 Contrast

69BE53	54B875	3FB397	2AAEBA	14A9DC
—	1.1 Fail	1.1 Fail	1.2 Fail	1.2 Fail
1.1 Fail	—	1.0 Fail	1.1 Fail	1.1 Fail
1.1 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.2 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.2 Fail	1.1 Fail	1.0 Fail	1.0 Fail	—

White BG

2.3Fail

2.5Fail

2.6Fail

2.7Fail

Black BG

9.1AAA

8.5AAA

8.1AAA

7.9AAA

7.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8F6D

7F8085

71729E

6364B7

5556D0

Deuteranopia

898373

7A7289

6B629F

5C52B6

4C41CD

Tritanopia

6D8186

599295

45A3A4

31B5B4

1BC6C4

Achromatopsia

989898

929292

8D8D8D

888888

828282

Shades & Tints Shades & Tints

#69BE53

Dark

Light

#54B875

Dark

Light

#3FB397

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #69be53;
  --color-2: #54b875;
  --color-3: #3fb397;
  --color-4: #2aaeba;
  --color-5: #14a9dc;
}

SCSS

$color-1: #69be53;
$color-2: #54b875;
$color-3: #3fb397;
$color-4: #2aaeba;
$color-5: #14a9dc;

TAILWIND

colors: {
  'brand-1': '#69be53',
  'brand-2': '#54b875',
  'brand-3': '#3fb397',
  'brand-4': '#2aaeba',
  'brand-5': '#14a9dc',
}

RGB Array

[105, 190, 83], [84, 184, 117], [63, 179, 151], [42, 174, 186], [20, 169, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #69BE53, #54B875, #3FB397, #2AAEBA, #14A9DC 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: #69be53; --color-2: #54b875; --color-3: #3fb397; --color-4: #2aaeba; --color-5: #14a9dc. 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