← Back to Editor

#1F6166 · #39274D · #B81C3B · #E06122 · #FFBE1A

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 App

Color Details Color Details

#1F6166

Lake Blue · DarkSlateGray · Mint Ice

HEX
#1F6166
RGB
rgb(31, 97, 102)
HSL
hsl(184, 53%, 26%)
HSB
hsb(184, 70%, 40%)
CMYK
cmyk(70%, 5%, 0%, 60%)
Oklch
oklch(45.4% 0.065 202.3)

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

#39274D

Deep Indigo · DarkSlateGray · Eggplant

HEX
#39274D
RGB
rgb(57, 39, 77)
HSL
hsl(268, 33%, 23%)
HSB
hsb(268, 49%, 30%)
CMYK
cmyk(26%, 49%, 0%, 70%)
Oklch
oklch(31.3% 0.069 304.6)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#B81C3B

Vermilion · FireBrick · Passion Red

HEX
#B81C3B
RGB
rgb(184, 28, 59)
HSL
hsl(348, 74%, 42%)
HSB
hsb(348, 85%, 72%)
CMYK
cmyk(0%, 85%, 68%, 28%)
Oklch
oklch(50.8% 0.187 17.7)

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

#E06122

Tangerine · Chocolate · Warm Sun

HEX
#E06122
RGB
rgb(224, 97, 34)
HSL
hsl(20, 75%, 51%)
HSB
hsb(20, 85%, 88%)
CMYK
cmyk(0%, 57%, 85%, 12%)
Oklch
oklch(64.3% 0.174 43.1)

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

#FFBE1A

Ginger · Orange · Sunflower

HEX
#FFBE1A
RGB
rgb(255, 190, 26)
HSL
hsl(43, 100%, 55%)
HSB
hsb(43, 90%, 100%)
CMYK
cmyk(0%, 25%, 90%, 0%)
Oklch
oklch(83.9% 0.168 82.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1F6166
65241F

Analogous

1F6547
1F6166
1F3E65

Triadic

1F6166
651F61
61651F

Split-Comp.

1F6166
651F3E
65471F

Tetradic

1F6166
471F65
65241F
3E651F

Contrast Matrix WCAG 2.1 Contrast

1F6166
39274D
B81C3B
E06122
FFBE1A
—
1.9
Fail
1.1
Fail
2.0
Fail
4.3
AA Large
1.9
Fail
—
2.1
Fail
3.8
AA Large
8.0
AAA
1.1
Fail
2.1
Fail
—
1.8
Fail
3.9
AA Large
2.0
Fail
3.8
AA Large
1.8
Fail
—
2.1
Fail
4.3
AA Large
8.0
AAA
3.9
AA Large
2.1
Fail
—
White BG
7.1AAA
13.4AAA
6.4AA
3.6AA Large
1.7Fail
Black BG
3.0Fail
1.6Fail
3.3AA Large
5.9AA
12.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3C65
313144
747333
A9A831
E3E242

Deuteranopia

383364
323442
7E8932
B0BA35
E7EC4B

Tritanopia

226464
383D3B
B02E2C
DA3D40
FC6168

Achromatopsia

4E4E4E
313131
4E4E4E
808080
BFBFBF

Shades & Tints Shades & Tints

#1F6166

Dark
Light

#39274D

Dark
Light

#B81C3B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1f6166;
  --color-2: #39274d;
  --color-3: #b81c3b;
  --color-4: #e06122;
  --color-5: #ffbe1a;
}

SCSS

$color-1: #1f6166;
$color-2: #39274d;
$color-3: #b81c3b;
$color-4: #e06122;
$color-5: #ffbe1a;

TAILWIND

colors: {
  'brand-1': '#1f6166',
  'brand-2': '#39274d',
  'brand-3': '#b81c3b',
  'brand-4': '#e06122',
  'brand-5': '#ffbe1a',
}

RGB Array

[31, 97, 102], [57, 39, 77], [184, 28, 59], [224, 97, 34], [255, 190, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1F6166, #39274D, #B81C3B, #E06122, #FFBE1A is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. 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: #1f6166; --color-2: #39274d; --color-3: #b81c3b; --color-4: #e06122; --color-5: #ffbe1a. 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. 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