← Back to Editor

#302C25 · #997557 · #D4B37F · #F7D092 · #FFE6BD

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 PostIllustrationData Visualization

Color Details Color Details

#302C25

Ochre · DarkSlateGray · Cinnamon

HEX
#302C25
RGB
rgb(48, 44, 37)
HSL
hsl(38, 13%, 17%)
HSB
hsb(38, 23%, 19%)
CMYK
cmyk(0%, 8%, 23%, 81%)
Oklch
oklch(29.5% 0.014 81.7)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#997557

Tangerine · Gray · Amber Brown

HEX
#997557
RGB
rgb(153, 117, 87)
HSL
hsl(27, 27%, 47%)
HSB
hsb(27, 43%, 60%)
CMYK
cmyk(0%, 24%, 43%, 40%)
Oklch
oklch(59.0% 0.062 61.0)

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

#D4B37F

Ginger · Tan · Warm Sun

HEX
#D4B37F
RGB
rgb(212, 179, 127)
HSL
hsl(37, 50%, 66%)
HSB
hsb(37, 40%, 83%)
CMYK
cmyk(0%, 16%, 40%, 17%)
Oklch
oklch(78.4% 0.078 78.6)

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

#F7D092

Goose Yellow · Khaki · Peach Orange

HEX
#F7D092
RGB
rgb(247, 208, 146)
HSL
hsl(37, 86%, 77%)
HSB
hsb(37, 41%, 97%)
CMYK
cmyk(0%, 16%, 41%, 3%)
Oklch
oklch(87.7% 0.090 78.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FFE6BD

Goose Yellow · Bisque · Peach Orange

HEX
#FFE6BD
RGB
rgb(255, 230, 189)
HSL
hsl(37, 100%, 87%)
HSB
hsb(37, 26%, 100%)
CMYK
cmyk(0%, 10%, 26%, 0%)
Oklch
oklch(93.5% 0.060 80.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

302C25
262A31

Analogous

312726
302C25
2F3126

Triadic

302C25
26312D
2D2631

Split-Comp.

302C25
262F31
272631

Tetradic

302C25
263127
262A31
31262F

Contrast Matrix WCAG 2.1 Contrast

302C25
997557
D4B37F
F7D092
FFE6BD
—
3.3
AA Large
7.0
AA
9.5
AAA
11.4
AAA
3.3
AA Large
—
2.1
Fail
2.9
Fail
3.4
AA Large
7.0
AA
2.1
Fail
—
1.4
Fail
1.6
Fail
9.5
AAA
2.9
Fail
1.4
Fail
—
1.2
Fail
11.4
AAA
3.4
AA Large
1.6
Fail
1.2
Fail
—
White BG
13.9AAA
4.2AA Large
2.0Fail
1.5Fail
1.2Fail
Black BG
1.5Fail
5.0AA
10.6AAA
14.4AAA
17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E27
89895E
C6C58C
E6E6A1
F4F4C7

Deuteranopia

2F2F27
8C8E60
C8CA8F
E8EBA5
F6F8C9

Tritanopia

302828
976465
D29698
F5ADAF
FECFD0

Achromatopsia

2C2C2C
7C7C7C
B7B7B7
D5D5D5
E9E9E9

Shades & Tints Shades & Tints

#302C25

Dark
Light

#997557

Dark
Light

#D4B37F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #302c25;
  --color-2: #997557;
  --color-3: #d4b37f;
  --color-4: #f7d092;
  --color-5: #ffe6bd;
}

SCSS

$color-1: #302c25;
$color-2: #997557;
$color-3: #d4b37f;
$color-4: #f7d092;
$color-5: #ffe6bd;

TAILWIND

colors: {
  'brand-1': '#302c25',
  'brand-2': '#997557',
  'brand-3': '#d4b37f',
  'brand-4': '#f7d092',
  'brand-5': '#ffe6bd',
}

RGB Array

[48, 44, 37], [153, 117, 87], [212, 179, 127], [247, 208, 146], [255, 230, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #302C25, #997557, #D4B37F, #F7D092, #FFE6BD is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #302c25; --color-2: #997557; --color-3: #d4b37f; --color-4: #f7d092; --color-5: #ffe6bd. 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. 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