← Back to Editor

#0099C1 · #395958 · #151F1E · #F3A133 · #DB3B2B

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

#0099C1

Lake Blue · LightSeaGreen · Mint Ice

HEX
#0099C1
RGB
rgb(0, 153, 193)
HSL
hsl(192, 100%, 38%)
HSB
hsb(192, 100%, 76%)
CMYK
cmyk(100%, 21%, 0%, 24%)
Oklch
oklch(63.5% 0.120 224.8)

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

#395958

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#395958
RGB
rgb(57, 89, 88)
HSL
hsl(178, 22%, 29%)
HSB
hsb(178, 36%, 35%)
CMYK
cmyk(36%, 0%, 1%, 65%)
Oklch
oklch(43.9% 0.038 193.4)

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

#151F1E

Mineral Blue · Black · Peacock Green

HEX
#151F1E
RGB
rgb(21, 31, 30)
HSL
hsl(174, 19%, 10%)
HSB
hsb(174, 32%, 12%)
CMYK
cmyk(32%, 0%, 3%, 88%)
Oklch
oklch(22.9% 0.014 188.6)

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

#F3A133

Ginger · GoldenRod · Warm Sun

HEX
#F3A133
RGB
rgb(243, 161, 51)
HSL
hsl(34, 89%, 58%)
HSB
hsb(34, 79%, 95%)
CMYK
cmyk(0%, 34%, 79%, 5%)
Oklch
oklch(77.3% 0.152 68.9)

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

#DB3B2B

Vermilion · Crimson · Passion Red

HEX
#DB3B2B
RGB
rgb(219, 59, 43)
HSL
hsl(5, 71%, 51%)
HSB
hsb(5, 80%, 86%)
CMYK
cmyk(0%, 73%, 80%, 14%)
Oklch
oklch(59.2% 0.199 29.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0099C1
C22700

Analogous

00C288
0099C1
003AC2

Triadic

0099C1
C2009B
9BC200

Split-Comp.

0099C1
C2003A
C28800

Tetradic

0099C1
8800C2
C22700
3AC200

Contrast Matrix WCAG 2.1 Contrast

0099C1
395958
151F1E
F3A133
DB3B2B
—
2.3
Fail
5.1
AA
1.6
Fail
1.4
Fail
2.3
Fail
—
2.2
Fail
3.6
AA Large
1.7
Fail
5.1
AA
2.2
Fail
—
8.0
AAA
3.7
AA Large
1.6
Fail
3.6
AA Large
8.0
AAA
—
2.1
Fail
1.4
Fail
1.7
Fail
3.7
AA Large
2.1
Fail
—
White BG
3.3AA Large
7.7AAA
16.8AAA
2.1Fail
4.5AA Large
Black BG
6.3AA
2.7Fail
1.2Fail
10.0AAA
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4244B7
474758
19191E
CFCF4E
96942F

Deuteranopia

392EB5
454358
19181E
D4DA54
9FAB30

Tritanopia

08B0AE
3B5858
161E1E
EF6367
D33233

Achromatopsia

707070
4F4F4F
1C1C1C
ADADAD
696969

Shades & Tints Shades & Tints

#0099C1

Dark
Light

#395958

Dark
Light

#151F1E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0099c1;
  --color-2: #395958;
  --color-3: #151f1e;
  --color-4: #f3a133;
  --color-5: #db3b2b;
}

SCSS

$color-1: #0099c1;
$color-2: #395958;
$color-3: #151f1e;
$color-4: #f3a133;
$color-5: #db3b2b;

TAILWIND

colors: {
  'brand-1': '#0099c1',
  'brand-2': '#395958',
  'brand-3': '#151f1e',
  'brand-4': '#f3a133',
  'brand-5': '#db3b2b',
}

RGB Array

[0, 153, 193], [57, 89, 88], [21, 31, 30], [243, 161, 51], [219, 59, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0099C1, #395958, #151F1E, #F3A133, #DB3B2B 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: #0099c1; --color-2: #395958; --color-3: #151f1e; --color-4: #f3a133; --color-5: #db3b2b. 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