#CF3A69 + #8F4254 + #7CAA96 + #B6C474 + #D4D489 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CF3A69

Dark Violet · MediumVioletRed · Rose Pink

HEX

#CF3A69

RGB

rgb(207, 58, 105)

HSL

hsl(341, 61%, 52%)

HSB

hsb(341, 72%, 81%)

CMYK

cmyk(0%, 72%, 49%, 19%)

Oklch

oklch(58.2% 0.187 6.3)

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

#8F4254

Crimson · Sienna · Passion Red

HEX

#8F4254

RGB

rgb(143, 66, 84)

HSL

hsl(346, 37%, 41%)

HSB

hsb(346, 54%, 56%)

CMYK

cmyk(0%, 54%, 41%, 44%)

Oklch

oklch(48.3% 0.106 7.2)

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

#7CAA96

Mineral Blue · DarkSeaGreen · Olive Green

HEX

#7CAA96

RGB

rgb(124, 170, 150)

HSL

hsl(154, 21%, 58%)

HSB

hsb(154, 27%, 67%)

CMYK

cmyk(27%, 0%, 12%, 33%)

Oklch

oklch(69.9% 0.058 166.1)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#B6C474

Willow Green · Tan · Apple Green

HEX

#B6C474

RGB

rgb(182, 196, 116)

HSL

hsl(71, 40%, 61%)

HSB

hsb(71, 41%, 77%)

CMYK

cmyk(7%, 0%, 41%, 23%)

Oklch

oklch(79.1% 0.105 117.0)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D4D489

Fresh Green · BurlyWood · Sunflower

HEX

#D4D489

RGB

rgb(212, 212, 137)

HSL

hsl(60, 47%, 68%)

HSB

hsb(60, 35%, 83%)

CMYK

cmyk(0%, 0%, 35%, 17%)

Oklch

oklch(85.3% 0.096 108.3)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CF3A69

3ACFA0

Analogous

CF3AB4

CF3A69

CF553A

Triadic

CF3A69

69CF3A

3A69CF

Split-Comp.

CF3A69

3ACF55

3AB4CF

Tetradic

CF3A69

B4CF3A

3ACFA0

553ACF

Contrast Matrix WCAG 2.1 Contrast

CF3A69	8F4254	7CAA96	B6C474	D4D489
—	1.5 Fail	1.8 Fail	2.5 Fail	3.0 AA Large
1.5 Fail	—	2.6 Fail	3.6 AA Large	4.4 AA Large
1.8 Fail	2.6 Fail	—	1.4 Fail	1.7 Fail
2.5 Fail	3.6 AA Large	1.4 Fail	—	1.2 Fail
3.0 AA Large	4.4 AA Large	1.7 Fail	1.2 Fail	—

White BG

4.7AA

6.8AA

2.6Fail

1.9Fail

1.5Fail

Black BG

4.5AA Large

3.1AA Large

8.0AAA

11.1AAA

13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8D5E

6E6D50

90909B

BCBC87

D4D49B

Deuteranopia

97A25B

72784F

8D8A9C

BBBA8C

D4D4A0

Tritanopia

C85553

8B4C4B

7E9FA0

B7979A

D4A9AD

Achromatopsia

6C6C6C

5B5B5B

9A9A9A

B7B7B7

CBCBCB

Shades & Tints Shades & Tints

#CF3A69

Dark

Light

#8F4254

Dark

Light

#7CAA96

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cf3a69;
  --color-2: #8f4254;
  --color-3: #7caa96;
  --color-4: #b6c474;
  --color-5: #d4d489;
}

SCSS

$color-1: #cf3a69;
$color-2: #8f4254;
$color-3: #7caa96;
$color-4: #b6c474;
$color-5: #d4d489;

TAILWIND

colors: {
  'brand-1': '#cf3a69',
  'brand-2': '#8f4254',
  'brand-3': '#7caa96',
  'brand-4': '#b6c474',
  'brand-5': '#d4d489',
}

RGB Array

[207, 58, 105], [143, 66, 84], [124, 170, 150], [182, 196, 116], [212, 212, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CF3A69, #8F4254, #7CAA96, #B6C474, #D4D489 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: #cf3a69; --color-2: #8f4254; --color-3: #7caa96; --color-4: #b6c474; --color-5: #d4d489. 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