← Back to Editor

#A8D4BE · #FFFCE0 · #FFB395 · #FFC96B · #827769

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 AppData Visualization

Color Details Color Details

#A8D4BE

Jade · Silver · Apple Green

HEX
#A8D4BE
RGB
rgb(168, 212, 190)
HSL
hsl(150, 34%, 75%)
HSB
hsb(150, 21%, 83%)
CMYK
cmyk(21%, 0%, 10%, 17%)
Oklch
oklch(83.2% 0.055 163.3)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#FFFCE0

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFCE0
RGB
rgb(255, 252, 224)
HSL
hsl(54, 100%, 94%)
HSB
hsb(54, 12%, 100%)
CMYK
cmyk(0%, 1%, 12%, 0%)
Oklch
oklch(98.6% 0.037 102.0)

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

#FFB395

Apricot · LightSalmon · Peach Orange

HEX
#FFB395
RGB
rgb(255, 179, 149)
HSL
hsl(17, 100%, 79%)
HSB
hsb(17, 42%, 100%)
CMYK
cmyk(0%, 30%, 42%, 0%)
Oklch
oklch(83.2% 0.098 42.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FFC96B

Goose Yellow · SandyBrown · Warm Sun

HEX
#FFC96B
RGB
rgb(255, 201, 107)
HSL
hsl(38, 100%, 71%)
HSB
hsb(38, 58%, 100%)
CMYK
cmyk(0%, 21%, 58%, 0%)
Oklch
oklch(86.6% 0.127 79.6)

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

#827769

Ochre · Gray · Amber Brown

HEX
#827769
RGB
rgb(130, 119, 105)
HSL
hsl(34, 11%, 46%)
HSB
hsb(34, 19%, 51%)
CMYK
cmyk(0%, 8%, 19%, 49%)
Oklch
oklch(57.5% 0.025 73.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A8D4BE
D5AABF

Analogous

AAD5AA
A8D4BE
AAD5D5

Triadic

A8D4BE
BFAAD5
D5BFAA

Split-Comp.

A8D4BE
D5AAD5
D5AAAA

Tetradic

A8D4BE
AAAAD5
D5AABF
D5D5AA

Contrast Matrix WCAG 2.1 Contrast

A8D4BE
FFFCE0
FFB395
FFC96B
827769
—
1.6
Fail
1.1
Fail
1.1
Fail
2.7
Fail
1.6
Fail
—
1.7
Fail
1.5
Fail
4.2
AA Large
1.1
Fail
1.7
Fail
—
1.1
Fail
2.5
Fail
1.1
Fail
1.5
Fail
1.1
Fail
—
2.9
Fail
2.7
Fail
4.2
AA Large
2.5
Fail
2.9
Fail
—
White BG
1.6Fail
1.0Fail
1.7Fail
1.5Fail
4.4AA Large
Black BG
12.8AAA
20.3AAA
12.1AAA
13.8AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBBC3
FEFEE7
DEDD9C
E8E782
7D7D6C

Deuteranopia

B9B5C5
FEFEE8
E3E89E
EBEF87
7E7F6D

Tritanopia

AAC8C8
FFECED
FBA2A3
FC9498
816F70

Achromatopsia

C4C4C4
FAFAFA
C6C6C6
CECECE
797979

Shades & Tints Shades & Tints

#A8D4BE

Dark
Light

#FFFCE0

Dark
Light

#FFB395

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a8d4be;
  --color-2: #fffce0;
  --color-3: #ffb395;
  --color-4: #ffc96b;
  --color-5: #827769;
}

SCSS

$color-1: #a8d4be;
$color-2: #fffce0;
$color-3: #ffb395;
$color-4: #ffc96b;
$color-5: #827769;

TAILWIND

colors: {
  'brand-1': '#a8d4be',
  'brand-2': '#fffce0',
  'brand-3': '#ffb395',
  'brand-4': '#ffc96b',
  'brand-5': '#827769',
}

RGB Array

[168, 212, 190], [255, 252, 224], [255, 179, 149], [255, 201, 107], [130, 119, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A8D4BE, #FFFCE0, #FFB395, #FFC96B, #827769 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #a8d4be; --color-2: #fffce0; --color-3: #ffb395; --color-4: #ffc96b; --color-5: #827769. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. High-contrast palettes naturally meet WCAG accessibility standards. 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