← Back to Editor

#F65B38 · #AE967D · #366165 · #333642 · #211A2B

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 LibraryData Visualization

Color Details Color Details

#F65B38

Vermilion · Tomato · Passion Red

HEX
#F65B38
RGB
rgb(246, 91, 56)
HSL
hsl(11, 91%, 59%)
HSB
hsb(11, 77%, 96%)
CMYK
cmyk(0%, 63%, 77%, 4%)
Oklch
oklch(67.1% 0.197 34.2)

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

#AE967D

Ginger · DarkGray · Warm Sun

HEX
#AE967D
RGB
rgb(174, 150, 125)
HSL
hsl(31, 23%, 59%)
HSB
hsb(31, 28%, 68%)
CMYK
cmyk(0%, 14%, 28%, 32%)
Oklch
oklch(68.8% 0.045 68.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#366165

Slate Blue · DarkSlateGray · Mint Ice

HEX
#366165
RGB
rgb(54, 97, 101)
HSL
hsl(185, 30%, 30%)
HSB
hsb(185, 47%, 40%)
CMYK
cmyk(47%, 4%, 0%, 60%)
Oklch
oklch(46.3% 0.048 203.3)

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

#333642

Indigo · DarkSlateGray · Prussian Blue

HEX
#333642
RGB
rgb(51, 54, 66)
HSL
hsl(228, 13%, 23%)
HSB
hsb(228, 23%, 26%)
CMYK
cmyk(23%, 18%, 0%, 74%)
Oklch
oklch(33.5% 0.022 274.2)

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

#211A2B

Deep Indigo · Black · Dark Purple

HEX
#211A2B
RGB
rgb(33, 26, 43)
HSL
hsl(265, 25%, 14%)
HSB
hsb(265, 40%, 17%)
CMYK
cmyk(23%, 40%, 0%, 83%)
Oklch
oklch(23.4% 0.033 302.8)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F65B38
37D3F6

Analogous

F63774
F65B38
F6B937

Triadic

F65B38
37F65A
5A37F6

Split-Comp.

F65B38
37F6B9
3774F6

Tetradic

F65B38
74F637
37D3F6
B937F6

Contrast Matrix WCAG 2.1 Contrast

F65B38
AE967D
366165
333642
211A2B
—
1.2
Fail
2.1
Fail
3.7
AA Large
5.2
AA
1.2
Fail
—
2.4
Fail
4.3
AA Large
6.0
AA
2.1
Fail
2.4
Fail
—
1.7
Fail
2.4
Fail
3.7
AA Large
4.3
AA Large
1.7
Fail
—
1.4
Fail
5.2
AA
6.0
AA
2.4
Fail
1.4
Fail
—
White BG
3.2AA Large
2.8Fail
6.9AA
12.0AAA
16.8AAA
Black BG
6.5AA
7.5AAA
3.1AA Large
1.7Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B140
A4A383
494964
34343F
1E1E27

Deuteranopia

BCC843
A5A785
464364
34343E
1E1F26

Tritanopia

EE4749
AD8889
386363
333D3C
212423

Achromatopsia

858585
9A9A9A
555555
363636
1E1E1E

Shades & Tints Shades & Tints

#F65B38

Dark
Light

#AE967D

Dark
Light

#366165

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f65b38;
  --color-2: #ae967d;
  --color-3: #366165;
  --color-4: #333642;
  --color-5: #211a2b;
}

SCSS

$color-1: #f65b38;
$color-2: #ae967d;
$color-3: #366165;
$color-4: #333642;
$color-5: #211a2b;

TAILWIND

colors: {
  'brand-1': '#f65b38',
  'brand-2': '#ae967d',
  'brand-3': '#366165',
  'brand-4': '#333642',
  'brand-5': '#211a2b',
}

RGB Array

[246, 91, 56], [174, 150, 125], [54, 97, 101], [51, 54, 66], [33, 26, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F65B38, #AE967D, #366165, #333642, #211A2B 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: #f65b38; --color-2: #ae967d; --color-3: #366165; --color-4: #333642; --color-5: #211a2b. 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 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