#C1F7E2 + #F7EDB7 + #5DB392 + #5B6292 + #91B6D9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C1F7E2

Jade · LightBlue · Mint Green

HEX

#C1F7E2

RGB

rgb(193, 247, 226)

HSL

hsl(157, 77%, 86%)

HSB

hsb(157, 22%, 97%)

CMYK

cmyk(22%, 0%, 9%, 3%)

Oklch

oklch(93.3% 0.062 169.2)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#F7EDB7

Fresh Green · Wheat · Lemon Cream

HEX

#F7EDB7

RGB

rgb(247, 237, 183)

HSL

hsl(51, 80%, 84%)

HSB

hsb(51, 26%, 97%)

CMYK

cmyk(0%, 4%, 26%, 3%)

Oklch

oklch(94.1% 0.070 98.8)

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

#5DB392

Mineral Blue · CadetBlue · Olive Green

HEX

#5DB392

RGB

rgb(93, 179, 146)

HSL

hsl(157, 36%, 53%)

HSB

hsb(157, 48%, 70%)

CMYK

cmyk(48%, 0%, 18%, 30%)

Oklch

oklch(70.3% 0.098 166.5)

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

#5B6292

Indigo · SlateGray · Navy Blue

HEX

#5B6292

RGB

rgb(91, 98, 146)

HSL

hsl(232, 23%, 46%)

HSB

hsb(232, 38%, 57%)

CMYK

cmyk(38%, 33%, 0%, 43%)

Oklch

oklch(51.1% 0.077 277.0)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#91B6D9

Sky Blue · SkyBlue · Cobalt Blue

HEX

#91B6D9

RGB

rgb(145, 182, 217)

HSL

hsl(209, 49%, 71%)

HSB

hsb(209, 33%, 85%)

CMYK

cmyk(33%, 16%, 0%, 15%)

Oklch

oklch(76.2% 0.064 247.2)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C1F7E2

F7C0D5

Analogous

C0F7C6

C1F7E2

C0F0F7

Triadic

C1F7E2

E2C0F7

F7E2C0

Split-Comp.

C1F7E2

F7C0F0

F7C6C0

Tetradic

C1F7E2

C6C0F7

F7C0D5

F0F7C0

Contrast Matrix WCAG 2.1 Contrast

C1F7E2	F7EDB7	5DB392	5B6292	91B6D9
—	1.0 Fail	2.1 Fail	4.9 AA	1.8 Fail
1.0 Fail	—	2.1 Fail	4.9 AA	1.8 Fail
2.1 Fail	2.1 Fail	—	2.3 Fail	1.2 Fail
4.9 AA	4.9 AA	2.3 Fail	—	2.7 Fail
1.8 Fail	1.8 Fail	1.2 Fail	2.7 Fail	—

White BG

1.2Fail

2.5Fail

5.8AA

2.1Fail

Black BG

17.7AAA

17.8AAA

8.3AAA

3.6AA Large

9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D9E7

F3F3C4

82839A

5E5E86

A1A1D1

Deuteranopia

D5D1E8

F3F4C7

7D779C

5E5D84

9F9CCE

Tritanopia

C4EBEC

F6CED1

61A0A2

5B7D7B

93CAC8

Achromatopsia

E4E4E4

EAEAEA

969696

656565

AFAFAF

Shades & Tints Shades & Tints

#C1F7E2

Dark

Light

#F7EDB7

Dark

Light

#5DB392

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c1f7e2;
  --color-2: #f7edb7;
  --color-3: #5db392;
  --color-4: #5b6292;
  --color-5: #91b6d9;
}

SCSS

$color-1: #c1f7e2;
$color-2: #f7edb7;
$color-3: #5db392;
$color-4: #5b6292;
$color-5: #91b6d9;

TAILWIND

colors: {
  'brand-1': '#c1f7e2',
  'brand-2': '#f7edb7',
  'brand-3': '#5db392',
  'brand-4': '#5b6292',
  'brand-5': '#91b6d9',
}

RGB Array

[193, 247, 226], [247, 237, 183], [93, 179, 146], [91, 98, 146], [145, 182, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C1F7E2, #F7EDB7, #5DB392, #5B6292, #91B6D9 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: #c1f7e2; --color-2: #f7edb7; --color-3: #5db392; --color-4: #5b6292; --color-5: #91b6d9. 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