← Back to Editor

#F24B7A · #615252 · #74B38C · #88B5A6 · #D1C0A5

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

#F24B7A

Rouge · LightCoral · Rose Pink

HEX
#F24B7A
RGB
rgb(242, 75, 122)
HSL
hsl(343, 87%, 62%)
HSB
hsb(343, 69%, 95%)
CMYK
cmyk(0%, 69%, 50%, 5%)
Oklch
oklch(65.9% 0.204 7.9)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#615252

Crimson · DimGray · Charcoal

HEX
#615252
RGB
rgb(97, 82, 82)
HSL
hsl(0, 8%, 35%)
HSB
hsb(0, 15%, 38%)
CMYK
cmyk(0%, 15%, 15%, 62%)
Oklch
oklch(45.4% 0.020 17.9)

Traditional「Crimson」· Paint「Charcoal」· Creative Midnight Shadow

#74B38C

Celadon · DarkSeaGreen · Olive Green

HEX
#74B38C
RGB
rgb(116, 179, 140)
HSL
hsl(143, 29%, 58%)
HSB
hsb(143, 35%, 70%)
CMYK
cmyk(35%, 0%, 22%, 30%)
Oklch
oklch(71.3% 0.087 156.3)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#88B5A6

Jade · DarkSeaGreen · Lake Green

HEX
#88B5A6
RGB
rgb(136, 181, 166)
HSL
hsl(160, 23%, 62%)
HSB
hsb(160, 25%, 71%)
CMYK
cmyk(25%, 0%, 8%, 29%)
Oklch
oklch(73.6% 0.053 172.3)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#D1C0A5

Goose Yellow · Tan · Warm Sun

HEX
#D1C0A5
RGB
rgb(209, 192, 165)
HSL
hsl(37, 32%, 73%)
HSB
hsb(37, 21%, 82%)
CMYK
cmyk(0%, 8%, 21%, 18%)
Oklch
oklch(81.5% 0.041 79.4)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F24B7A
4AF2C3

Analogous

F24ACE
F24B7A
F26E4A

Triadic

F24B7A
7AF24A
4A7AF2

Split-Comp.

F24B7A
4AF26E
4ACEF2

Tetradic

F24B7A
CEF24A
4AF2C3
6E4AF2

Contrast Matrix WCAG 2.1 Contrast

F24B7A
615252
74B38C
88B5A6
D1C0A5
—
2.1
Fail
1.4
Fail
1.5
Fail
1.9
Fail
2.1
Fail
—
3.0
AA Large
3.2
AA Large
4.2
AA Large
1.4
Fail
3.0
AA Large
—
1.1
Fail
1.4
Fail
1.5
Fail
3.2
AA Large
1.1
Fail
—
1.3
Fail
1.9
Fail
4.2
AA Large
1.4
Fail
1.3
Fail
—
White BG
3.5AA Large
7.4AAA
2.5Fail
2.3Fail
1.8Fail
Black BG
6.1AA
2.8Fail
8.6AAA
9.2AAA
11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAA86F
5B5A52
8F9095
9B9CAA
CAC9AC

Deuteranopia

B3C06C
5B5C52
8C8798
9996AB
CBCCAD

Tritanopia

EA6664
605252
779D9F
8AACAD
D0B1B2

Achromatopsia

828282
565656
9C9C9C
A6A6A6
C2C2C2

Shades & Tints Shades & Tints

#F24B7A

Dark
Light

#615252

Dark
Light

#74B38C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f24b7a;
  --color-2: #615252;
  --color-3: #74b38c;
  --color-4: #88b5a6;
  --color-5: #d1c0a5;
}

SCSS

$color-1: #f24b7a;
$color-2: #615252;
$color-3: #74b38c;
$color-4: #88b5a6;
$color-5: #d1c0a5;

TAILWIND

colors: {
  'brand-1': '#f24b7a',
  'brand-2': '#615252',
  'brand-3': '#74b38c',
  'brand-4': '#88b5a6',
  'brand-5': '#d1c0a5',
}

RGB Array

[242, 75, 122], [97, 82, 82], [116, 179, 140], [136, 181, 166], [209, 192, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F24B7A, #615252, #74B38C, #88B5A6, #D1C0A5 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: #f24b7a; --color-2: #615252; --color-3: #74b38c; --color-4: #88b5a6; --color-5: #d1c0a5. 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