#C3CABE + #C6D0A9 + #C4CF8F + #DDE968 + #FAF248 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C3CABE

Celadon · Silver · Apple Green

HEX

#C3CABE

RGB

rgb(195, 202, 190)

HSL

hsl(95, 10%, 77%)

HSB

hsb(95, 6%, 79%)

CMYK

cmyk(3%, 0%, 6%, 21%)

Oklch

oklch(83.0% 0.018 131.9)

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

#C6D0A9

Willow Green · Silver · Apple Green

HEX

#C6D0A9

RGB

rgb(198, 208, 169)

HSL

hsl(75, 29%, 74%)

HSB

hsb(75, 19%, 82%)

CMYK

cmyk(5%, 0%, 19%, 18%)

Oklch

oklch(84.0% 0.054 119.2)

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

#C4CF8F

Willow Green · Tan · Apple Green

HEX

#C4CF8F

RGB

rgb(196, 207, 143)

HSL

hsl(70, 40%, 69%)

HSB

hsb(70, 31%, 81%)

CMYK

cmyk(5%, 0%, 31%, 19%)

Oklch

oklch(83.1% 0.085 116.2)

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

#DDE968

Fresh Green · Khaki · Sunflower

HEX

#DDE968

RGB

rgb(221, 233, 104)

HSL

hsl(66, 75%, 66%)

HSB

hsb(66, 55%, 91%)

CMYK

cmyk(5%, 0%, 55%, 9%)

Oklch

oklch(90.0% 0.153 113.9)

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

#FAF248

Fresh Green · Khaki · Sunflower

HEX

#FAF248

RGB

rgb(250, 242, 72)

HSL

hsl(57, 95%, 63%)

HSB

hsb(57, 71%, 98%)

CMYK

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

Oklch

oklch(93.9% 0.180 106.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3CABE

C5BECA

Analogous

C9CABE

C3CABE

BECABF

Triadic

C3CABE

BEC3CA

CABEC3

Split-Comp.

C3CABE

BFBECA

CABEC9

Tetradic

C3CABE

BEC9CA

C5BECA

CABFBE

Contrast Matrix WCAG 2.1 Contrast

C3CABE	C6D0A9	C4CF8F	DDE968	FAF248
—	1.0 Fail	1.0 Fail	1.3 Fail	1.4 Fail
1.0 Fail	—	1.0 Fail	1.2 Fail	1.4 Fail
1.0 Fail	1.0 Fail	—	1.3 Fail	1.4 Fail
1.3 Fail	1.2 Fail	1.3 Fail	—	1.1 Fail
1.4 Fail	1.4 Fail	1.4 Fail	1.1 Fail	—

White BG

1.7Fail

1.6Fail

1.7Fail

1.3Fail

1.2Fail

Black BG

12.5AAA

13.0AAA

12.7AAA

15.9AAA

17.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C6C1

CACAB2

C9C99E

E2E287

F7F671

Deuteranopia

C6C5C2

CAC9B5

C8C7A2

E2E18F

F7F87B

Tritanopia

C3C3C4

C7BABC

C5ABAD

DEA0A5

FA9299

Achromatopsia

C7C7C7

C9C9C9

C4C4C4

D7D7D7

E1E1E1

Shades & Tints Shades & Tints

#C3CABE

Dark

Light

#C6D0A9

Dark

Light

#C4CF8F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3cabe;
  --color-2: #c6d0a9;
  --color-3: #c4cf8f;
  --color-4: #dde968;
  --color-5: #faf248;
}

SCSS

$color-1: #c3cabe;
$color-2: #c6d0a9;
$color-3: #c4cf8f;
$color-4: #dde968;
$color-5: #faf248;

TAILWIND

colors: {
  'brand-1': '#c3cabe',
  'brand-2': '#c6d0a9',
  'brand-3': '#c4cf8f',
  'brand-4': '#dde968',
  'brand-5': '#faf248',
}

RGB Array

[195, 202, 190], [198, 208, 169], [196, 207, 143], [221, 233, 104], [250, 242, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C3CABE, #C6D0A9, #C4CF8F, #DDE968, #FAF248 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: #c3cabe; --color-2: #c6d0a9; --color-3: #c4cf8f; --color-4: #dde968; --color-5: #faf248. 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