← Back to Editor

#304B3C · #202427 · #6F8B7F · #B4A27C · #D1A77D

pastel

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustrationData Visualization

Color Details Color Details

#304B3C

Celadon · DarkSlateGray · Forest Green

HEX
#304B3C
RGB
rgb(48, 75, 60)
HSL
hsl(147, 22%, 24%)
HSB
hsb(147, 36%, 29%)
CMYK
cmyk(36%, 0%, 20%, 71%)
Oklch
oklch(38.6% 0.042 159.3)

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

#202427

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#202427
RGB
rgb(32, 36, 39)
HSL
hsl(206, 10%, 14%)
HSB
hsb(206, 18%, 15%)
CMYK
cmyk(18%, 8%, 0%, 85%)
Oklch
oklch(25.7% 0.008 240.2)

Traditional「Slate Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#6F8B7F

Mineral Blue · Gray · Olive Green

HEX
#6F8B7F
RGB
rgb(111, 139, 127)
HSL
hsl(154, 11%, 49%)
HSB
hsb(154, 20%, 55%)
CMYK
cmyk(20%, 0%, 9%, 45%)
Oklch
oklch(61.1% 0.037 167.2)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#B4A27C

Ginger · Tan · Sunflower

HEX
#B4A27C
RGB
rgb(180, 162, 124)
HSL
hsl(41, 27%, 60%)
HSB
hsb(41, 31%, 71%)
CMYK
cmyk(0%, 10%, 31%, 29%)
Oklch
oklch(71.8% 0.056 85.5)

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

#D1A77D

Ginger · Tan · Warm Sun

HEX
#D1A77D
RGB
rgb(209, 167, 125)
HSL
hsl(30, 48%, 65%)
HSB
hsb(30, 40%, 82%)
CMYK
cmyk(0%, 20%, 40%, 18%)
Oklch
oklch(75.7% 0.075 66.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

304B3C
4B303F

Analogous

314B30
304B3C
304B49

Triadic

304B3C
3C304B
4B3C30

Split-Comp.

304B3C
49304B
4B3031

Tetradic

304B3C
30314B
4B303F
4B4930

Contrast Matrix WCAG 2.1 Contrast

304B3C
202427
6F8B7F
B4A27C
D1A77D
—
1.6
Fail
2.6
Fail
3.8
AA Large
4.3
AA Large
1.6
Fail
—
4.2
AA Large
6.3
AA
7.1
AAA
2.6
Fail
4.2
AA Large
—
1.5
Fail
1.7
Fail
3.8
AA Large
6.3
AA
1.5
Fail
—
1.1
Fail
4.3
AA Large
7.1
AAA
1.7
Fail
1.1
Fail
—
White BG
9.6AAA
15.6AAA
3.7AA Large
2.5Fail
2.2Fail
Black BG
2.2Fail
1.3Fail
5.7AA
8.4AAA
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3C40
222226
7B7B82
ACAC85
BFBE87

Deuteranopia

3A3841
222126
7A7783
ADAF87
C1C48A

Tritanopia

314243
202626
708485
B38C8E
CF8F91

Achromatopsia

414141
232323
818181
A3A3A3
AFAFAF

Shades & Tints Shades & Tints

#304B3C

Dark
Light

#202427

Dark
Light

#6F8B7F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #304b3c;
  --color-2: #202427;
  --color-3: #6f8b7f;
  --color-4: #b4a27c;
  --color-5: #d1a77d;
}

SCSS

$color-1: #304b3c;
$color-2: #202427;
$color-3: #6f8b7f;
$color-4: #b4a27c;
$color-5: #d1a77d;

TAILWIND

colors: {
  'brand-1': '#304b3c',
  'brand-2': '#202427',
  'brand-3': '#6f8b7f',
  'brand-4': '#b4a27c',
  'brand-5': '#d1a77d',
}

RGB Array

[48, 75, 60], [32, 36, 39], [111, 139, 127], [180, 162, 124], [209, 167, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #304B3C, #202427, #6F8B7F, #B4A27C, #D1A77D is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #304b3c; --color-2: #202427; --color-3: #6f8b7f; --color-4: #b4a27c; --color-5: #d1a77d. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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