#F0D8AE + #C0C09B + #C0A84B + #BF6F2B + #A8486E · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F0D8AE

Goose Yellow · Wheat · Peach Orange

HEX

#F0D8AE

RGB

rgb(240, 216, 174)

HSL

hsl(38, 69%, 81%)

HSB

hsb(38, 27%, 94%)

CMYK

cmyk(0%, 10%, 27%, 6%)

Oklch

oklch(89.2% 0.061 81.5)

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

#C0C09B

Fresh Green · Tan · Sunflower

HEX

#C0C09B

RGB

rgb(192, 192, 155)

HSL

hsl(60, 23%, 68%)

HSB

hsb(60, 19%, 75%)

CMYK

cmyk(0%, 0%, 19%, 25%)

Oklch

oklch(79.8% 0.050 107.5)

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

#C0A84B

Ginger · GoldenRod · Sunflower

HEX

#C0A84B

RGB

rgb(192, 168, 75)

HSL

hsl(48, 48%, 52%)

HSB

hsb(48, 61%, 75%)

CMYK

cmyk(0%, 13%, 61%, 25%)

Oklch

oklch(73.4% 0.116 94.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#BF6F2B

Tangerine · Chocolate · Amber Brown

HEX

#BF6F2B

RGB

rgb(191, 111, 43)

HSL

hsl(28, 63%, 46%)

HSB

hsb(28, 77%, 75%)

CMYK

cmyk(0%, 42%, 77%, 25%)

Oklch

oklch(61.9% 0.129 56.9)

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

#A8486E

Dark Violet · MediumVioletRed · Camellia

HEX

#A8486E

RGB

rgb(168, 72, 110)

HSL

hsl(336, 40%, 47%)

HSB

hsb(336, 57%, 66%)

CMYK

cmyk(0%, 57%, 35%, 34%)

Oklch

oklch(53.8% 0.132 357.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0D8AE

ADC6F0

Analogous

F0B6AD

F0D8AE

E7F0AD

Triadic

F0D8AE

ADF0D7

D7ADF0

Split-Comp.

F0D8AE

ADE7F0

B6ADF0

Tetradic

F0D8AE

ADF0B6

ADC6F0

F0ADE7

Contrast Matrix WCAG 2.1 Contrast

F0D8AE	C0C09B	C0A84B	BF6F2B	A8486E
—	1.3 Fail	1.7 Fail	2.7 Fail	4.0 AA Large
1.3 Fail	—	1.3 Fail	2.0 Fail	2.9 Fail
1.7 Fail	1.3 Fail	—	1.6 Fail	2.3 Fail
2.7 Fail	2.0 Fail	1.6 Fail	—	1.4 Fail
4.0 AA Large	2.9 Fail	2.3 Fail	1.4 Fail	—

White BG

1.4Fail

1.9Fail

2.3Fail

3.8AA Large

5.5AA

Black BG

15.1AAA

11.3AAA

8.9AAA

5.5AA

3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E5B8

C0C0A4

B6B562

9C9C3B

7E7E65

Deuteranopia

E7E9BB

C0C0A6

B7B967

A1A73F

848B63

Tritanopia

EFC0C2

C0ABAD

BF7377

BB484B

A35E5C

Achromatopsia

DADADA

BCBCBC

A5A5A5

7F7F7F

696969

Shades & Tints Shades & Tints

#F0D8AE

Dark

Light

#C0C09B

Dark

Light

#C0A84B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0d8ae;
  --color-2: #c0c09b;
  --color-3: #c0a84b;
  --color-4: #bf6f2b;
  --color-5: #a8486e;
}

SCSS

$color-1: #f0d8ae;
$color-2: #c0c09b;
$color-3: #c0a84b;
$color-4: #bf6f2b;
$color-5: #a8486e;

TAILWIND

colors: {
  'brand-1': '#f0d8ae',
  'brand-2': '#c0c09b',
  'brand-3': '#c0a84b',
  'brand-4': '#bf6f2b',
  'brand-5': '#a8486e',
}

RGB Array

[240, 216, 174], [192, 192, 155], [192, 168, 75], [191, 111, 43], [168, 72, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #F0D8AE, #C0C09B, #C0A84B, #BF6F2B, #A8486E 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: #f0d8ae; --color-2: #c0c09b; --color-3: #c0a84b; --color-4: #bf6f2b; --color-5: #a8486e. 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 summer-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