#F4CC6C + #D4C780 + #B5C395 + #96BFA9 + #77BBBE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4CC6C

Ginger · BurlyWood · Sunflower

HEX

#F4CC6C

RGB

rgb(244, 204, 108)

HSL

hsl(42, 86%, 69%)

HSB

hsb(42, 56%, 96%)

CMYK

cmyk(0%, 16%, 56%, 4%)

Oklch

oklch(86.1% 0.123 87.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#D4C780

Fresh Green · BurlyWood · Sunflower

HEX

#D4C780

RGB

rgb(212, 199, 128)

HSL

hsl(51, 49%, 67%)

HSB

hsb(51, 40%, 83%)

CMYK

cmyk(0%, 6%, 40%, 17%)

Oklch

oklch(82.4% 0.092 99.1)

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

#B5C395

Willow Green · Tan · Apple Green

HEX

#B5C395

RGB

rgb(181, 195, 149)

HSL

hsl(78, 28%, 67%)

HSB

hsb(78, 24%, 76%)

CMYK

cmyk(7%, 0%, 24%, 24%)

Oklch

oklch(79.5% 0.064 121.6)

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

#96BFA9

Celadon · DarkSeaGreen · Apple Green

HEX

#96BFA9

RGB

rgb(150, 191, 169)

HSL

hsl(148, 24%, 67%)

HSB

hsb(148, 21%, 75%)

CMYK

cmyk(21%, 0%, 12%, 25%)

Oklch

oklch(76.9% 0.054 161.4)

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

#77BBBE

Sky Blue · MediumAquaMarine · Lake Green

HEX

#77BBBE

RGB

rgb(119, 187, 190)

HSL

hsl(183, 35%, 61%)

HSB

hsb(183, 37%, 75%)

CMYK

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

Oklch

oklch(74.8% 0.069 199.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4CC6C

6C95F4

Analogous

F4876C

F4CC6C

D9F46C

Triadic

F4CC6C

6CF4CB

CB6CF4

Split-Comp.

F4CC6C

6CD9F4

876CF4

Tetradic

F4CC6C

6CF487

6C95F4

F46CD9

Contrast Matrix WCAG 2.1 Contrast

F4CC6C	D4C780	B5C395	96BFA9	77BBBE
—	1.1 Fail	1.2 Fail	1.3 Fail	1.4 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.4 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.5Fail

1.7Fail

1.9Fail

2.0Fail

2.2Fail

Black BG

13.7AAA

12.3AAA

11.2AAA

10.3AAA

9.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E283

CECE91

BBBBA0

A8A8AE

9495BD

Deuteranopia

E5E889

CFD095

BAB9A3

A5A2B0

918BBD

Tritanopia

F2969A

D39FA2

B6A9AB

98B3B3

7ABDBD

Achromatopsia

CDCDCD

C3C3C3

BABABA

B0B0B0

A7A7A7

Shades & Tints Shades & Tints

#F4CC6C

Dark

Light

#D4C780

Dark

Light

#B5C395

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4cc6c;
  --color-2: #d4c780;
  --color-3: #b5c395;
  --color-4: #96bfa9;
  --color-5: #77bbbe;
}

SCSS

$color-1: #f4cc6c;
$color-2: #d4c780;
$color-3: #b5c395;
$color-4: #96bfa9;
$color-5: #77bbbe;

TAILWIND

colors: {
  'brand-1': '#f4cc6c',
  'brand-2': '#d4c780',
  'brand-3': '#b5c395',
  'brand-4': '#96bfa9',
  'brand-5': '#77bbbe',
}

RGB Array

[244, 204, 108], [212, 199, 128], [181, 195, 149], [150, 191, 169], [119, 187, 190]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4CC6C, #D4C780, #B5C395, #96BFA9, #77BBBE 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: #f4cc6c; --color-2: #d4c780; --color-3: #b5c395; --color-4: #96bfa9; --color-5: #77bbbe. 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