← Back to Editor

#FF2A9C · #C660C3 · #2DD4CC · #4CE7C7 · #BEB3AF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FF2A9C

Rose Purple · DeepPink · Rose Pink

HEX
#FF2A9C
RGB
rgb(255, 42, 156)
HSL
hsl(328, 100%, 58%)
HSB
hsb(328, 84%, 100%)
CMYK
cmyk(0%, 84%, 39%, 0%)
Oklch
oklch(66.6% 0.254 354.9)

TraditionalRose Purple」· PaintRose Pink」· Creative Blush Sunrise

#C660C3

Rose Purple · MediumOrchid · Violet

HEX
#C660C3
RGB
rgb(198, 96, 195)
HSL
hsl(302, 47%, 58%)
HSB
hsb(302, 52%, 78%)
CMYK
cmyk(0%, 52%, 2%, 22%)
Oklch
oklch(64.7% 0.177 328.5)

TraditionalRose Purple」· PaintViolet」· Creative Blush Sunrise

#2DD4CC

Mineral Blue · Turquoise · Mint Ice

HEX
#2DD4CC
RGB
rgb(45, 212, 204)
HSL
hsl(177, 66%, 50%)
HSB
hsb(177, 79%, 83%)
CMYK
cmyk(79%, 0%, 4%, 17%)
Oklch
oklch(78.9% 0.129 189.8)

TraditionalMineral Blue」· PaintMint Ice」· Creative Blush Sunrise

#4CE7C7

Mineral Blue · Turquoise · Lake Green

HEX
#4CE7C7
RGB
rgb(76, 231, 199)
HSL
hsl(168, 76%, 60%)
HSB
hsb(168, 67%, 91%)
CMYK
cmyk(67%, 0%, 14%, 9%)
Oklch
oklch(83.9% 0.137 176.1)

TraditionalMineral Blue」· PaintLake Green」· Creative Blush Sunrise

#BEB3AF

Apricot · Silver · Warm Sun

HEX
#BEB3AF
RGB
rgb(190, 179, 175)
HSL
hsl(16, 10%, 72%)
HSB
hsb(16, 8%, 75%)
CMYK
cmyk(0%, 6%, 8%, 25%)
Oklch
oklch(77.5% 0.014 41.2)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF2A9C
29FF8D

Analogous

F829FF
FF2A9C
FF2930

Triadic

FF2A9C
9BFF29
299BFF

Split-Comp.

FF2A9C
30FF29
29FFF8

Tetradic

FF2A9C
FFF829
29FF8D
2930FF

Contrast Matrix WCAG 2.1 Contrast

FF2A9C
C660C3
2DD4CC
4CE7C7
BEB3AF
1.0
Fail
1.9
Fail
2.2
Fail
1.7
Fail
1.0
Fail
1.9
Fail
2.3
Fail
1.7
Fail
1.9
Fail
1.9
Fail
1.2
Fail
1.1
Fail
2.2
Fail
2.3
Fail
1.2
Fail
1.3
Fail
1.7
Fail
1.7
Fail
1.1
Fail
1.3
Fail
White BG
3.5AA Large
3.6AA Large
1.8Fail
1.5Fail
2.0Fail
Black BG
6.1AA
5.9AA
11.4AAA
13.6AAA
10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A180
9A99AB
7577CE
8F91CF
B9B9B0

Deuteranopia

AFBF7A
A0A7A5
6C5FCE
867BD1
BABBB0

Tritanopia

F46B66
C19894
35CFD0
54D5D6
BDB1B1

Achromatopsia

777777
8A8A8A
A1A1A1
B5B5B5
B6B6B6

Shades & Tints Shades & Tints

#FF2A9C

Dark
Light

#C660C3

Dark
Light

#2DD4CC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff2a9c;
  --color-2: #c660c3;
  --color-3: #2dd4cc;
  --color-4: #4ce7c7;
  --color-5: #beb3af;
}

SCSS

$color-1: #ff2a9c;
$color-2: #c660c3;
$color-3: #2dd4cc;
$color-4: #4ce7c7;
$color-5: #beb3af;

TAILWIND

colors: {
  'brand-1': '#ff2a9c',
  'brand-2': '#c660c3',
  'brand-3': '#2dd4cc',
  'brand-4': '#4ce7c7',
  'brand-5': '#beb3af',
}

RGB Array

[255, 42, 156], [198, 96, 195], [45, 212, 204], [76, 231, 199], [190, 179, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF2A9C, #C660C3, #2DD4CC, #4CE7C7, #BEB3AF 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: #ff2a9c; --color-2: #c660c3; --color-3: #2dd4cc; --color-4: #4ce7c7; --color-5: #beb3af. 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