← Back to Editor

#F4EFD1 · #CACEBB · #D3B476 · #DF8363 · #68646A

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#F4EFD1

Fresh Green · Beige · Lemon Cream

HEX
#F4EFD1
RGB
rgb(244, 239, 209)
HSL
hsl(51, 61%, 89%)
HSB
hsb(51, 14%, 96%)
CMYK
cmyk(0%, 2%, 14%, 4%)
Oklch
oklch(94.8% 0.040 99.3)

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

#CACEBB

Willow Green · Silver · Apple Green

HEX
#CACEBB
RGB
rgb(202, 206, 187)
HSL
hsl(73, 16%, 77%)
HSB
hsb(73, 9%, 81%)
CMYK
cmyk(2%, 0%, 9%, 19%)
Oklch
oklch(84.3% 0.026 116.6)

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

#D3B476

Ginger · BurlyWood · Sunflower

HEX
#D3B476
RGB
rgb(211, 180, 118)
HSL
hsl(40, 51%, 65%)
HSB
hsb(40, 44%, 83%)
CMYK
cmyk(0%, 15%, 44%, 17%)
Oklch
oklch(78.3% 0.088 84.0)

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

#DF8363

Apricot · Salmon · Warm Sun

HEX
#DF8363
RGB
rgb(223, 131, 99)
HSL
hsl(15, 66%, 63%)
HSB
hsb(15, 56%, 87%)
CMYK
cmyk(0%, 41%, 56%, 13%)
Oklch
oklch(70.2% 0.122 39.8)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#68646A

Ink Gray · DimGray · Charcoal

HEX
#68646A
RGB
rgb(104, 100, 106)
HSL
hsl(280, 3%, 40%)
HSB
hsb(280, 6%, 42%)
CMYK
cmyk(2%, 6%, 0%, 58%)
Oklch
oklch(50.9% 0.011 314.7)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4EFD1
D2D7F4

Analogous

F4DED2
F4EFD1
E8F4D2

Triadic

F4EFD1
D2F4EF
EFD2F4

Split-Comp.

F4EFD1
D2E8F4
DED2F4

Tetradic

F4EFD1
D2F4DE
D2D7F4
F4D2E8

Contrast Matrix WCAG 2.1 Contrast

F4EFD1
CACEBB
D3B476
DF8363
68646A
—
1.4
Fail
1.7
Fail
2.4
Fail
5.0
AA
1.4
Fail
—
1.2
Fail
1.7
Fail
3.6
AA Large
1.7
Fail
1.2
Fail
—
1.4
Fail
2.9
Fail
2.4
Fail
1.7
Fail
1.4
Fail
—
2.1
Fail
5.0
AA
3.6
AA Large
2.9
Fail
2.1
Fail
—
White BG
1.2Fail
1.6Fail
2.0Fail
2.8Fail
5.8AA
Black BG
18.1AAA
13.1AAA
10.6AAA
7.6AAA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2D8
CCCCC0
C6C585
B7B66B
666669

Deuteranopia

F2F3DA
CCCBC1
C7CA89
BDC36D
676768

Tritanopia

F4DEDF
CAC3C4
D19193
DA7172
686767

Achromatopsia

EDEDED
CBCBCB
B6B6B6
9B9B9B
666666

Shades & Tints Shades & Tints

#F4EFD1

Dark
Light

#CACEBB

Dark
Light

#D3B476

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4efd1;
  --color-2: #cacebb;
  --color-3: #d3b476;
  --color-4: #df8363;
  --color-5: #68646a;
}

SCSS

$color-1: #f4efd1;
$color-2: #cacebb;
$color-3: #d3b476;
$color-4: #df8363;
$color-5: #68646a;

TAILWIND

colors: {
  'brand-1': '#f4efd1',
  'brand-2': '#cacebb',
  'brand-3': '#d3b476',
  'brand-4': '#df8363',
  'brand-5': '#68646a',
}

RGB Array

[244, 239, 209], [202, 206, 187], [211, 180, 118], [223, 131, 99], [104, 100, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4EFD1, #CACEBB, #D3B476, #DF8363, #68646A is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f4efd1; --color-2: #cacebb; --color-3: #d3b476; --color-4: #df8363; --color-5: #68646a. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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