← Back to Editor

#33304E · #2A5761 · #407D7D · #FB3257 · #FF7D38

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

#33304E

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#33304E
RGB
rgb(51, 48, 78)
HSL
hsl(246, 24%, 25%)
HSB
hsb(246, 38%, 31%)
CMYK
cmyk(35%, 38%, 0%, 69%)
Oklch
oklch(32.7% 0.053 287.7)

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

#2A5761

Slate Blue · DarkSlateGray · Mint Ice

HEX
#2A5761
RGB
rgb(42, 87, 97)
HSL
hsl(191, 40%, 27%)
HSB
hsb(191, 57%, 38%)
CMYK
cmyk(57%, 10%, 0%, 62%)
Oklch
oklch(42.9% 0.052 214.0)

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

#407D7D

Slate Blue · SeaGreen · Mint Ice

HEX
#407D7D
RGB
rgb(64, 125, 125)
HSL
hsl(180, 32%, 37%)
HSB
hsb(180, 49%, 49%)
CMYK
cmyk(49%, 0%, 0%, 51%)
Oklch
oklch(54.9% 0.063 195.5)

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

#FB3257

Vermilion · Crimson · Passion Red

HEX
#FB3257
RGB
rgb(251, 50, 87)
HSL
hsl(349, 96%, 59%)
HSB
hsb(349, 80%, 98%)
CMYK
cmyk(0%, 80%, 65%, 2%)
Oklch
oklch(64.6% 0.232 17.5)

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

#FF7D38

Apricot · Coral · Warm Sun

HEX
#FF7D38
RGB
rgb(255, 125, 56)
HSL
hsl(21, 100%, 61%)
HSB
hsb(21, 78%, 100%)
CMYK
cmyk(0%, 51%, 78%, 0%)
Oklch
oklch(73.0% 0.177 45.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

33304E
4C4F30

Analogous

303D4F
33304E
43304F

Triadic

33304E
4F3430
304F34

Split-Comp.

33304E
4F4330
3D4F30

Tetradic

33304E
4F303D
4C4F30
304F43

Contrast Matrix WCAG 2.1 Contrast

33304E
2A5761
407D7D
FB3257
FF7D38
—
1.6
Fail
2.7
Fail
3.4
AA Large
4.9
AA
1.6
Fail
—
1.7
Fail
2.2
Fail
3.1
AA Large
2.7
Fail
1.7
Fail
—
1.3
Fail
1.9
Fail
3.4
AA Large
2.2
Fail
1.3
Fail
—
1.4
Fail
4.9
AA
3.1
AA Large
1.9
Fail
1.4
Fail
—
White BG
12.5AAA
8.0AAA
4.7AA
3.7AA Large
2.5Fail
Black BG
1.7Fail
2.6Fail
4.4AA Large
5.7AA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

323247
3D3E5F
5A5B7D
A4A24E
C7C649

Deuteranopia

323245
3B385E
57527D
B0BF4C
CED84D

Tritanopia

334140
2C5D5C
437D7D
F14745
F95659

Achromatopsia

343434
4B4B4B
6B6B6B
727272
9C9C9C

Shades & Tints Shades & Tints

#33304E

Dark
Light

#2A5761

Dark
Light

#407D7D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #33304e;
  --color-2: #2a5761;
  --color-3: #407d7d;
  --color-4: #fb3257;
  --color-5: #ff7d38;
}

SCSS

$color-1: #33304e;
$color-2: #2a5761;
$color-3: #407d7d;
$color-4: #fb3257;
$color-5: #ff7d38;

TAILWIND

colors: {
  'brand-1': '#33304e',
  'brand-2': '#2a5761',
  'brand-3': '#407d7d',
  'brand-4': '#fb3257',
  'brand-5': '#ff7d38',
}

RGB Array

[51, 48, 78], [42, 87, 97], [64, 125, 125], [251, 50, 87], [255, 125, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #33304E, #2A5761, #407D7D, #FB3257, #FF7D38 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: #33304e; --color-2: #2a5761; --color-3: #407d7d; --color-4: #fb3257; --color-5: #ff7d38. 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