← Back to Editor

#F4C679 · #C8B678 · #88A97E · #6AA378 · #B39B6F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F4C679

Goose Yellow · BurlyWood · Warm Sun

HEX
#F4C679
RGB
rgb(244, 198, 121)
HSL
hsl(38, 85%, 72%)
HSB
hsb(38, 50%, 96%)
CMYK
cmyk(0%, 19%, 50%, 4%)
Oklch
oklch(85.1% 0.109 79.4)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#C8B678

Ginger · Tan · Sunflower

HEX
#C8B678
RGB
rgb(200, 182, 120)
HSL
hsl(47, 42%, 63%)
HSB
hsb(47, 40%, 78%)
CMYK
cmyk(0%, 9%, 40%, 22%)
Oklch
oklch(77.7% 0.083 93.8)

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

#88A97E

Celadon · DarkSeaGreen · Olive Green

HEX
#88A97E
RGB
rgb(136, 169, 126)
HSL
hsl(106, 20%, 58%)
HSB
hsb(106, 25%, 66%)
CMYK
cmyk(20%, 0%, 25%, 34%)
Oklch
oklch(69.9% 0.071 138.5)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#6AA378

Celadon · CadetBlue · Olive Green

HEX
#6AA378
RGB
rgb(106, 163, 120)
HSL
hsl(135, 24%, 53%)
HSB
hsb(135, 35%, 64%)
CMYK
cmyk(35%, 0%, 26%, 36%)
Oklch
oklch(66.4% 0.088 151.2)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#B39B6F

Ginger · Tan · Warm Sun

HEX
#B39B6F
RGB
rgb(179, 155, 111)
HSL
hsl(39, 31%, 57%)
HSB
hsb(39, 38%, 70%)
CMYK
cmyk(0%, 13%, 38%, 30%)
Oklch
oklch(70.0% 0.066 82.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4C679
7BA7F4

Analogous

F48B7B
F4C679
E4F47B

Triadic

F4C679
7BF4C8
C87BF4

Split-Comp.

F4C679
7BE4F4
8B7BF4

Tetradic

F4C679
7BF48B
7BA7F4
F47BE4

Contrast Matrix WCAG 2.1 Contrast

F4C679
C8B678
88A97E
6AA378
B39B6F
—
1.3
Fail
1.6
Fail
1.9
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
1.5
Fail
1.3
Fail
1.6
Fail
1.3
Fail
—
1.1
Fail
1.0
Fail
1.9
Fail
1.5
Fail
1.1
Fail
—
1.1
Fail
1.7
Fail
1.3
Fail
1.0
Fail
1.1
Fail
—
White BG
1.6Fail
2.0Fail
2.6Fail
2.9Fail
2.7Fail
Black BG
13.2AAA
10.4AAA
8.0AAA
7.1AAA
7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E08C
C0C087
969788
838382
A9A87A

Deuteranopia

E3E690
C1C38B
94928B
7F7B85
AAAC7C

Tritanopia

F29A9E
C79395
8A9192
6D8B8C
B28284

Achromatopsia

CBCBCB
B4B4B4
9A9A9A
8D8D8D
9D9D9D

Shades & Tints Shades & Tints

#F4C679

Dark
Light

#C8B678

Dark
Light

#88A97E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4c679;
  --color-2: #c8b678;
  --color-3: #88a97e;
  --color-4: #6aa378;
  --color-5: #b39b6f;
}

SCSS

$color-1: #f4c679;
$color-2: #c8b678;
$color-3: #88a97e;
$color-4: #6aa378;
$color-5: #b39b6f;

TAILWIND

colors: {
  'brand-1': '#f4c679',
  'brand-2': '#c8b678',
  'brand-3': '#88a97e',
  'brand-4': '#6aa378',
  'brand-5': '#b39b6f',
}

RGB Array

[244, 198, 121], [200, 182, 120], [136, 169, 126], [106, 163, 120], [179, 155, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4C679, #C8B678, #88A97E, #6AA378, #B39B6F 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: #f4c679; --color-2: #c8b678; --color-3: #88a97e; --color-4: #6aa378; --color-5: #b39b6f. 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