← Back to Editor

#FE663F · #E9A962 · #577046 · #435E55 · #3F4553

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

#FE663F

Peach Pink · Tomato · Coral Red

HEX
#FE663F
RGB
rgb(254, 102, 63)
HSL
hsl(12, 99%, 62%)
HSB
hsb(12, 75%, 100%)
CMYK
cmyk(0%, 60%, 75%, 0%)
Oklch
oklch(69.8% 0.194 35.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E9A962

Ginger · SandyBrown · Warm Sun

HEX
#E9A962
RGB
rgb(233, 169, 98)
HSL
hsl(32, 75%, 65%)
HSB
hsb(32, 58%, 91%)
CMYK
cmyk(0%, 27%, 58%, 9%)
Oklch
oklch(78.1% 0.116 67.6)

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

#577046

Celadon · DarkOliveGreen · Forest Green

HEX
#577046
RGB
rgb(87, 112, 70)
HSL
hsl(96, 23%, 36%)
HSB
hsb(96, 37%, 44%)
CMYK
cmyk(22%, 0%, 37%, 56%)
Oklch
oklch(51.4% 0.070 133.4)

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

#435E55

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#435E55
RGB
rgb(67, 94, 85)
HSL
hsl(160, 17%, 32%)
HSB
hsb(160, 29%, 37%)
CMYK
cmyk(29%, 0%, 10%, 63%)
Oklch
oklch(45.7% 0.035 172.1)

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

#3F4553

Indigo · DarkSlateGray · Prussian Blue

HEX
#3F4553
RGB
rgb(63, 69, 83)
HSL
hsl(222, 14%, 29%)
HSB
hsb(222, 24%, 33%)
CMYK
cmyk(24%, 17%, 0%, 67%)
Oklch
oklch(39.0% 0.025 266.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FE663F
3ED8FE

Analogous

FE3E78
FE663F
FEC43E

Triadic

FE663F
3EFE65
653EFE

Split-Comp.

FE663F
3EFEC4
3E78FE

Tetradic

FE663F
78FE3E
3ED8FE
C43EFE

Contrast Matrix WCAG 2.1 Contrast

FE663F
E9A962
577046
435E55
3F4553
—
1.4
Fail
1.9
Fail
2.4
Fail
3.3
AA Large
1.4
Fail
—
2.7
Fail
3.5
AA Large
4.7
AA
1.9
Fail
2.7
Fail
—
1.3
Fail
1.7
Fail
2.4
Fail
3.5
AA Large
1.3
Fail
—
1.4
Fail
3.3
AA Large
4.7
AA
1.7
Fail
1.4
Fail
—
White BG
2.9Fail
2.0Fail
5.5AA
7.1AAA
9.6AAA
Black BG
7.2AAA
10.3AAA
3.8AA Large
3.0Fail
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBB48
CDCD73
626250
4F4F57
424250

Deuteranopia

C5D04B
D1D677
605F53
4D4B58
41414F

Tritanopia

F65052
E68184
58585A
445959
3F4D4C

Achromatopsia

8F8F8F
B4B4B4
646464
555555
454545

Shades & Tints Shades & Tints

#FE663F

Dark
Light

#E9A962

Dark
Light

#577046

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fe663f;
  --color-2: #e9a962;
  --color-3: #577046;
  --color-4: #435e55;
  --color-5: #3f4553;
}

SCSS

$color-1: #fe663f;
$color-2: #e9a962;
$color-3: #577046;
$color-4: #435e55;
$color-5: #3f4553;

TAILWIND

colors: {
  'brand-1': '#fe663f',
  'brand-2': '#e9a962',
  'brand-3': '#577046',
  'brand-4': '#435e55',
  'brand-5': '#3f4553',
}

RGB Array

[254, 102, 63], [233, 169, 98], [87, 112, 70], [67, 94, 85], [63, 69, 83]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FE663F, #E9A962, #577046, #435E55, #3F4553 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: #fe663f; --color-2: #e9a962; --color-3: #577046; --color-4: #435e55; --color-5: #3f4553. 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