#23F94E + #77D99C + #CAB9EA + #C3BDD0 + #BCC0B6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#23F94E

Emerald · LimeGreen · Olive Green

HEX

#23F94E

RGB

rgb(35, 249, 78)

HSL

hsl(132, 95%, 56%)

HSB

hsb(132, 86%, 98%)

CMYK

cmyk(86%, 0%, 69%, 2%)

Oklch

oklch(85.6% 0.262 145.0)

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

#77D99C

Emerald · MediumAquaMarine · Apple Green

HEX

#77D99C

RGB

rgb(119, 217, 156)

HSL

hsl(143, 56%, 66%)

HSB

hsb(143, 45%, 85%)

CMYK

cmyk(45%, 0%, 28%, 15%)

Oklch

oklch(80.9% 0.128 155.0)

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

#CAB9EA

Wisteria · LightSteelBlue · Lavender

HEX

#CAB9EA

RGB

rgb(202, 185, 234)

HSL

hsl(261, 54%, 82%)

HSB

hsb(261, 21%, 92%)

CMYK

cmyk(14%, 21%, 0%, 8%)

Oklch

oklch(81.6% 0.070 300.7)

Traditional「Wisteria」· Paint「Lavender」· Creative Lavender Dream

#C3BDD0

Wisteria · Silver · Cobalt Blue

HEX

#C3BDD0

RGB

rgb(195, 189, 208)

HSL

hsl(259, 17%, 78%)

HSB

hsb(259, 9%, 82%)

CMYK

cmyk(6%, 9%, 0%, 18%)

Oklch

oklch(80.9% 0.027 300.2)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#BCC0B6

Silver Gray · Silver · Pearl Gray

HEX

#BCC0B6

RGB

rgb(188, 192, 182)

HSL

hsl(84, 7%, 73%)

HSB

hsb(84, 5%, 75%)

CMYK

cmyk(2%, 0%, 5%, 25%)

Oklch

oklch(80.2% 0.015 124.6)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

23F94E

F924CF

Analogous

64F924

23F94E

24F9B9

Triadic

23F94E

4F24F9

F94F24

Split-Comp.

23F94E

B924F9

F92464

Tetradic

23F94E

2464F9

F924CF

F9B924

Contrast Matrix WCAG 2.1 Contrast

23F94E	77D99C	CAB9EA	C3BDD0	BCC0B6
—	1.2 Fail	1.3 Fail	1.3 Fail	1.3 Fail
1.2 Fail	—	1.0 Fail	1.1 Fail	1.1 Fail
1.3 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.3 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.3 Fail	1.1 Fail	1.0 Fail	1.0 Fail	—

White BG

1.4Fail

1.7Fail

1.8Fail

Black BG

14.7AAA

12.2AAA

11.6AAA

11.5AAA

11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

808277

A1A2AB

C3C2DE

C0C0CB

BEBEB8

Deuteranopia

736381

9C94AE

C4C5DB

C1C1CA

BEBDB9

Tritanopia

2E989F

7CB6B9

C9D5D3

C3C8C7

BCBABB

Achromatopsia

A6A6A6

B5B5B5

C4C4C4

C1C1C1

BEBEBE

Shades & Tints Shades & Tints

#23F94E

Dark

Light

#77D99C

Dark

Light

#CAB9EA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #23f94e;
  --color-2: #77d99c;
  --color-3: #cab9ea;
  --color-4: #c3bdd0;
  --color-5: #bcc0b6;
}

SCSS

$color-1: #23f94e;
$color-2: #77d99c;
$color-3: #cab9ea;
$color-4: #c3bdd0;
$color-5: #bcc0b6;

TAILWIND

colors: {
  'brand-1': '#23f94e',
  'brand-2': '#77d99c',
  'brand-3': '#cab9ea',
  'brand-4': '#c3bdd0',
  'brand-5': '#bcc0b6',
}

RGB Array

[35, 249, 78], [119, 217, 156], [202, 185, 234], [195, 189, 208], [188, 192, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #23F94E, #77D99C, #CAB9EA, #C3BDD0, #BCC0B6 is ideal for: health products, baby brands, fresh-style blogs. 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: #23f94e; --color-2: #77d99c; --color-3: #cab9ea; --color-4: #c3bdd0; --color-5: #bcc0b6. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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