#AB5F6C + #C45C65 + #A79557 + #F5EEBB + #DBD5D9 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#AB5F6C

Crimson · Gray · Passion Red

HEX

#AB5F6C

RGB

rgb(171, 95, 108)

HSL

hsl(350, 31%, 52%)

HSB

hsb(350, 44%, 67%)

CMYK

cmyk(0%, 44%, 37%, 33%)

Oklch

oklch(57.6% 0.099 9.7)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#C45C65

Crimson · LightCoral · Passion Red

HEX

#C45C65

RGB

rgb(196, 92, 101)

HSL

hsl(355, 47%, 56%)

HSB

hsb(355, 53%, 77%)

CMYK

cmyk(0%, 53%, 48%, 23%)

Oklch

oklch(60.4% 0.133 16.6)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#A79557

Ochre · Gray · Honey Gold

HEX

#A79557

RGB

rgb(167, 149, 87)

HSL

hsl(47, 31%, 50%)

HSB

hsb(47, 48%, 65%)

CMYK

cmyk(0%, 11%, 48%, 35%)

Oklch

oklch(67.2% 0.084 93.7)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#F5EEBB

Fresh Green · Bisque · Lemon Cream

HEX

#F5EEBB

RGB

rgb(245, 238, 187)

HSL

hsl(53, 74%, 85%)

HSB

hsb(53, 24%, 96%)

CMYK

cmyk(0%, 3%, 24%, 4%)

Oklch

oklch(94.2% 0.066 101.0)

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

#DBD5D9

Mauve · LightGray · Pearl Gray

HEX

#DBD5D9

RGB

rgb(219, 213, 217)

HSL

hsl(320, 8%, 85%)

HSB

hsb(320, 3%, 86%)

CMYK

cmyk(0%, 3%, 1%, 14%)

Oklch

oklch(87.9% 0.008 337.5)

Traditional「Mauve」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB5F6C

5FAB9E

Analogous

AB5F91

AB5F6C

AB785F

Triadic

AB5F6C

6BAB5F

5F6BAB

Split-Comp.

AB5F6C

5FAB78

5F91AB

Tetradic

AB5F6C

91AB5F

5FAB9E

785FAB

Contrast Matrix WCAG 2.1 Contrast

AB5F6C	C45C65	A79557	F5EEBB	DBD5D9
—	1.1 Fail	1.5 Fail	3.9 AA Large	3.2 AA Large
1.1 Fail	—	1.4 Fail	3.5 AA Large	2.9 Fail
1.5 Fail	1.4 Fail	—	2.5 Fail	2.1 Fail
3.9 AA Large	3.5 AA Large	2.5 Fail	—	1.2 Fail
3.2 AA Large	2.9 Fail	2.1 Fail	1.2 Fail	—

White BG

4.6AA

4.1AA Large

3.0Fail

1.2Fail

1.4Fail

Black BG

4.6AA

5.1AA

7.1AAA

17.8AAA

14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8969

979663

9F9F66

F2F2C7

D8D8D8

Deuteranopia

8F9468

9DA562

A0A26A

F2F3CA

D9D9D8

Tritanopia

A76666

BF6161

A67274

F5D1D3

DBD7D7

Achromatopsia

777777

7C7C7C

939393

EAEAEA

D7D7D7

Shades & Tints Shades & Tints

#AB5F6C

Dark

Light

#C45C65

Dark

Light

#A79557

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab5f6c;
  --color-2: #c45c65;
  --color-3: #a79557;
  --color-4: #f5eebb;
  --color-5: #dbd5d9;
}

SCSS

$color-1: #ab5f6c;
$color-2: #c45c65;
$color-3: #a79557;
$color-4: #f5eebb;
$color-5: #dbd5d9;

TAILWIND

colors: {
  'brand-1': '#ab5f6c',
  'brand-2': '#c45c65',
  'brand-3': '#a79557',
  'brand-4': '#f5eebb',
  'brand-5': '#dbd5d9',
}

RGB Array

[171, 95, 108], [196, 92, 101], [167, 149, 87], [245, 238, 187], [219, 213, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #AB5F6C, #C45C65, #A79557, #F5EEBB, #DBD5D9 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: #ab5f6c; --color-2: #c45c65; --color-3: #a79557; --color-4: #f5eebb; --color-5: #dbd5d9. 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 nature-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