#F1CB68 + #99B688 + #ECE19F + #E4C187 + #CDD69D · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F1CB68

Ginger · SandyBrown · Sunflower

HEX

#F1CB68

RGB

rgb(241, 203, 104)

HSL

hsl(43, 83%, 68%)

HSB

hsb(43, 57%, 95%)

CMYK

cmyk(0%, 16%, 57%, 5%)

Oklch

oklch(85.5% 0.125 88.6)

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

#99B688

Celadon · DarkSeaGreen · Apple Green

HEX

#99B688

RGB

rgb(153, 182, 136)

HSL

hsl(98, 24%, 62%)

HSB

hsb(98, 25%, 71%)

CMYK

cmyk(16%, 0%, 25%, 29%)

Oklch

oklch(74.2% 0.072 134.2)

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

#ECE19F

Fresh Green · Khaki · Lemon Cream

HEX

#ECE19F

RGB

rgb(236, 225, 159)

HSL

hsl(51, 67%, 77%)

HSB

hsb(51, 33%, 93%)

CMYK

cmyk(0%, 5%, 33%, 7%)

Oklch

oklch(90.3% 0.085 99.8)

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

#E4C187

Goose Yellow · BurlyWood · Warm Sun

HEX

#E4C187

RGB

rgb(228, 193, 135)

HSL

hsl(37, 63%, 71%)

HSB

hsb(37, 41%, 89%)

CMYK

cmyk(0%, 15%, 41%, 11%)

Oklch

oklch(82.8% 0.085 79.8)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#CDD69D

Fresh Green · Tan · Sunflower

HEX

#CDD69D

RGB

rgb(205, 214, 157)

HSL

hsl(69, 41%, 73%)

HSB

hsb(69, 27%, 84%)

CMYK

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

Oklch

oklch(85.5% 0.076 115.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1CB68

6A90F1

Analogous

F1876A

F1CB68

D4F16A

Triadic

F1CB68

6AF1CB

CB6AF1

Split-Comp.

F1CB68

6AD4F1

876AF1

Tetradic

F1CB68

6AF187

6A90F1

F16AD4

Contrast Matrix WCAG 2.1 Contrast

F1CB68	99B688	ECE19F	E4C187	CDD69D
—	1.4 Fail	1.2 Fail	1.1 Fail	1.0 Fail
1.4 Fail	—	1.7 Fail	1.3 Fail	1.5 Fail
1.2 Fail	1.7 Fail	—	1.3 Fail	1.2 Fail
1.1 Fail	1.3 Fail	1.3 Fail	—	1.1 Fail
1.0 Fail	1.5 Fail	1.2 Fail	1.1 Fail	—

White BG

1.6Fail

2.2Fail

1.3Fail

1.7Fail

1.5Fail

Black BG

13.5AAA

9.4AAA

15.8AAA

12.3AAA

13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E080

A6A693

E7E7AF

D5D595

D1D1AB

Deuteranopia

E3E686

A4A296

E8E9B3

D7DA98

D0D0AE

Tritanopia

EF9397

9A9C9E

EBBCBE

E2A0A3

CDB6B8

Achromatopsia

CBCBCB

A8A8A8

DDDDDD

C5C5C5

CDCDCD

Shades & Tints Shades & Tints

#F1CB68

Dark

Light

#99B688

Dark

Light

#ECE19F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1cb68;
  --color-2: #99b688;
  --color-3: #ece19f;
  --color-4: #e4c187;
  --color-5: #cdd69d;
}

SCSS

$color-1: #f1cb68;
$color-2: #99b688;
$color-3: #ece19f;
$color-4: #e4c187;
$color-5: #cdd69d;

TAILWIND

colors: {
  'brand-1': '#f1cb68',
  'brand-2': '#99b688',
  'brand-3': '#ece19f',
  'brand-4': '#e4c187',
  'brand-5': '#cdd69d',
}

RGB Array

[241, 203, 104], [153, 182, 136], [236, 225, 159], [228, 193, 135], [205, 214, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #F1CB68, #99B688, #ECE19F, #E4C187, #CDD69D 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: #f1cb68; --color-2: #99b688; --color-3: #ece19f; --color-4: #e4c187; --color-5: #cdd69d. 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 cool-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