← Back to Editor

#F0E3AA · #D9C779 · #C4C376 · #4BAB8B · #D69D65

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F0E3AA

Goose Yellow · Wheat · Lemon Cream

HEX
#F0E3AA
RGB
rgb(240, 227, 170)
HSL
hsl(49, 70%, 80%)
HSB
hsb(49, 29%, 94%)
CMYK
cmyk(0%, 5%, 29%, 6%)
Oklch
oklch(91.3% 0.075 96.8)

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

#D9C779

Ginger · BurlyWood · Sunflower

HEX
#D9C779
RGB
rgb(217, 199, 121)
HSL
hsl(49, 56%, 66%)
HSB
hsb(49, 44%, 85%)
CMYK
cmyk(0%, 8%, 44%, 15%)
Oklch
oklch(82.8% 0.100 96.7)

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

#C4C376

Fresh Green · Tan · Sunflower

HEX
#C4C376
RGB
rgb(196, 195, 118)
HSL
hsl(59, 40%, 62%)
HSB
hsb(59, 40%, 77%)
CMYK
cmyk(0%, 1%, 40%, 23%)
Oklch
oklch(80.1% 0.099 107.8)

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

#4BAB8B

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#4BAB8B
RGB
rgb(75, 171, 139)
HSL
hsl(160, 39%, 48%)
HSB
hsb(160, 56%, 67%)
CMYK
cmyk(56%, 0%, 19%, 33%)
Oklch
oklch(67.5% 0.103 168.5)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#D69D65

Ginger · DarkSalmon · Warm Sun

HEX
#D69D65
RGB
rgb(214, 157, 101)
HSL
hsl(30, 58%, 62%)
HSB
hsb(30, 53%, 84%)
CMYK
cmyk(0%, 27%, 53%, 16%)
Oklch
oklch(73.8% 0.100 64.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0E3AA
A8B5F0

Analogous

F0BFA8
F0E3AA
D9F0A8

Triadic

F0E3AA
A8F0E3
E3A8F0

Split-Comp.

F0E3AA
A8D9F0
BFA8F0

Tetradic

F0E3AA
A8F0BF
A8B5F0
F0A8D9

Contrast Matrix WCAG 2.1 Contrast

F0E3AA
D9C779
C4C376
4BAB8B
D69D65
—
1.3
Fail
1.4
Fail
2.2
Fail
1.8
Fail
1.3
Fail
—
1.1
Fail
1.7
Fail
1.4
Fail
1.4
Fail
1.1
Fail
—
1.5
Fail
1.3
Fail
2.2
Fail
1.7
Fail
1.5
Fail
—
1.2
Fail
1.8
Fail
1.4
Fail
1.3
Fail
1.2
Fail
—
White BG
1.3Fail
1.7Fail
1.8Fail
2.8Fail
2.4Fail
Black BG
16.3AAA
12.4AAA
11.4AAA
7.5AAA
8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEAB8
D1D18C
C4C489
757593
BDBD73

Deuteranopia

EBECBB
D2D490
C4C48D
6F6895
C1C576

Tritanopia

EFC3C5
D89B9E
C4979B
50999A
D37D80

Achromatopsia

E0E0E0
C3C3C3
BBBBBB
8B8B8B
A8A8A8

Shades & Tints Shades & Tints

#F0E3AA

Dark
Light

#D9C779

Dark
Light

#C4C376

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0e3aa;
  --color-2: #d9c779;
  --color-3: #c4c376;
  --color-4: #4bab8b;
  --color-5: #d69d65;
}

SCSS

$color-1: #f0e3aa;
$color-2: #d9c779;
$color-3: #c4c376;
$color-4: #4bab8b;
$color-5: #d69d65;

TAILWIND

colors: {
  'brand-1': '#f0e3aa',
  'brand-2': '#d9c779',
  'brand-3': '#c4c376',
  'brand-4': '#4bab8b',
  'brand-5': '#d69d65',
}

RGB Array

[240, 227, 170], [217, 199, 121], [196, 195, 118], [75, 171, 139], [214, 157, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0E3AA, #D9C779, #C4C376, #4BAB8B, #D69D65 is ideal for: corporate websites, product showcases, portfolios. 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: #f0e3aa; --color-2: #d9c779; --color-3: #c4c376; --color-4: #4bab8b; --color-5: #d69d65. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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