#ABA299 + #F5C7B5 + #F6DAE0 + #F4EBF1 + #F9FAF4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ABA299

Ginger · DarkGray · Warm Sun

HEX

#ABA299

RGB

rgb(171, 162, 153)

HSL

hsl(30, 10%, 64%)

HSB

hsb(30, 11%, 67%)

CMYK

cmyk(0%, 5%, 11%, 33%)

Oklch

oklch(71.7% 0.017 67.6)

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

#F5C7B5

Apricot · LightPink · Peach Orange

HEX

#F5C7B5

RGB

rgb(245, 199, 181)

HSL

hsl(17, 76%, 84%)

HSB

hsb(17, 26%, 96%)

CMYK

cmyk(0%, 19%, 26%, 4%)

Oklch

oklch(86.5% 0.058 42.5)

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

#F6DAE0

Peach Pink · Linen · Cherry Blossom

HEX

#F6DAE0

RGB

rgb(246, 218, 224)

HSL

hsl(347, 61%, 91%)

HSB

hsb(347, 11%, 96%)

CMYK

cmyk(0%, 11%, 9%, 4%)

Oklch

oklch(91.3% 0.032 3.2)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#F4EBF1

Mauve · Linen · Cherry Blossom

HEX

#F4EBF1

RGB

rgb(244, 235, 241)

HSL

hsl(320, 29%, 94%)

HSB

hsb(320, 4%, 96%)

CMYK

cmyk(0%, 4%, 1%, 4%)

Oklch

oklch(94.9% 0.012 337.5)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

#F9FAF4

Willow Green · Snow · Mint Green

HEX

#F9FAF4

RGB

rgb(249, 250, 244)

HSL

hsl(70, 37%, 97%)

HSB

hsb(70, 2%, 98%)

CMYK

cmyk(0%, 0%, 2%, 2%)

Oklch

oklch(98.3% 0.008 114.2)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABA299

9AA3AC

Analogous

AC9A9A

ABA299

ACAC9A

Triadic

ABA299

9AACA3

A39AAC

Split-Comp.

ABA299

9AACAC

9A9AAC

Tetradic

ABA299

9AAC9A

9AA3AC

AC9AAC

Contrast Matrix WCAG 2.1 Contrast

ABA299	F5C7B5	F6DAE0	F4EBF1	F9FAF4
—	1.6 Fail	1.9 Fail	2.2 Fail	2.4 Fail
1.6 Fail	—	1.2 Fail	1.3 Fail	1.5 Fail
1.9 Fail	1.2 Fail	—	1.1 Fail	1.2 Fail
2.2 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
2.4 Fail	1.5 Fail	1.2 Fail	1.1 Fail	—

White BG

2.5Fail

1.5Fail

1.3Fail

1.2Fail

1.0Fail

Black BG

8.4AAA

13.7AAA

16.0AAA

18.0AAA

20.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A79B

E1E1B9

EAEADF

F0F0F0

F9F9F5

Deuteranopia

A8A89C

E4E7BA

ECEEDE

F1F1EF

F9F9F6

Tritanopia

AB9D9D

F3BDBE

F5DDDD

F4EEEE

F9F7F7

Achromatopsia

A4A4A4

D3D3D3

E3E3E3

EEEEEE

F9F9F9

Shades & Tints Shades & Tints

#ABA299

Dark

Light

#F5C7B5

Dark

Light

#F6DAE0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aba299;
  --color-2: #f5c7b5;
  --color-3: #f6dae0;
  --color-4: #f4ebf1;
  --color-5: #f9faf4;
}

SCSS

$color-1: #aba299;
$color-2: #f5c7b5;
$color-3: #f6dae0;
$color-4: #f4ebf1;
$color-5: #f9faf4;

TAILWIND

colors: {
  'brand-1': '#aba299',
  'brand-2': '#f5c7b5',
  'brand-3': '#f6dae0',
  'brand-4': '#f4ebf1',
  'brand-5': '#f9faf4',
}

RGB Array

[171, 162, 153], [245, 199, 181], [246, 218, 224], [244, 235, 241], [249, 250, 244]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ABA299, #F5C7B5, #F6DAE0, #F4EBF1, #F9FAF4 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: #aba299; --color-2: #f5c7b5; --color-3: #f6dae0; --color-4: #f4ebf1; --color-5: #f9faf4. 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