← Back to Editor

#FFA98D · #F4DF9E · #DCD891 · #A4CB92 · #75B897

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFA98D

Apricot · LightSalmon · Peach Orange

HEX
#FFA98D
RGB
rgb(255, 169, 141)
HSL
hsl(15, 100%, 78%)
HSB
hsb(15, 45%, 100%)
CMYK
cmyk(0%, 34%, 45%, 0%)
Oklch
oklch(81.3% 0.109 38.8)

TraditionalApricot」· PaintPeach Orange」· Creative Honey Glow

#F4DF9E

Goose Yellow · Khaki · Lemon Cream

HEX
#F4DF9E
RGB
rgb(244, 223, 158)
HSL
hsl(45, 80%, 79%)
HSB
hsb(45, 35%, 96%)
CMYK
cmyk(0%, 9%, 35%, 4%)
Oklch
oklch(90.6% 0.086 92.3)

TraditionalGoose Yellow」· PaintLemon Cream」· Creative Lemon Fizz

#DCD891

Fresh Green · Khaki · Sunflower

HEX
#DCD891
RGB
rgb(220, 216, 145)
HSL
hsl(57, 52%, 72%)
HSB
hsb(57, 34%, 86%)
CMYK
cmyk(0%, 2%, 34%, 14%)
Oklch
oklch(86.9% 0.091 105.4)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

#A4CB92

Celadon · DarkSeaGreen · Apple Green

HEX
#A4CB92
RGB
rgb(164, 203, 146)
HSL
hsl(101, 35%, 68%)
HSB
hsb(101, 28%, 80%)
CMYK
cmyk(19%, 0%, 28%, 20%)
Oklch
oklch(79.9% 0.088 136.0)

TraditionalCeladon」· PaintApple Green」· Creative Mint Breeze

#75B897

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#75B897
RGB
rgb(117, 184, 151)
HSL
hsl(150, 32%, 59%)
HSB
hsb(150, 36%, 72%)
CMYK
cmyk(36%, 0%, 18%, 28%)
Oklch
oklch(72.8% 0.084 162.0)

TraditionalMineral Blue」· PaintOlive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFA98D
8FE3FF

Analogous

FF8FAB
FFA98D
FFE38F

Triadic

FFA98D
8FFFAB
AB8FFF

Split-Comp.

FFA98D
8FFFE3
8FABFF

Tetradic

FFA98D
ABFF8F
8FE3FF
E38FFF

Contrast Matrix WCAG 2.1 Contrast

FFA98D
F4DF9E
DCD891
A4CB92
75B897
1.4
Fail
1.3
Fail
1.0
Fail
1.2
Fail
1.4
Fail
1.1
Fail
1.4
Fail
1.8
Fail
1.3
Fail
1.1
Fail
1.2
Fail
1.6
Fail
1.0
Fail
1.4
Fail
1.2
Fail
1.3
Fail
1.2
Fail
1.8
Fail
1.6
Fail
1.3
Fail
White BG
1.9Fail
1.3Fail
1.5Fail
1.8Fail
2.3Fail
Black BG
11.3AAA
15.9AAA
14.3AAA
11.5AAA
9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DAD994
EBEBAE
DADAA2
B5B5A0
92939F

Deuteranopia

DFE595
ECEEB2
DBDBA6
B3B0A3
8E89A1

Tritanopia

FB999A
F3BABD
DCB0B3
A6ABAD
78A5A7

Achromatopsia

C0C0C0
DEDEDE
D1D1D1
B9B9B9
A0A0A0

Shades & Tints Shades & Tints

#FFA98D

Dark
Light

#F4DF9E

Dark
Light

#DCD891

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffa98d;
  --color-2: #f4df9e;
  --color-3: #dcd891;
  --color-4: #a4cb92;
  --color-5: #75b897;
}

SCSS

$color-1: #ffa98d;
$color-2: #f4df9e;
$color-3: #dcd891;
$color-4: #a4cb92;
$color-5: #75b897;

TAILWIND

colors: {
  'brand-1': '#ffa98d',
  'brand-2': '#f4df9e',
  'brand-3': '#dcd891',
  'brand-4': '#a4cb92',
  'brand-5': '#75b897',
}

RGB Array

[255, 169, 141], [244, 223, 158], [220, 216, 145], [164, 203, 146], [117, 184, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFA98D, #F4DF9E, #DCD891, #A4CB92, #75B897 is ideal for: health products, baby brands, fresh-style blogs. 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: #ffa98d; --color-2: #f4df9e; --color-3: #dcd891; --color-4: #a4cb92; --color-5: #75b897. 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. 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