← Back to Editor

#F7B288 · #F39963 · #7C6E5C · #9E8C6D · #DCD59E

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

#F7B288

Apricot · LightSalmon · Warm Sun

HEX
#F7B288
RGB
rgb(247, 178, 136)
HSL
hsl(23, 87%, 75%)
HSB
hsb(23, 45%, 97%)
CMYK
cmyk(0%, 28%, 45%, 3%)
Oklch
oklch(81.9% 0.098 52.2)

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

#F39963

Apricot · SandyBrown · Warm Sun

HEX
#F39963
RGB
rgb(243, 153, 99)
HSL
hsl(22, 86%, 67%)
HSB
hsb(22, 59%, 95%)
CMYK
cmyk(0%, 37%, 59%, 5%)
Oklch
oklch(76.4% 0.129 50.8)

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

#7C6E5C

Ochre · DimGray · Amber Brown

HEX
#7C6E5C
RGB
rgb(124, 110, 92)
HSL
hsl(34, 15%, 42%)
HSB
hsb(34, 26%, 49%)
CMYK
cmyk(0%, 11%, 26%, 51%)
Oklch
oklch(54.6% 0.032 74.0)

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

#9E8C6D

Ginger · Gray · Warm Sun

HEX
#9E8C6D
RGB
rgb(158, 140, 109)
HSL
hsl(38, 20%, 52%)
HSB
hsb(38, 31%, 62%)
CMYK
cmyk(0%, 11%, 31%, 38%)
Oklch
oklch(64.8% 0.049 81.1)

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

#DCD59E

Fresh Green · Khaki · Sunflower

HEX
#DCD59E
RGB
rgb(220, 213, 158)
HSL
hsl(53, 47%, 74%)
HSB
hsb(53, 28%, 86%)
CMYK
cmyk(0%, 3%, 28%, 14%)
Oklch
oklch(86.5% 0.072 101.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7B288
88CCF7

Analogous

F78895
F7B288
F7EA88

Triadic

F7B288
88F7B2
B288F7

Split-Comp.

F7B288
88F7EA
8895F7

Tetradic

F7B288
95F788
88CCF7
EA88F7

Contrast Matrix WCAG 2.1 Contrast

F7B288
F39963
7C6E5C
9E8C6D
DCD59E
—
1.2
Fail
2.8
Fail
1.8
Fail
1.2
Fail
1.2
Fail
—
2.3
Fail
1.5
Fail
1.5
Fail
2.8
Fail
2.3
Fail
—
1.5
Fail
3.3
AA Large
1.8
Fail
1.5
Fail
1.5
Fail
—
2.2
Fail
1.2
Fail
1.5
Fail
3.3
AA Large
2.2
Fail
—
White BG
1.8Fail
2.2Fail
5.0AA
3.3AA Large
1.5Fail
Black BG
11.7AAA
9.5AAA
4.2AA Large
6.4AA
14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D992
CCCB70
767660
969675
D9D9AB

Deuteranopia

DDE295
D1D873
777861
979976
D9DAAF

Tritanopia

F49A9C
EF7A7D
7B6465
9D7A7C
DCB6B8

Achromatopsia

C2C2C2
AEAEAE
707070
8E8E8E
D1D1D1

Shades & Tints Shades & Tints

#F7B288

Dark
Light

#F39963

Dark
Light

#7C6E5C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7b288;
  --color-2: #f39963;
  --color-3: #7c6e5c;
  --color-4: #9e8c6d;
  --color-5: #dcd59e;
}

SCSS

$color-1: #f7b288;
$color-2: #f39963;
$color-3: #7c6e5c;
$color-4: #9e8c6d;
$color-5: #dcd59e;

TAILWIND

colors: {
  'brand-1': '#f7b288',
  'brand-2': '#f39963',
  'brand-3': '#7c6e5c',
  'brand-4': '#9e8c6d',
  'brand-5': '#dcd59e',
}

RGB Array

[247, 178, 136], [243, 153, 99], [124, 110, 92], [158, 140, 109], [220, 213, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7B288, #F39963, #7C6E5C, #9E8C6D, #DCD59E 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: #f7b288; --color-2: #f39963; --color-3: #7c6e5c; --color-4: #9e8c6d; --color-5: #dcd59e. 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