← Back to Editor

#092E28 · #133946 · #13537C · #864D82 · #F84687

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#092E28

Mineral Blue · Black · Peacock Green

HEX
#092E28
RGB
rgb(9, 46, 40)
HSL
hsl(170, 67%, 11%)
HSB
hsb(170, 80%, 18%)
CMYK
cmyk(80%, 0%, 13%, 82%)
Oklch
oklch(27.3% 0.043 180.0)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#133946

Lake Blue · DarkSlateGray · Peacock Green

HEX
#133946
RGB
rgb(19, 57, 70)
HSL
hsl(195, 57%, 17%)
HSB
hsb(195, 73%, 27%)
CMYK
cmyk(73%, 19%, 0%, 73%)
Oklch
oklch(32.4% 0.048 224.0)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#13537C

Lake Blue · Teal · Prussian Blue

HEX
#13537C
RGB
rgb(19, 83, 124)
HSL
hsl(203, 73%, 28%)
HSB
hsb(203, 85%, 49%)
CMYK
cmyk(85%, 33%, 0%, 51%)
Oklch
oklch(42.5% 0.092 242.6)

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

#864D82

Rose Purple · DimGray · Violet

HEX
#864D82
RGB
rgb(134, 77, 130)
HSL
hsl(304, 27%, 41%)
HSB
hsb(304, 43%, 53%)
CMYK
cmyk(0%, 43%, 3%, 47%)
Oklch
oklch(50.6% 0.106 329.6)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#F84687

Rouge · DeepPink · Rose Pink

HEX
#F84687
RGB
rgb(248, 70, 135)
HSL
hsl(338, 93%, 62%)
HSB
hsb(338, 72%, 97%)
CMYK
cmyk(0%, 72%, 46%, 3%)
Oklch
oklch(66.7% 0.218 3.2)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

092E28
2F0910

Analogous

092F16
092E28
09222F

Triadic

092E28
29092F
2F2909

Split-Comp.

092E28
2F0922
2F1609

Tetradic

092E28
16092F
2F0910
222F09

Contrast Matrix WCAG 2.1 Contrast

092E28
133946
13537C
864D82
F84687
—
1.2
Fail
1.8
Fail
2.4
Fail
4.3
AA Large
1.2
Fail
—
1.5
Fail
2.0
Fail
3.7
AA Large
1.8
Fail
1.5
Fail
—
1.3
Fail
2.4
Fail
2.4
Fail
2.0
Fail
1.3
Fail
—
1.8
Fail
4.3
AA Large
3.7
AA Large
2.4
Fail
1.8
Fail
—
White BG
14.7AAA
12.3AAA
8.2AAA
6.2AA
3.4AA Large
Black BG
1.4Fail
1.7Fail
2.6Fail
3.4AA Large
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

191929
232443
2F2F72
6D6D75
ABA977

Deuteranopia

17142A
211E42
2B2670
717572
B5C374

Tritanopia

0B2B2B
154040
166A69
836B69
EF6B68

Achromatopsia

222222
2F2F2F
454545
646464
838383

Shades & Tints Shades & Tints

#092E28

Dark
Light

#133946

Dark
Light

#13537C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #092e28;
  --color-2: #133946;
  --color-3: #13537c;
  --color-4: #864d82;
  --color-5: #f84687;
}

SCSS

$color-1: #092e28;
$color-2: #133946;
$color-3: #13537c;
$color-4: #864d82;
$color-5: #f84687;

TAILWIND

colors: {
  'brand-1': '#092e28',
  'brand-2': '#133946',
  'brand-3': '#13537c',
  'brand-4': '#864d82',
  'brand-5': '#f84687',
}

RGB Array

[9, 46, 40], [19, 57, 70], [19, 83, 124], [134, 77, 130], [248, 70, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #092E28, #133946, #13537C, #864D82, #F84687 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #092e28; --color-2: #133946; --color-3: #13537c; --color-4: #864d82; --color-5: #f84687. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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