← Back to Editor

#45301C · #784525 · #6B6A28 · #569168 · #91A1BE

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

#45301C

Tangerine · DarkSlateGray · Cinnamon

HEX
#45301C
RGB
rgb(69, 48, 28)
HSL
hsl(29, 42%, 19%)
HSB
hsb(29, 59%, 27%)
CMYK
cmyk(0%, 30%, 59%, 73%)
Oklch
oklch(32.8% 0.044 63.9)

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

#784525

Tangerine · Sienna · Amber Brown

HEX
#784525
RGB
rgb(120, 69, 37)
HSL
hsl(23, 53%, 31%)
HSB
hsb(23, 69%, 47%)
CMYK
cmyk(0%, 43%, 69%, 53%)
Oklch
oklch(44.5% 0.084 51.2)

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

#6B6A28

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#6B6A28
RGB
rgb(107, 106, 40)
HSL
hsl(59, 46%, 29%)
HSB
hsb(59, 63%, 42%)
CMYK
cmyk(0%, 1%, 63%, 58%)
Oklch
oklch(51.1% 0.088 108.3)

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

#569168

Celadon · MediumSeaGreen · Olive Green

HEX
#569168
RGB
rgb(86, 145, 104)
HSL
hsl(138, 26%, 45%)
HSB
hsb(138, 41%, 57%)
CMYK
cmyk(41%, 0%, 28%, 43%)
Oklch
oklch(60.5% 0.088 152.8)

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

#91A1BE

Azure · DarkGray · Cobalt Blue

HEX
#91A1BE
RGB
rgb(145, 161, 190)
HSL
hsl(219, 26%, 66%)
HSB
hsb(219, 24%, 75%)
CMYK
cmyk(24%, 15%, 0%, 25%)
Oklch
oklch(70.6% 0.046 262.3)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

45301C
1C3145

Analogous

451C1D
45301C
45441C

Triadic

45301C
1C4530
301C45

Split-Comp.

45301C
1C4544
1C1D45

Tetradic

45301C
1D451C
1C3145
441C45

Contrast Matrix WCAG 2.1 Contrast

45301C
784525
6B6A28
569168
91A1BE
—
1.6
Fail
2.2
Fail
3.3
AA Large
4.8
AA
1.6
Fail
—
1.4
Fail
2.1
Fail
3.0
AA Large
2.2
Fail
1.4
Fail
—
1.5
Fail
2.2
Fail
3.3
AA Large
2.1
Fail
1.5
Fail
—
1.4
Fail
4.8
AA
3.0
AA Large
2.2
Fail
1.4
Fail
—
White BG
12.4AAA
7.8AAA
5.6AA
3.7AA Large
2.6Fail
Black BG
1.7Fail
2.7Fail
3.7AA Large
5.6AA
8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3C21
62612D
6B6B38
707072
9898B7

Deuteranopia

3D3F22
65692F
6B6B3C
6C6874
9796B5

Tritanopia

442526
753334
6B4547
597A7B
92B1B0

Achromatopsia

343434
515151
636363
7B7B7B
A0A0A0

Shades & Tints Shades & Tints

#45301C

Dark
Light

#784525

Dark
Light

#6B6A28

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #45301c;
  --color-2: #784525;
  --color-3: #6b6a28;
  --color-4: #569168;
  --color-5: #91a1be;
}

SCSS

$color-1: #45301c;
$color-2: #784525;
$color-3: #6b6a28;
$color-4: #569168;
$color-5: #91a1be;

TAILWIND

colors: {
  'brand-1': '#45301c',
  'brand-2': '#784525',
  'brand-3': '#6b6a28',
  'brand-4': '#569168',
  'brand-5': '#91a1be',
}

RGB Array

[69, 48, 28], [120, 69, 37], [107, 106, 40], [86, 145, 104], [145, 161, 190]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #45301C, #784525, #6B6A28, #569168, #91A1BE 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: #45301c; --color-2: #784525; --color-3: #6b6a28; --color-4: #569168; --color-5: #91a1be. 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