← Back to Editor

#7D7C76 · #B0796B · #EB7F5B · #E3A36B · #D9C786

pastel

A 5-color pastel palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarm

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#7D7C76

Ink Gray · Gray · Warm Gray

HEX
#7D7C76
RGB
rgb(125, 124, 118)
HSL
hsl(51, 3%, 48%)
HSB
hsb(51, 6%, 49%)
CMYK
cmyk(0%, 1%, 6%, 51%)
Oklch
oklch(58.5% 0.009 99.0)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#B0796B

Crimson · Gray · Passion Red

HEX
#B0796B
RGB
rgb(176, 121, 107)
HSL
hsl(12, 30%, 55%)
HSB
hsb(12, 39%, 69%)
CMYK
cmyk(0%, 31%, 39%, 31%)
Oklch
oklch(62.9% 0.073 34.9)

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

#EB7F5B

Apricot · Coral · Warm Sun

HEX
#EB7F5B
RGB
rgb(235, 127, 91)
HSL
hsl(15, 78%, 64%)
HSB
hsb(15, 61%, 92%)
CMYK
cmyk(0%, 46%, 61%, 8%)
Oklch
oklch(71.0% 0.142 39.0)

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

#E3A36B

Apricot · SandyBrown · Warm Sun

HEX
#E3A36B
RGB
rgb(227, 163, 107)
HSL
hsl(28, 68%, 65%)
HSB
hsb(28, 53%, 89%)
CMYK
cmyk(0%, 28%, 53%, 11%)
Oklch
oklch(76.5% 0.105 61.4)

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

#D9C786

Ginger · BurlyWood · Sunflower

HEX
#D9C786
RGB
rgb(217, 199, 134)
HSL
hsl(47, 52%, 69%)
HSB
hsb(47, 38%, 85%)
CMYK
cmyk(0%, 8%, 38%, 15%)
Oklch
oklch(83.0% 0.086 94.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7D7C76
77787E

Analogous

7E7977
7D7C76
7C7E77

Triadic

7D7C76
777E7D
7D777E

Split-Comp.

7D7C76
777C7E
79777E

Tetradic

7D7C76
777E79
77787E
7E777C

Contrast Matrix WCAG 2.1 Contrast

7D7C76
B0796B
EB7F5B
E3A36B
D9C786
—
1.2
Fail
1.5
Fail
1.9
Fail
2.5
Fail
1.2
Fail
—
1.3
Fail
1.7
Fail
2.2
Fail
1.5
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
1.9
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
2.5
Fail
2.2
Fail
1.6
Fail
1.3
Fail
—
White BG
4.2AA Large
3.6AA Large
2.7Fail
2.2Fail
1.7Fail
Black BG
5.0AA
5.8AA
7.7AAA
9.7AAA
12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7D7D77
98986E
BCBB64
C7C779
D1D196

Deuteranopia

7D7D78
9BA06F
C3CB66
CBD07C
D2D49A

Tritanopia

7D7979
AD7172
E66B6C
E08386
D8A2A5

Achromatopsia

7C7C7C
888888
9B9B9B
B0B0B0
C5C5C5

Shades & Tints Shades & Tints

#7D7C76

Dark
Light

#B0796B

Dark
Light

#EB7F5B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7d7c76;
  --color-2: #b0796b;
  --color-3: #eb7f5b;
  --color-4: #e3a36b;
  --color-5: #d9c786;
}

SCSS

$color-1: #7d7c76;
$color-2: #b0796b;
$color-3: #eb7f5b;
$color-4: #e3a36b;
$color-5: #d9c786;

TAILWIND

colors: {
  'brand-1': '#7d7c76',
  'brand-2': '#b0796b',
  'brand-3': '#eb7f5b',
  'brand-4': '#e3a36b',
  'brand-5': '#d9c786',
}

RGB Array

[125, 124, 118], [176, 121, 107], [235, 127, 91], [227, 163, 107], [217, 199, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #7D7C76, #B0796B, #EB7F5B, #E3A36B, #D9C786 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: #7d7c76; --color-2: #b0796b; --color-3: #eb7f5b; --color-4: #e3a36b; --color-5: #d9c786. 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