← Back to Editor

#BFA67E · #302B24 · #4C3E2C · #C77101 · #B14709

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

#BFA67E

Ginger · Tan · Warm Sun

HEX
#BFA67E
RGB
rgb(191, 166, 126)
HSL
hsl(37, 34%, 62%)
HSB
hsb(37, 34%, 75%)
CMYK
cmyk(0%, 13%, 34%, 25%)
Oklch
oklch(73.7% 0.062 79.2)

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

#302B24

Ochre · DarkSlateGray · Cinnamon

HEX
#302B24
RGB
rgb(48, 43, 36)
HSL
hsl(35, 14%, 16%)
HSB
hsb(35, 25%, 19%)
CMYK
cmyk(0%, 10%, 25%, 81%)
Oklch
oklch(29.2% 0.014 76.3)

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

#4C3E2C

Ochre · DarkOliveGreen · Cinnamon

HEX
#4C3E2C
RGB
rgb(76, 62, 44)
HSL
hsl(34, 27%, 24%)
HSB
hsb(34, 42%, 30%)
CMYK
cmyk(0%, 18%, 42%, 70%)
Oklch
oklch(37.4% 0.035 73.4)

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

#C77101

Ochre · DarkGoldenRod · Amber Brown

HEX
#C77101
RGB
rgb(199, 113, 1)
HSL
hsl(34, 99%, 39%)
HSB
hsb(34, 99%, 78%)
CMYK
cmyk(0%, 43%, 99%, 22%)
Oklch
oklch(63.1% 0.146 61.2)

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

#B14709

Tangerine · Sienna · Amber Brown

HEX
#B14709
RGB
rgb(177, 71, 9)
HSL
hsl(22, 90%, 36%)
HSB
hsb(22, 95%, 69%)
CMYK
cmyk(0%, 60%, 95%, 31%)
Oklch
oklch(53.3% 0.152 43.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFA67E
7D96BF

Analogous

BF857D
BFA67E
B7BF7D

Triadic

BFA67E
7DBFA6
A67DBF

Split-Comp.

BFA67E
7DB7BF
857DBF

Tetradic

BFA67E
7DBF85
7D96BF
BF7DB7

Contrast Matrix WCAG 2.1 Contrast

BFA67E
302B24
4C3E2C
C77101
B14709
—
6.0
AA
4.4
AA Large
1.5
Fail
2.4
Fail
6.0
AA
—
1.4
Fail
3.9
AA Large
2.5
Fail
4.4
AA Large
1.4
Fail
—
2.8
Fail
1.9
Fail
1.5
Fail
3.9
AA Large
2.8
Fail
—
1.5
Fail
2.4
Fail
2.5
Fail
1.9
Fail
1.5
Fail
—
White BG
2.3Fail
14.0AAA
10.3AAA
3.6AA Large
5.6AA
Black BG
9.0AAA
1.5Fail
2.0Fail
5.8AA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B488
2E2E26
464630
A2A11C
838218

Deuteranopia

B6B88A
2E2E26
474831
A7AD23
89911C

Tritanopia

BE8F91
302727
4B3435
C33136
AC2426

Achromatopsia

A9A9A9
2C2C2C
404040
7E7E7E
606060

Shades & Tints Shades & Tints

#BFA67E

Dark
Light

#302B24

Dark
Light

#4C3E2C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfa67e;
  --color-2: #302b24;
  --color-3: #4c3e2c;
  --color-4: #c77101;
  --color-5: #b14709;
}

SCSS

$color-1: #bfa67e;
$color-2: #302b24;
$color-3: #4c3e2c;
$color-4: #c77101;
$color-5: #b14709;

TAILWIND

colors: {
  'brand-1': '#bfa67e',
  'brand-2': '#302b24',
  'brand-3': '#4c3e2c',
  'brand-4': '#c77101',
  'brand-5': '#b14709',
}

RGB Array

[191, 166, 126], [48, 43, 36], [76, 62, 44], [199, 113, 1], [177, 71, 9]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #BFA67E, #302B24, #4C3E2C, #C77101, #B14709 is ideal for: tech websites, dark mode UIs, game UIs, 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: #bfa67e; --color-2: #302b24; --color-3: #4c3e2c; --color-4: #c77101; --color-5: #b14709. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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