#527070 + #668170 + #D9CA6F + #B6BE71 + #686822 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#527070

Slate Blue · DimGray · Mint Ice

HEX

#527070

RGB

rgb(82, 112, 112)

HSL

hsl(180, 15%, 38%)

HSB

hsb(180, 27%, 44%)

CMYK

cmyk(27%, 0%, 0%, 56%)

Oklch

oklch(52.2% 0.035 196.1)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#668170

Celadon · DimGray · Olive Green

HEX

#668170

RGB

rgb(102, 129, 112)

HSL

hsl(142, 12%, 45%)

HSB

hsb(142, 21%, 51%)

CMYK

cmyk(21%, 0%, 13%, 49%)

Oklch

oklch(57.7% 0.041 157.2)

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

#D9CA6F

Fresh Green · BurlyWood · Sunflower

HEX

#D9CA6F

RGB

rgb(217, 202, 111)

HSL

hsl(52, 58%, 64%)

HSB

hsb(52, 49%, 85%)

CMYK

cmyk(0%, 7%, 49%, 15%)

Oklch

oklch(83.2% 0.114 100.1)

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

#B6BE71

Autumn Sage · Tan · Sunflower

HEX

#B6BE71

RGB

rgb(182, 190, 113)

HSL

hsl(66, 37%, 59%)

HSB

hsb(66, 41%, 75%)

CMYK

cmyk(4%, 0%, 41%, 25%)

Oklch

oklch(77.8% 0.101 113.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#686822

Autumn Sage · DarkOliveGreen · Honey Gold

HEX

#686822

RGB

rgb(104, 104, 34)

HSL

hsl(60, 51%, 27%)

HSB

hsb(60, 67%, 41%)

CMYK

cmyk(0%, 0%, 67%, 59%)

Oklch

oklch(50.3% 0.091 109.3)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

527070

6F5252

Analogous

526F61

527070

52616F

Triadic

527070

6F526F

6F6F52

Split-Comp.

527070

6F5261

6F6152

Tetradic

527070

61526F

6F5252

616F52

Contrast Matrix WCAG 2.1 Contrast

527070	668170	D9CA6F	B6BE71	686822
—	1.3 Fail	3.2 AA Large	2.7 Fail	1.1 Fail
1.3 Fail	—	2.6 Fail	2.1 Fail	1.4 Fail
3.2 AA Large	2.6 Fail	—	1.2 Fail	3.5 AA Large
2.7 Fail	2.1 Fail	1.2 Fail	—	2.9 Fail
1.1 Fail	1.4 Fail	3.5 AA Large	2.9 Fail	—

White BG

5.4AA

4.3AA Large

1.7Fail

2.0Fail

5.8AA

Black BG

3.9AA Large

4.9AA

12.6AAA

10.6AAA

3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F5F70

727274

D3D285

B9BA84

686833

Deuteranopia

5D5B70

706E75

D3D48A

B9B888

686837

Tritanopia

537070

677778

D8969A

B69296

684043

Achromatopsia

676767

777777

C4C4C4

B3B3B3

606060

Shades & Tints Shades & Tints

#527070

Dark

Light

#668170

Dark

Light

#D9CA6F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #527070;
  --color-2: #668170;
  --color-3: #d9ca6f;
  --color-4: #b6be71;
  --color-5: #686822;
}

SCSS

$color-1: #527070;
$color-2: #668170;
$color-3: #d9ca6f;
$color-4: #b6be71;
$color-5: #686822;

TAILWIND

colors: {
  'brand-1': '#527070',
  'brand-2': '#668170',
  'brand-3': '#d9ca6f',
  'brand-4': '#b6be71',
  'brand-5': '#686822',
}

RGB Array

[82, 112, 112], [102, 129, 112], [217, 202, 111], [182, 190, 113], [104, 104, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #527070, #668170, #D9CA6F, #B6BE71, #686822 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: #527070; --color-2: #668170; --color-3: #d9ca6f; --color-4: #b6be71; --color-5: #686822. 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