#8FA189 + #A4B7A1 + #D2C39C + #CCB04F + #D95E23 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarm

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#8FA189

Celadon · DarkSeaGreen · Olive Green

HEX

#8FA189

RGB

rgb(143, 161, 137)

HSL

hsl(105, 11%, 58%)

HSB

hsb(105, 15%, 63%)

CMYK

cmyk(11%, 0%, 15%, 37%)

Oklch

oklch(68.8% 0.040 137.9)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#A4B7A1

Celadon · DarkGray · Apple Green

HEX

#A4B7A1

RGB

rgb(164, 183, 161)

HSL

hsl(112, 13%, 67%)

HSB

hsb(112, 12%, 72%)

CMYK

cmyk(10%, 0%, 12%, 28%)

Oklch

oklch(75.9% 0.037 141.4)

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

#D2C39C

Goose Yellow · Tan · Sunflower

HEX

#D2C39C

RGB

rgb(210, 195, 156)

HSL

hsl(43, 37%, 72%)

HSB

hsb(43, 26%, 82%)

CMYK

cmyk(0%, 7%, 26%, 18%)

Oklch

oklch(82.0% 0.055 89.5)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#CCB04F

Ginger · SandyBrown · Sunflower

HEX

#CCB04F

RGB

rgb(204, 176, 79)

HSL

hsl(47, 55%, 55%)

HSB

hsb(47, 61%, 80%)

CMYK

cmyk(0%, 14%, 61%, 20%)

Oklch

oklch(76.3% 0.120 93.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#D95E23

Tangerine · Chocolate · Amber Brown

HEX

#D95E23

RGB

rgb(217, 94, 35)

HSL

hsl(19, 72%, 49%)

HSB

hsb(19, 84%, 85%)

CMYK

cmyk(0%, 57%, 84%, 15%)

Oklch

oklch(62.9% 0.169 42.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8FA189

9A88A0

Analogous

9AA088

8FA189

88A08E

Triadic

8FA189

888EA0

A0888E

Split-Comp.

8FA189

8E88A0

A0889A

Tetradic

8FA189

889AA0

9A88A0

A08E88

Contrast Matrix WCAG 2.1 Contrast

8FA189	A4B7A1	D2C39C	CCB04F	D95E23
—	1.3 Fail	1.6 Fail	1.3 Fail	1.4 Fail
1.3 Fail	—	1.2 Fail	1.0 Fail	1.8 Fail
1.6 Fail	1.2 Fail	—	1.2 Fail	2.2 Fail
1.3 Fail	1.0 Fail	1.2 Fail	—	1.8 Fail
1.4 Fail	1.8 Fail	2.2 Fail	1.8 Fail	—

White BG

2.8Fail

2.1Fail

1.7Fail

2.1Fail

3.8AA Large

Black BG

7.6AAA

9.9AAA

12.0AAA

9.9AAA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

97978F

ACACA6

CCCBA5

C0C066

A4A331

Deuteranopia

969490

ABAAA8

CCCEA8

C2C46C

ABB435

Tritanopia

909394

A5ABAB

D1ADAF

CB797D

D33D3F

Achromatopsia

999999

AFAFAF

C3C3C3

ADADAD

7C7C7C

Shades & Tints Shades & Tints

#8FA189

Dark

Light

#A4B7A1

Dark

Light

#D2C39C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8fa189;
  --color-2: #a4b7a1;
  --color-3: #d2c39c;
  --color-4: #ccb04f;
  --color-5: #d95e23;
}

SCSS

$color-1: #8fa189;
$color-2: #a4b7a1;
$color-3: #d2c39c;
$color-4: #ccb04f;
$color-5: #d95e23;

TAILWIND

colors: {
  'brand-1': '#8fa189',
  'brand-2': '#a4b7a1',
  'brand-3': '#d2c39c',
  'brand-4': '#ccb04f',
  'brand-5': '#d95e23',
}

RGB Array

[143, 161, 137], [164, 183, 161], [210, 195, 156], [204, 176, 79], [217, 94, 35]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #8FA189, #A4B7A1, #D2C39C, #CCB04F, #D95E23 is ideal for: corporate websites, product showcases, portfolios. 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: #8fa189; --color-2: #a4b7a1; --color-3: #d2c39c; --color-4: #ccb04f; --color-5: #d95e23. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 pastel-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