← Back to Editor

#FFA778 · #FD9B5E · #FF7D39 · #F56968 · #6A766A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#FFA778

Apricot · LightSalmon · Warm Sun

HEX
#FFA778
RGB
rgb(255, 167, 120)
HSL
hsl(21, 100%, 74%)
HSB
hsb(21, 53%, 100%)
CMYK
cmyk(0%, 35%, 53%, 0%)
Oklch
oklch(80.5% 0.121 48.5)

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

#FD9B5E

Apricot · SandyBrown · Warm Sun

HEX
#FD9B5E
RGB
rgb(253, 155, 94)
HSL
hsl(23, 98%, 68%)
HSB
hsb(23, 63%, 99%)
CMYK
cmyk(0%, 39%, 63%, 1%)
Oklch
oklch(77.9% 0.140 51.3)

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

#FF7D39

Apricot · Coral · Warm Sun

HEX
#FF7D39
RGB
rgb(255, 125, 57)
HSL
hsl(21, 100%, 61%)
HSB
hsb(21, 78%, 100%)
CMYK
cmyk(0%, 51%, 78%, 0%)
Oklch
oklch(73.0% 0.177 45.4)

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

#F56968

Peach Pink · Salmon · Coral Red

HEX
#F56968
RGB
rgb(245, 105, 104)
HSL
hsl(0, 88%, 68%)
HSB
hsb(0, 58%, 96%)
CMYK
cmyk(0%, 57%, 58%, 4%)
Oklch
oklch(69.4% 0.173 23.1)

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

#6A766A

Ink Gray · DimGray · Warm Gray

HEX
#6A766A
RGB
rgb(106, 118, 106)
HSL
hsl(120, 5%, 44%)
HSB
hsb(120, 10%, 46%)
CMYK
cmyk(10%, 0%, 10%, 54%)
Oklch
oklch(55.2% 0.023 145.3)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFA778
7AD1FF

Analogous

FF7A8E
FFA778
FFEB7A

Triadic

FFA778
7AFFA9
A97AFF

Split-Comp.

FFA778
7AFFEB
7A8EFF

Tetradic

FFA778
8EFF7A
7AD1FF
EB7AFF

Contrast Matrix WCAG 2.1 Contrast

FFA778
FD9B5E
FF7D39
F56968
6A766A
—
1.1
Fail
1.3
Fail
1.6
Fail
2.5
Fail
1.1
Fail
—
1.2
Fail
1.4
Fail
2.3
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
1.9
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
1.6
Fail
2.5
Fail
2.3
Fail
1.9
Fail
1.6
Fail
—
White BG
1.9Fail
2.1Fail
2.5Fail
3.0Fail
4.8AA
Black BG
11.1AAA
10.0AAA
8.2AAA
7.1AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D883
D3D26D
C7C649
B8B768
6F6F6D

Deuteranopia

DEE586
D8E070
CED84D
C1CB68
6F6E6E

Tritanopia

FB8C8E
F8787B
F95659
EE6868
6B6F70

Achromatopsia

BCBCBC
B1B1B1
9C9C9C
939393
717171

Shades & Tints Shades & Tints

#FFA778

Dark
Light

#FD9B5E

Dark
Light

#FF7D39

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffa778;
  --color-2: #fd9b5e;
  --color-3: #ff7d39;
  --color-4: #f56968;
  --color-5: #6a766a;
}

SCSS

$color-1: #ffa778;
$color-2: #fd9b5e;
$color-3: #ff7d39;
$color-4: #f56968;
$color-5: #6a766a;

TAILWIND

colors: {
  'brand-1': '#ffa778',
  'brand-2': '#fd9b5e',
  'brand-3': '#ff7d39',
  'brand-4': '#f56968',
  'brand-5': '#6a766a',
}

RGB Array

[255, 167, 120], [253, 155, 94], [255, 125, 57], [245, 105, 104], [106, 118, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFA778, #FD9B5E, #FF7D39, #F56968, #6A766A is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ffa778; --color-2: #fd9b5e; --color-3: #ff7d39; --color-4: #f56968; --color-5: #6a766a. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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