← Back to Editor

#D3B88D · #547CD1 · #436ECA · #4061BE · #354FAC

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D3B88D

Ginger · Tan · Warm Sun

HEX
#D3B88D
RGB
rgb(211, 184, 141)
HSL
hsl(37, 44%, 69%)
HSB
hsb(37, 33%, 83%)
CMYK
cmyk(0%, 13%, 33%, 17%)
Oklch
oklch(79.5% 0.065 79.1)

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

#547CD1

Azure · SteelBlue · Navy Blue

HEX
#547CD1
RGB
rgb(84, 124, 209)
HSL
hsl(221, 58%, 57%)
HSB
hsb(221, 60%, 82%)
CMYK
cmyk(60%, 41%, 0%, 18%)
Oklch
oklch(59.7% 0.138 263.7)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#436ECA

Azure · SteelBlue · Navy Blue

HEX
#436ECA
RGB
rgb(67, 110, 202)
HSL
hsl(221, 56%, 53%)
HSB
hsb(221, 67%, 79%)
CMYK
cmyk(67%, 46%, 0%, 21%)
Oklch
oklch(55.5% 0.151 263.4)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#4061BE

Indigo · SteelBlue · Navy Blue

HEX
#4061BE
RGB
rgb(64, 97, 190)
HSL
hsl(224, 50%, 50%)
HSB
hsb(224, 66%, 75%)
CMYK
cmyk(66%, 49%, 0%, 25%)
Oklch
oklch(51.8% 0.151 266.5)

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

#354FAC

Indigo · DarkSlateBlue · Navy Blue

HEX
#354FAC
RGB
rgb(53, 79, 172)
HSL
hsl(227, 53%, 44%)
HSB
hsb(227, 69%, 67%)
CMYK
cmyk(69%, 54%, 0%, 33%)
Oklch
oklch(46.2% 0.152 268.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3B88D
8DA8D3

Analogous

D3958D
D3B88D
CBD38D

Triadic

D3B88D
8DD3B8
B88DD3

Split-Comp.

D3B88D
8DCBD3
958DD3

Tetradic

D3B88D
8DD395
8DA8D3
D38DCB

Contrast Matrix WCAG 2.1 Contrast

D3B88D
547CD1
436ECA
4061BE
354FAC
—
2.1
Fail
2.5
Fail
3.0
Fail
3.8
AA Large
2.1
Fail
—
1.2
Fail
1.4
Fail
1.8
Fail
2.5
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
3.0
Fail
1.4
Fail
1.2
Fail
—
1.3
Fail
3.8
AA Large
1.8
Fail
1.5
Fail
1.3
Fail
—
White BG
1.9Fail
4.1AA Large
4.9AA
5.7AA
7.3AAA
Black BG
11.0AAA
5.2AA
4.3AA Large
3.7AA Large
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C797
6566BC
5656B4
4E4FA7
404095

Deuteranopia

C9CB9A
6360B7
5350AE
4C4AA2
3F3D90

Tritanopia

D2A0A1
56ACA9
45A29E
429692
368480

Achromatopsia

BBBBBB
7A7A7A
6C6C6C
626262
525252

Shades & Tints Shades & Tints

#D3B88D

Dark
Light

#547CD1

Dark
Light

#436ECA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3b88d;
  --color-2: #547cd1;
  --color-3: #436eca;
  --color-4: #4061be;
  --color-5: #354fac;
}

SCSS

$color-1: #d3b88d;
$color-2: #547cd1;
$color-3: #436eca;
$color-4: #4061be;
$color-5: #354fac;

TAILWIND

colors: {
  'brand-1': '#d3b88d',
  'brand-2': '#547cd1',
  'brand-3': '#436eca',
  'brand-4': '#4061be',
  'brand-5': '#354fac',
}

RGB Array

[211, 184, 141], [84, 124, 209], [67, 110, 202], [64, 97, 190], [53, 79, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D3B88D, #547CD1, #436ECA, #4061BE, #354FAC 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: #d3b88d; --color-2: #547cd1; --color-3: #436eca; --color-4: #4061be; --color-5: #354fac. 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 general-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