← Back to Editor

#FFF095 · #FCCD89 · #D49979 · #AF7D7C · #7F5E7B

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

#FFF095

Fresh Green · Khaki · Lemon Cream

HEX
#FFF095
RGB
rgb(255, 240, 149)
HSL
hsl(52, 100%, 79%)
HSB
hsb(52, 42%, 100%)
CMYK
cmyk(0%, 6%, 42%, 0%)
Oklch
oklch(94.8% 0.113 100.1)

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

#FCCD89

Goose Yellow · Khaki · Peach Orange

HEX
#FCCD89
RGB
rgb(252, 205, 137)
HSL
hsl(35, 95%, 76%)
HSB
hsb(35, 46%, 99%)
CMYK
cmyk(0%, 19%, 46%, 1%)
Oklch
oklch(87.4% 0.101 76.0)

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

#D49979

Apricot · DarkSalmon · Warm Sun

HEX
#D49979
RGB
rgb(212, 153, 121)
HSL
hsl(21, 51%, 65%)
HSB
hsb(21, 43%, 83%)
CMYK
cmyk(0%, 28%, 43%, 17%)
Oklch
oklch(73.2% 0.084 49.5)

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

#AF7D7C

Crimson · Gray · Passion Red

HEX
#AF7D7C
RGB
rgb(175, 125, 124)
HSL
hsl(1, 24%, 59%)
HSB
hsb(1, 29%, 69%)
CMYK
cmyk(0%, 29%, 29%, 31%)
Oklch
oklch(63.9% 0.063 20.2)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#7F5E7B

Rose Purple · DimGray · Violet

HEX
#7F5E7B
RGB
rgb(127, 94, 123)
HSL
hsl(307, 15%, 43%)
HSB
hsb(307, 26%, 50%)
CMYK
cmyk(0%, 26%, 3%, 50%)
Oklch
oklch(52.6% 0.060 330.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF095
94A2FF

Analogous

FFBB94
FFF095
D8FF94

Triadic

FFF095
94FFF1
F194FF

Split-Comp.

FFF095
94D8FF
BB94FF

Tetradic

FFF095
94FFBB
94A2FF
FF94D8

Contrast Matrix WCAG 2.1 Contrast

FFF095
FCCD89
D49979
AF7D7C
7F5E7B
—
1.3
Fail
2.1
Fail
3.0
AA Large
4.8
AA
1.3
Fail
—
1.6
Fail
2.4
Fail
3.8
AA Large
2.1
Fail
1.6
Fail
—
1.4
Fail
2.3
Fail
3.0
AA Large
2.4
Fail
1.4
Fail
—
1.6
Fail
4.8
AA
3.8
AA Large
2.3
Fail
1.6
Fail
—
White BG
1.2Fail
1.5Fail
2.4Fail
3.5AA Large
5.5AA
Black BG
18.2AAA
14.2AAA
8.6AAA
6.0AA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F8AB
E8E799
BABA81
99997C
717074

Deuteranopia

F9FBB0
EAEE9D
BEC283
9CA07C
737572

Tritanopia

FEBCC0
FAA6A9
D18788
AD7C7C
7D6E6D

Achromatopsia

EAEAEA
D3D3D3
A7A7A7
8C8C8C
6B6B6B

Shades & Tints Shades & Tints

#FFF095

Dark
Light

#FCCD89

Dark
Light

#D49979

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff095;
  --color-2: #fccd89;
  --color-3: #d49979;
  --color-4: #af7d7c;
  --color-5: #7f5e7b;
}

SCSS

$color-1: #fff095;
$color-2: #fccd89;
$color-3: #d49979;
$color-4: #af7d7c;
$color-5: #7f5e7b;

TAILWIND

colors: {
  'brand-1': '#fff095',
  'brand-2': '#fccd89',
  'brand-3': '#d49979',
  'brand-4': '#af7d7c',
  'brand-5': '#7f5e7b',
}

RGB Array

[255, 240, 149], [252, 205, 137], [212, 153, 121], [175, 125, 124], [127, 94, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF095, #FCCD89, #D49979, #AF7D7C, #7F5E7B 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: #fff095; --color-2: #fccd89; --color-3: #d49979; --color-4: #af7d7c; --color-5: #7f5e7b. 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