#283548 + #853B3C + #AB5544 + #B3784C + #D5AB63 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#283548

Indigo · DarkSlateGray · Prussian Blue

HEX

#283548

RGB

rgb(40, 53, 72)

HSL

hsl(216, 29%, 22%)

HSB

hsb(216, 44%, 28%)

CMYK

cmyk(44%, 26%, 0%, 72%)

Oklch

oklch(32.6% 0.038 257.8)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#853B3C

Crimson · Sienna · Wine Red

HEX

#853B3C

RGB

rgb(133, 59, 60)

HSL

hsl(359, 39%, 38%)

HSB

hsb(359, 56%, 52%)

CMYK

cmyk(0%, 56%, 55%, 48%)

Oklch

oklch(45.1% 0.102 21.2)

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

#AB5544

Crimson · Sienna · Passion Red

HEX

#AB5544

RGB

rgb(171, 85, 68)

HSL

hsl(10, 43%, 47%)

HSB

hsb(10, 60%, 67%)

CMYK

cmyk(0%, 50%, 60%, 33%)

Oklch

oklch(55.1% 0.117 32.5)

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

#B3784C

Tangerine · Sienna · Amber Brown

HEX

#B3784C

RGB

rgb(179, 120, 76)

HSL

hsl(26, 40%, 50%)

HSB

hsb(26, 58%, 70%)

CMYK

cmyk(0%, 33%, 58%, 30%)

Oklch

oklch(62.4% 0.095 56.7)

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

#D5AB63

Ginger · SandyBrown · Warm Sun

HEX

#D5AB63

RGB

rgb(213, 171, 99)

HSL

hsl(38, 58%, 61%)

HSB

hsb(38, 54%, 84%)

CMYK

cmyk(0%, 20%, 54%, 16%)

Oklch

oklch(76.4% 0.103 79.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

283548

483B28

Analogous

284548

283548

2B2848

Triadic

283548

482835

354828

Split-Comp.

283548

482B28

454828

Tetradic

283548

482845

483B28

28482B

Contrast Matrix WCAG 2.1 Contrast

283548	853B3C	AB5544	B3784C	D5AB63
—	1.6 Fail	2.4 Fail	3.4 AA Large	5.8 AA
1.6 Fail	—	1.5 Fail	2.1 Fail	3.7 AA Large
2.4 Fail	1.5 Fail	—	1.4 Fail	2.4 Fail
3.4 AA Large	2.1 Fail	1.4 Fail	—	1.7 Fail
5.8 AA	3.7 AA Large	2.4 Fail	1.7 Fail	—

White BG

12.4AAA

7.8AAA

5.1AA

3.7AA Large

2.1Fail

Black BG

1.7Fail

2.7Fail

4.1AA Large

5.7AA

9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E43

65643C

868548

999957

C3C274

Deuteranopia

2D2C42

696F3C

8B9149

9DA159

C5C879

Tritanopia

29403F

813C3C

A74B4C

B05F61

D38285

Achromatopsia

333333

515151

6D6D6D

858585

AFAFAF

Shades & Tints Shades & Tints

#283548

Dark

Light

#853B3C

Dark

Light

#AB5544

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #283548;
  --color-2: #853b3c;
  --color-3: #ab5544;
  --color-4: #b3784c;
  --color-5: #d5ab63;
}

SCSS

$color-1: #283548;
$color-2: #853b3c;
$color-3: #ab5544;
$color-4: #b3784c;
$color-5: #d5ab63;

TAILWIND

colors: {
  'brand-1': '#283548',
  'brand-2': '#853b3c',
  'brand-3': '#ab5544',
  'brand-4': '#b3784c',
  'brand-5': '#d5ab63',
}

RGB Array

[40, 53, 72], [133, 59, 60], [171, 85, 68], [179, 120, 76], [213, 171, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #283548, #853B3C, #AB5544, #B3784C, #D5AB63 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: #283548; --color-2: #853b3c; --color-3: #ab5544; --color-4: #b3784c; --color-5: #d5ab63. 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