← Back to Editor

#3A5451 · #515E4C · #F0A258 · #FDB65E · #F6C964

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

#3A5451

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#3A5451
RGB
rgb(58, 84, 81)
HSL
hsl(173, 18%, 28%)
HSB
hsb(173, 31%, 33%)
CMYK
cmyk(31%, 0%, 4%, 67%)
Oklch
oklch(42.4% 0.032 187.1)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#515E4C

Celadon · DarkOliveGreen · Forest Green

HEX
#515E4C
RGB
rgb(81, 94, 76)
HSL
hsl(103, 11%, 33%)
HSB
hsb(103, 19%, 37%)
CMYK
cmyk(14%, 0%, 19%, 63%)
Oklch
oklch(46.5% 0.033 137.0)

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

#F0A258

Apricot · SandyBrown · Warm Sun

HEX
#F0A258
RGB
rgb(240, 162, 88)
HSL
hsl(29, 84%, 64%)
HSB
hsb(29, 63%, 94%)
CMYK
cmyk(0%, 33%, 63%, 6%)
Oklch
oklch(77.5% 0.129 62.4)

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

#FDB65E

Ginger · SandyBrown · Warm Sun

HEX
#FDB65E
RGB
rgb(253, 182, 94)
HSL
hsl(33, 98%, 68%)
HSB
hsb(33, 63%, 99%)
CMYK
cmyk(0%, 28%, 63%, 1%)
Oklch
oklch(82.6% 0.133 70.0)

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

#F6C964

Ginger · SandyBrown · Sunflower

HEX
#F6C964
RGB
rgb(246, 201, 100)
HSL
hsl(42, 89%, 68%)
HSB
hsb(42, 59%, 96%)
CMYK
cmyk(0%, 18%, 59%, 4%)
Oklch
oklch(85.6% 0.129 85.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3A5451
543B3E

Analogous

3B5444
3A5451
3B4A54

Triadic

3A5451
513B54
54513B

Split-Comp.

3A5451
543B4A
54443B

Tetradic

3A5451
443B54
543B3E
4A543B

Contrast Matrix WCAG 2.1 Contrast

3A5451
515E4C
F0A258
FDB65E
F6C964
—
1.2
Fail
3.9
AA Large
4.7
AA
5.2
AA
1.2
Fail
—
3.3
AA Large
3.9
AA Large
4.4
AA Large
3.9
AA Large
3.3
AA Large
—
1.2
Fail
1.3
Fail
4.7
AA
3.9
AA Large
1.2
Fail
—
1.1
Fail
5.2
AA
4.4
AA Large
1.3
Fail
1.1
Fail
—
White BG
8.2AAA
6.9AA
2.1Fail
1.7Fail
1.6Fail
Black BG
2.6Fail
3.1AA Large
10.0AAA
12.0AAA
13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

454552
575750
CECE6A
DEDE73
E3E27C

Deuteranopia

444252
565551
D3D96E
E2E878
E5E982

Tritanopia

3B5252
525455
EC787B
F98488
F49094

Achromatopsia

4C4C4C
585858
B1B1B1
C1C1C1
CBCBCB

Shades & Tints Shades & Tints

#3A5451

Dark
Light

#515E4C

Dark
Light

#F0A258

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3a5451;
  --color-2: #515e4c;
  --color-3: #f0a258;
  --color-4: #fdb65e;
  --color-5: #f6c964;
}

SCSS

$color-1: #3a5451;
$color-2: #515e4c;
$color-3: #f0a258;
$color-4: #fdb65e;
$color-5: #f6c964;

TAILWIND

colors: {
  'brand-1': '#3a5451',
  'brand-2': '#515e4c',
  'brand-3': '#f0a258',
  'brand-4': '#fdb65e',
  'brand-5': '#f6c964',
}

RGB Array

[58, 84, 81], [81, 94, 76], [240, 162, 88], [253, 182, 94], [246, 201, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3A5451, #515E4C, #F0A258, #FDB65E, #F6C964 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: #3a5451; --color-2: #515e4c; --color-3: #f0a258; --color-4: #fdb65e; --color-5: #f6c964. 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