← Back to Editor

#FF2B6B · #FF0F57 · #BD3960 · #915769 · #63414B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FF2B6B

Dark Violet · DeepPink · Rose Pink

HEX
#FF2B6B
RGB
rgb(255, 43, 107)
HSL
hsl(342, 100%, 58%)
HSB
hsb(342, 83%, 100%)
CMYK
cmyk(0%, 83%, 58%, 0%)
Oklch
oklch(65.3% 0.241 11.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#FF0F57

Dark Violet · Crimson · Rose Pink

HEX
#FF0F57
RGB
rgb(255, 15, 87)
HSL
hsl(342, 100%, 53%)
HSB
hsb(342, 94%, 100%)
CMYK
cmyk(0%, 94%, 66%, 0%)
Oklch
oklch(63.8% 0.251 15.3)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#BD3960

Dark Violet · MediumVioletRed · Camellia

HEX
#BD3960
RGB
rgb(189, 57, 96)
HSL
hsl(342, 54%, 48%)
HSB
hsb(342, 70%, 74%)
CMYK
cmyk(0%, 70%, 49%, 26%)
Oklch
oklch(54.8% 0.170 6.9)

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

#915769

Dark Violet · DimGray · Camellia

HEX
#915769
RGB
rgb(145, 87, 105)
HSL
hsl(341, 25%, 45%)
HSB
hsb(341, 40%, 57%)
CMYK
cmyk(0%, 40%, 28%, 43%)
Oklch
oklch(52.8% 0.080 0.2)

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

#63414B

Dark Violet · DimGray · Camellia

HEX
#63414B
RGB
rgb(99, 65, 75)
HSL
hsl(342, 21%, 32%)
HSB
hsb(342, 34%, 39%)
CMYK
cmyk(0%, 34%, 24%, 61%)
Oklch
oklch(41.7% 0.049 0.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF2B6B
29FFBF

Analogous

FF29D4
FF2B6B
FF5429

Triadic

FF2B6B
69FF29
2969FF

Split-Comp.

FF2B6B
29FF54
29D4FF

Tetradic

FF2B6B
D4FF29
29FFBF
5429FF

Contrast Matrix WCAG 2.1 Contrast

FF2B6B
FF0F57
BD3960
915769
63414B
—
1.1
Fail
1.5
Fail
1.5
Fail
2.4
Fail
1.1
Fail
—
1.4
Fail
1.4
Fail
2.3
Fail
1.5
Fail
1.4
Fail
—
1.0
Fail
1.6
Fail
1.5
Fail
1.4
Fail
1.0
Fail
—
1.6
Fail
2.4
Fail
2.3
Fail
1.6
Fail
1.6
Fail
—
White BG
3.6AA Large
3.8AA Large
5.4AA
5.6AA
8.8AAA
Black BG
5.8AA
5.5AA
3.9AA Large
3.8AA Large
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A15C
979546
848357
787765
545449

Deuteranopia

B0BF58
A5B741
8C9554
7B8064
565948

Tritanopia

F44F4D
F33835
B64F4D
8E6160
614746

Achromatopsia

727272
5F5F5F
656565
6A6A6A
4C4C4C

Shades & Tints Shades & Tints

#FF2B6B

Dark
Light

#FF0F57

Dark
Light

#BD3960

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff2b6b;
  --color-2: #ff0f57;
  --color-3: #bd3960;
  --color-4: #915769;
  --color-5: #63414b;
}

SCSS

$color-1: #ff2b6b;
$color-2: #ff0f57;
$color-3: #bd3960;
$color-4: #915769;
$color-5: #63414b;

TAILWIND

colors: {
  'brand-1': '#ff2b6b',
  'brand-2': '#ff0f57',
  'brand-3': '#bd3960',
  'brand-4': '#915769',
  'brand-5': '#63414b',
}

RGB Array

[255, 43, 107], [255, 15, 87], [189, 57, 96], [145, 87, 105], [99, 65, 75]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF2B6B, #FF0F57, #BD3960, #915769, #63414B 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: #ff2b6b; --color-2: #ff0f57; --color-3: #bd3960; --color-4: #915769; --color-5: #63414b. 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