#7BC1C3 + #B4CA9C + #E0DA90 + #F68B95 + #EECFB3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7BC1C3

Sky Blue · MediumAquaMarine · Lake Green

HEX

#7BC1C3

RGB

rgb(123, 193, 195)

HSL

hsl(182, 37%, 62%)

HSB

hsb(182, 37%, 76%)

CMYK

cmyk(37%, 1%, 0%, 24%)

Oklch

oklch(76.5% 0.071 198.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#B4CA9C

Willow Green · DarkGray · Apple Green

HEX

#B4CA9C

RGB

rgb(180, 202, 156)

HSL

hsl(89, 30%, 70%)

HSB

hsb(89, 23%, 79%)

CMYK

cmyk(11%, 0%, 23%, 21%)

Oklch

oklch(81.0% 0.067 128.6)

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

#E0DA90

Fresh Green · Khaki · Sunflower

HEX

#E0DA90

RGB

rgb(224, 218, 144)

HSL

hsl(55, 56%, 72%)

HSB

hsb(55, 36%, 88%)

CMYK

cmyk(0%, 3%, 36%, 12%)

Oklch

oklch(87.6% 0.095 104.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#F68B95

Peach Pink · LightCoral · Coral Red

HEX

#F68B95

RGB

rgb(246, 139, 149)

HSL

hsl(354, 86%, 75%)

HSB

hsb(354, 43%, 96%)

CMYK

cmyk(0%, 43%, 39%, 4%)

Oklch

oklch(75.4% 0.130 14.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#EECFB3

Apricot · Wheat · Peach Orange

HEX

#EECFB3

RGB

rgb(238, 207, 179)

HSL

hsl(28, 63%, 82%)

HSB

hsb(28, 25%, 93%)

CMYK

cmyk(0%, 13%, 25%, 7%)

Oklch

oklch(87.3% 0.051 64.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7BC1C3

C27D7A

Analogous

7AC2A0

7BC1C3

7A9CC2

Triadic

7BC1C3

C27AC0

C0C27A

Split-Comp.

7BC1C3

C27A9C

C2A07A

Tetradic

7BC1C3

A07AC2

C27D7A

9CC27A

Contrast Matrix WCAG 2.1 Contrast

7BC1C3	B4CA9C	E0DA90	F68B95	EECFB3
—	1.2 Fail	1.4 Fail	1.1 Fail	1.4 Fail
1.2 Fail	—	1.2 Fail	1.3 Fail	1.2 Fail
1.4 Fail	1.2 Fail	—	1.6 Fail	1.0 Fail
1.1 Fail	1.3 Fail	1.6 Fail	—	1.6 Fail
1.4 Fail	1.2 Fail	1.0 Fail	1.6 Fail	—

White BG

2.0Fail

1.8Fail

1.4Fail

2.3Fail

1.5Fail

Black BG

10.3AAA

11.9AAA

14.6AAA

9.0AAA

14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

999AC3

BEBEA7

DDDDA2

C8C793

E1E0BA

Deuteranopia

9590C2

BCBBAA

DEDEA6

CED692

E2E5BB

Tritanopia

7FC2C2

B5B0B2

E0B0B3

F19190

ECBFC0

Achromatopsia

ACACAC

BEBEBE

D3D3D3

ACACAC

D5D5D5

Shades & Tints Shades & Tints

#7BC1C3

Dark

Light

#B4CA9C

Dark

Light

#E0DA90

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7bc1c3;
  --color-2: #b4ca9c;
  --color-3: #e0da90;
  --color-4: #f68b95;
  --color-5: #eecfb3;
}

SCSS

$color-1: #7bc1c3;
$color-2: #b4ca9c;
$color-3: #e0da90;
$color-4: #f68b95;
$color-5: #eecfb3;

TAILWIND

colors: {
  'brand-1': '#7bc1c3',
  'brand-2': '#b4ca9c',
  'brand-3': '#e0da90',
  'brand-4': '#f68b95',
  'brand-5': '#eecfb3',
}

RGB Array

[123, 193, 195], [180, 202, 156], [224, 218, 144], [246, 139, 149], [238, 207, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7BC1C3, #B4CA9C, #E0DA90, #F68B95, #EECFB3 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: #7bc1c3; --color-2: #b4ca9c; --color-3: #e0da90; --color-4: #f68b95; --color-5: #eecfb3. 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