← Back to Editor

#FF1A54 · #672B47 · #FF8838 · #007181 · #11363F

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

#FF1A54

Vermilion · Crimson · Passion Red

HEX
#FF1A54
RGB
rgb(255, 26, 84)
HSL
hsl(345, 100%, 55%)
HSB
hsb(345, 90%, 100%)
CMYK
cmyk(0%, 90%, 67%, 0%)
Oklch
oklch(64.1% 0.248 16.7)

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

#672B47

Dark Violet · DarkSlateGray · Camellia

HEX
#672B47
RGB
rgb(103, 43, 71)
HSL
hsl(332, 41%, 29%)
HSB
hsb(332, 58%, 40%)
CMYK
cmyk(0%, 58%, 31%, 60%)
Oklch
oklch(38.2% 0.093 353.2)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#FF8838

Apricot · Coral · Warm Sun

HEX
#FF8838
RGB
rgb(255, 136, 56)
HSL
hsl(24, 100%, 61%)
HSB
hsb(24, 78%, 100%)
CMYK
cmyk(0%, 47%, 78%, 0%)
Oklch
oklch(74.6% 0.170 50.6)

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

#007181

Lake Blue · Teal · Peacock Green

HEX
#007181
RGB
rgb(0, 113, 129)
HSL
hsl(187, 100%, 25%)
HSB
hsb(187, 100%, 51%)
CMYK
cmyk(100%, 12%, 0%, 49%)
Oklch
oklch(50.3% 0.088 211.7)

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

#11363F

Lake Blue · DarkSlateGray · Peacock Green

HEX
#11363F
RGB
rgb(17, 54, 63)
HSL
hsl(192, 58%, 16%)
HSB
hsb(192, 73%, 25%)
CMYK
cmyk(73%, 14%, 0%, 75%)
Oklch
oklch(31.1% 0.044 216.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF1A54
1AFFC6

Analogous

FF1AC6
FF1A54
FF531A

Triadic

FF1A54
53FF1A
1A53FF

Split-Comp.

FF1A54
1AFF53
1AC6FF

Tetradic

FF1A54
C6FF1A
1AFFC6
531AFF

Contrast Matrix WCAG 2.1 Contrast

FF1A54
672B47
FF8838
007181
11363F
—
2.7
Fail
1.6
Fail
1.5
Fail
3.4
AA Large
2.7
Fail
—
4.4
AA Large
1.8
Fail
1.2
Fail
1.6
Fail
4.4
AA Large
—
2.4
Fail
5.4
AA
1.5
Fail
1.8
Fail
2.4
Fail
—
2.3
Fail
3.4
AA Large
1.2
Fail
5.4
AA
2.3
Fail
—
White BG
3.8AA Large
10.4AAA
2.4Fail
5.7AA
12.9AAA
Black BG
5.5AA
2.0Fail
8.8AAA
3.7AA Large
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9A46
4D4C40
CBCA4B
31327D
21213D

Deuteranopia

A9BA43
51553F
D2DB50
2A227C
1F1C3C

Tritanopia

F43B38
643B3A
F95B5E
067A79
133B3B

Achromatopsia

656565
404040
A2A2A2
515151
2C2C2C

Shades & Tints Shades & Tints

#FF1A54

Dark
Light

#672B47

Dark
Light

#FF8838

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff1a54;
  --color-2: #672b47;
  --color-3: #ff8838;
  --color-4: #007181;
  --color-5: #11363f;
}

SCSS

$color-1: #ff1a54;
$color-2: #672b47;
$color-3: #ff8838;
$color-4: #007181;
$color-5: #11363f;

TAILWIND

colors: {
  'brand-1': '#ff1a54',
  'brand-2': '#672b47',
  'brand-3': '#ff8838',
  'brand-4': '#007181',
  'brand-5': '#11363f',
}

RGB Array

[255, 26, 84], [103, 43, 71], [255, 136, 56], [0, 113, 129], [17, 54, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF1A54, #672B47, #FF8838, #007181, #11363F 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: #ff1a54; --color-2: #672b47; --color-3: #ff8838; --color-4: #007181; --color-5: #11363f. 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