#F0E67F + #7D7465 + #ADA99C + #C0D3DA + #DAD4BC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F0E67F

Fresh Green · Khaki · Sunflower

HEX

#F0E67F

RGB

rgb(240, 230, 127)

HSL

hsl(55, 79%, 72%)

HSB

hsb(55, 47%, 94%)

CMYK

cmyk(0%, 4%, 47%, 6%)

Oklch

oklch(91.2% 0.125 103.7)

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

#7D7465

Ochre · DimGray · Amber Brown

HEX

#7D7465

RGB

rgb(125, 116, 101)

HSL

hsl(38, 11%, 44%)

HSB

hsb(38, 19%, 49%)

CMYK

cmyk(0%, 7%, 19%, 51%)

Oklch

oklch(56.3% 0.025 80.6)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#ADA99C

Ginger · DarkGray · Silver Sand

HEX

#ADA99C

RGB

rgb(173, 169, 156)

HSL

hsl(46, 9%, 65%)

HSB

hsb(46, 10%, 68%)

CMYK

cmyk(0%, 2%, 10%, 32%)

Oklch

oklch(73.4% 0.019 92.7)

Traditional「Ginger」· Paint「Silver Sand」· Creative Urban Concrete

#C0D3DA

Sky Blue · LightGray · Glacier Blue

HEX

#C0D3DA

RGB

rgb(192, 211, 218)

HSL

hsl(196, 26%, 80%)

HSB

hsb(196, 12%, 85%)

CMYK

cmyk(12%, 3%, 0%, 15%)

Oklch

oklch(85.5% 0.023 221.9)

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

#DAD4BC

Goose Yellow · LightGray · Lemon Cream

HEX

#DAD4BC

RGB

rgb(218, 212, 188)

HSL

hsl(48, 29%, 80%)

HSB

hsb(48, 14%, 85%)

CMYK

cmyk(0%, 3%, 14%, 15%)

Oklch

oklch(86.8% 0.033 95.4)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0E67F

7F89F0

Analogous

F0AE7F

F0E67F

C1F07F

Triadic

F0E67F

7FF0E7

E77FF0

Split-Comp.

F0E67F

7FC1F0

AE7FF0

Tetradic

F0E67F

7FF0AE

7F89F0

F07FC1

Contrast Matrix WCAG 2.1 Contrast

F0E67F	7D7465	ADA99C	C0D3DA	DAD4BC
—	3.6 AA Large	1.8 Fail	1.2 Fail	1.2 Fail
3.6 AA Large	—	2.0 Fail	3.0 Fail	3.1 AA Large
1.8 Fail	2.0 Fail	—	1.5 Fail	1.6 Fail
1.2 Fail	3.0 Fail	1.5 Fail	—	1.0 Fail
1.2 Fail	3.1 AA Large	1.6 Fail	1.0 Fail	—

White BG

1.3Fail

4.6AA

2.4Fail

1.5Fail

Black BG

16.3AAA

4.6AA

8.9AAA

13.6AAA

14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECEC98

797969

ABAB9F

C8C8D8

D7D7C2

Deuteranopia

ECED9E

7A7A69

ACACA0

C7C6D8

D8D8C3

Tritanopia

F0ACB0

7D6B6C

ADA2A2

C1D7D7

DAC6C7

Achromatopsia

DDDDDD

757575

A9A9A9

CECECE

D3D3D3

Shades & Tints Shades & Tints

#F0E67F

Dark

Light

#7D7465

Dark

Light

#ADA99C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0e67f;
  --color-2: #7d7465;
  --color-3: #ada99c;
  --color-4: #c0d3da;
  --color-5: #dad4bc;
}

SCSS

$color-1: #f0e67f;
$color-2: #7d7465;
$color-3: #ada99c;
$color-4: #c0d3da;
$color-5: #dad4bc;

TAILWIND

colors: {
  'brand-1': '#f0e67f',
  'brand-2': '#7d7465',
  'brand-3': '#ada99c',
  'brand-4': '#c0d3da',
  'brand-5': '#dad4bc',
}

RGB Array

[240, 230, 127], [125, 116, 101], [173, 169, 156], [192, 211, 218], [218, 212, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0E67F, #7D7465, #ADA99C, #C0D3DA, #DAD4BC 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: #f0e67f; --color-2: #7d7465; --color-3: #ada99c; --color-4: #c0d3da; --color-5: #dad4bc. 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