#C6CE93 + #FAF9ED + #98B2C3 + #E8F3FA + #FAFCFC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C6CE93

Fresh Green · Tan · Sunflower

HEX

#C6CE93

RGB

rgb(198, 206, 147)

HSL

hsl(68, 38%, 69%)

HSB

hsb(68, 29%, 81%)

CMYK

cmyk(4%, 0%, 29%, 19%)

Oklch

oklch(83.1% 0.078 114.4)

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

#FAF9ED

Fresh Green · SeaShell · Lemon Cream

HEX

#FAF9ED

RGB

rgb(250, 249, 237)

HSL

hsl(55, 57%, 95%)

HSB

hsb(55, 5%, 98%)

CMYK

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

Oklch

oklch(98.0% 0.016 102.8)

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

#98B2C3

Sky Blue · DarkGray · Cobalt Blue

HEX

#98B2C3

RGB

rgb(152, 178, 195)

HSL

hsl(204, 26%, 68%)

HSB

hsb(204, 22%, 76%)

CMYK

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

Oklch

oklch(75.0% 0.038 236.7)

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

#E8F3FA

Sky Blue · Lavender · Sky Blue

HEX

#E8F3FA

RGB

rgb(232, 243, 250)

HSL

hsl(203, 64%, 95%)

HSB

hsb(203, 7%, 98%)

CMYK

cmyk(7%, 3%, 0%, 2%)

Oklch

oklch(95.8% 0.015 235.4)

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

#FAFCFC

Sky Blue · Snow · Glacier Blue

HEX

#FAFCFC

RGB

rgb(250, 252, 252)

HSL

hsl(180, 25%, 98%)

HSB

hsb(180, 1%, 99%)

CMYK

cmyk(1%, 0%, 0%, 1%)

Oklch

oklch(99.0% 0.002 197.1)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C6CE93

9A92CE

Analogous

CEB892

C6CE93

A8CE92

Triadic

C6CE93

92C6CE

CE92C6

Split-Comp.

C6CE93

92A8CE

B892CE

Tetradic

C6CE93

92CEB8

9A92CE

CE92A8

Contrast Matrix WCAG 2.1 Contrast

C6CE93	FAF9ED	98B2C3	E8F3FA	FAFCFC
—	1.6 Fail	1.3 Fail	1.5 Fail	1.6 Fail
1.6 Fail	—	2.1 Fail	1.1 Fail	1.0 Fail
1.3 Fail	2.1 Fail	—	2.0 Fail	2.1 Fail
1.5 Fail	1.1 Fail	2.0 Fail	—	1.1 Fail
1.6 Fail	1.0 Fail	2.1 Fail	1.1 Fail	—

White BG

1.7Fail

1.1Fail

2.2Fail

1.1Fail

1.0Fail

Black BG

12.7AAA

19.8AAA

9.5AAA

18.6AAA

20.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9CAA1

FAFAF0

A3A3BF

EDEDF8

FBFBFC

Deuteranopia

C9C8A5

FAFAF1

A2A0BE

ECEBF8

FBFBFC

Tritanopia

C6ADAF

FAF2F3

99BCBB

E9F7F7

FAFCFC

Achromatopsia

C5C5C5

F8F8F8

ACACAC

F1F1F1

FBFBFB

Shades & Tints Shades & Tints

#C6CE93

Dark

Light

#FAF9ED

Dark

Light

#98B2C3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c6ce93;
  --color-2: #faf9ed;
  --color-3: #98b2c3;
  --color-4: #e8f3fa;
  --color-5: #fafcfc;
}

SCSS

$color-1: #c6ce93;
$color-2: #faf9ed;
$color-3: #98b2c3;
$color-4: #e8f3fa;
$color-5: #fafcfc;

TAILWIND

colors: {
  'brand-1': '#c6ce93',
  'brand-2': '#faf9ed',
  'brand-3': '#98b2c3',
  'brand-4': '#e8f3fa',
  'brand-5': '#fafcfc',
}

RGB Array

[198, 206, 147], [250, 249, 237], [152, 178, 195], [232, 243, 250], [250, 252, 252]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C6CE93, #FAF9ED, #98B2C3, #E8F3FA, #FAFCFC 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: #c6ce93; --color-2: #faf9ed; --color-3: #98b2c3; --color-4: #e8f3fa; --color-5: #fafcfc. 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