#F0DD8F + #EAC298 + #DE8477 + #C2418A + #616A86 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F0DD8F

Goose Yellow · Khaki · Sunflower

HEX

#F0DD8F

RGB

rgb(240, 221, 143)

HSL

hsl(48, 76%, 75%)

HSB

hsb(48, 40%, 94%)

CMYK

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

Oklch

oklch(89.6% 0.100 96.1)

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

#EAC298

Goose Yellow · BurlyWood · Peach Orange

HEX

#EAC298

RGB

rgb(234, 194, 152)

HSL

hsl(31, 66%, 76%)

HSB

hsb(31, 35%, 92%)

CMYK

cmyk(0%, 17%, 35%, 8%)

Oklch

oklch(83.9% 0.072 68.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#DE8477

Peach Pink · LightCoral · Coral Red

HEX

#DE8477

RGB

rgb(222, 132, 119)

HSL

hsl(8, 61%, 67%)

HSB

hsb(8, 46%, 87%)

CMYK

cmyk(0%, 41%, 46%, 13%)

Oklch

oklch(70.6% 0.113 29.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#C2418A

Rose Purple · MediumVioletRed · Rose Pink

HEX

#C2418A

RGB

rgb(194, 65, 138)

HSL

hsl(326, 51%, 51%)

HSB

hsb(326, 66%, 76%)

CMYK

cmyk(0%, 66%, 29%, 24%)

Oklch

oklch(57.9% 0.180 349.3)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#616A86

Indigo · SlateGray · Navy Blue

HEX

#616A86

RGB

rgb(97, 106, 134)

HSL

hsl(225, 16%, 45%)

HSB

hsb(225, 28%, 53%)

CMYK

cmyk(28%, 21%, 0%, 47%)

Oklch

oklch(52.7% 0.046 270.9)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0DD8F

8FA2F0

Analogous

F0AC8F

F0DD8F

D3F08F

Triadic

F0DD8F

8FF0DC

DC8FF0

Split-Comp.

F0DD8F

8FD3F0

AC8FF0

Tetradic

F0DD8F

8FF0AC

8FA2F0

F08FD3

Contrast Matrix WCAG 2.1 Contrast

F0DD8F	EAC298	DE8477	C2418A	616A86
—	1.2 Fail	2.0 Fail	3.5 AA Large	3.9 AA Large
1.2 Fail	—	1.7 Fail	2.9 Fail	3.2 AA Large
2.0 Fail	1.7 Fail	—	1.7 Fail	2.0 Fail
3.5 AA Large	2.9 Fail	1.7 Fail	—	1.1 Fail
3.9 AA Large	3.2 AA Large	2.0 Fail	1.1 Fail	—

White BG

1.4Fail

1.7Fail

2.7Fail

4.8AA

5.4AA

Black BG

15.4AAA

12.7AAA

7.7AAA

4.4AA Large

3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E8A2

D9D8A2

B7B67A

8A8978

65657F

Deuteranopia

E9EAA6

DBDEA5

BCC37B

929B74

64647E

Tritanopia

EFB1B4

E8AAAC

D97D7D

BC6A67

617A79

Achromatopsia

DADADA

C9C9C9

9D9D9D

707070

6B6B6B

Shades & Tints Shades & Tints

#F0DD8F

Dark

Light

#EAC298

Dark

Light

#DE8477

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0dd8f;
  --color-2: #eac298;
  --color-3: #de8477;
  --color-4: #c2418a;
  --color-5: #616a86;
}

SCSS

$color-1: #f0dd8f;
$color-2: #eac298;
$color-3: #de8477;
$color-4: #c2418a;
$color-5: #616a86;

TAILWIND

colors: {
  'brand-1': '#f0dd8f',
  'brand-2': '#eac298',
  'brand-3': '#de8477',
  'brand-4': '#c2418a',
  'brand-5': '#616a86',
}

RGB Array

[240, 221, 143], [234, 194, 152], [222, 132, 119], [194, 65, 138], [97, 106, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0DD8F, #EAC298, #DE8477, #C2418A, #616A86 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: #f0dd8f; --color-2: #eac298; --color-3: #de8477; --color-4: #c2418a; --color-5: #616a86. 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