#AF755D + #D3A08D + #F2D2BB + #FCE7D2 + #A2A791 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#AF755D

Tangerine · Gray · Warm Sun

HEX

#AF755D

RGB

rgb(175, 117, 93)

HSL

hsl(18, 34%, 53%)

HSB

hsb(18, 47%, 69%)

CMYK

cmyk(0%, 33%, 47%, 31%)

Oklch

oklch(61.7% 0.082 43.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D3A08D

Apricot · Tan · Warm Sun

HEX

#D3A08D

RGB

rgb(211, 160, 141)

HSL

hsl(16, 44%, 69%)

HSB

hsb(16, 33%, 83%)

CMYK

cmyk(0%, 24%, 33%, 17%)

Oklch

oklch(74.9% 0.067 41.4)

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

#F2D2BB

Apricot · Wheat · Peach Orange

HEX

#F2D2BB

RGB

rgb(242, 210, 187)

HSL

hsl(25, 68%, 84%)

HSB

hsb(25, 23%, 95%)

CMYK

cmyk(0%, 13%, 23%, 5%)

Oklch

oklch(88.5% 0.047 57.8)

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

#FCE7D2

Goose Yellow · Bisque · Peach Orange

HEX

#FCE7D2

RGB

rgb(252, 231, 210)

HSL

hsl(30, 88%, 91%)

HSB

hsb(30, 17%, 99%)

CMYK

cmyk(0%, 8%, 17%, 1%)

Oklch

oklch(93.9% 0.036 67.4)

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

#A2A791

Willow Green · DarkGray · Apple Green

HEX

#A2A791

RGB

rgb(162, 167, 145)

HSL

hsl(74, 11%, 61%)

HSB

hsb(74, 13%, 65%)

CMYK

cmyk(3%, 0%, 13%, 35%)

Oklch

oklch(71.8% 0.032 117.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AF755D

5E97B0

Analogous

B05E6F

AF755D

B0A05E

Triadic

AF755D

5EB077

775EB0

Split-Comp.

AF755D

5EB0A0

5E6FB0

Tetradic

AF755D

6FB05E

5E97B0

A05EB0

Contrast Matrix WCAG 2.1 Contrast

AF755D	D3A08D	F2D2BB	FCE7D2	A2A791
—	1.7 Fail	2.7 Fail	3.2 AA Large	1.5 Fail
1.7 Fail	—	1.6 Fail	1.9 Fail	1.1 Fail
2.7 Fail	1.6 Fail	—	1.2 Fail	1.7 Fail
3.2 AA Large	1.9 Fail	1.2 Fail	—	2.1 Fail
1.5 Fail	1.1 Fail	1.7 Fail	2.1 Fail	—

White BG

3.8AA Large

2.3Fail

1.4Fail

1.2Fail

2.5Fail

Black BG

5.5AA

9.2AAA

14.7AAA

17.5AAA

8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

969563

BDBC92

E4E4C1

F3F3D7

A4A496

Deuteranopia

999E64

C0C493

E6E8C2

F4F6D8

A4A498

Tritanopia

AC6768

D09596

F0C5C6

FBDBDC

A29B9B

Achromatopsia

848484

ADADAD

D9D9D9

EBEBEB

A3A3A3

Shades & Tints Shades & Tints

#AF755D

Dark

Light

#D3A08D

Dark

Light

#F2D2BB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #af755d;
  --color-2: #d3a08d;
  --color-3: #f2d2bb;
  --color-4: #fce7d2;
  --color-5: #a2a791;
}

SCSS

$color-1: #af755d;
$color-2: #d3a08d;
$color-3: #f2d2bb;
$color-4: #fce7d2;
$color-5: #a2a791;

TAILWIND

colors: {
  'brand-1': '#af755d',
  'brand-2': '#d3a08d',
  'brand-3': '#f2d2bb',
  'brand-4': '#fce7d2',
  'brand-5': '#a2a791',
}

RGB Array

[175, 117, 93], [211, 160, 141], [242, 210, 187], [252, 231, 210], [162, 167, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AF755D, #D3A08D, #F2D2BB, #FCE7D2, #A2A791 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: #af755d; --color-2: #d3a08d; --color-3: #f2d2bb; --color-4: #fce7d2; --color-5: #a2a791. 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