#9AAD43 + #CE0A48 + #B23F64 + #882C48 + #63213E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9AAD43

Grass Green · GoldenRod · Olive Green

HEX

#9AAD43

RGB

rgb(154, 173, 67)

HSL

hsl(71, 44%, 47%)

HSB

hsb(71, 61%, 68%)

CMYK

cmyk(11%, 0%, 61%, 32%)

Oklch

oklch(71.1% 0.133 118.5)

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

#CE0A48

Dark Violet · Crimson · Camellia

HEX

#CE0A48

RGB

rgb(206, 10, 72)

HSL

hsl(341, 91%, 42%)

HSB

hsb(341, 95%, 81%)

CMYK

cmyk(0%, 95%, 65%, 19%)

Oklch

oklch(54.4% 0.214 14.1)

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

#B23F64

Dark Violet · MediumVioletRed · Camellia

HEX

#B23F64

RGB

rgb(178, 63, 100)

HSL

hsl(341, 48%, 47%)

HSB

hsb(341, 65%, 70%)

CMYK

cmyk(0%, 65%, 44%, 30%)

Oklch

oklch(53.8% 0.152 3.9)

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

#882C48

Dark Violet · Brown · Camellia

HEX

#882C48

RGB

rgb(136, 44, 72)

HSL

hsl(342, 51%, 35%)

HSB

hsb(342, 68%, 53%)

CMYK

cmyk(0%, 68%, 47%, 47%)

Oklch

oklch(43.8% 0.127 5.4)

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

#63213E

Dark Violet · Brown · Camellia

HEX

#63213E

RGB

rgb(99, 33, 62)

HSL

hsl(334, 50%, 26%)

HSB

hsb(334, 67%, 39%)

CMYK

cmyk(0%, 67%, 37%, 61%)

Oklch

oklch(35.8% 0.100 356.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9AAD43

5643AD

Analogous

AD8B43

9AAD43

65AD43

Triadic

9AAD43

4399AD

AD4399

Split-Comp.

9AAD43

4365AD

8B43AD

Tetradic

9AAD43

43AD8B

5643AD

AD4365

Contrast Matrix WCAG 2.1 Contrast

9AAD43	CE0A48	B23F64	882C48	63213E
—	2.2 Fail	2.2 Fail	3.4 AA Large	4.6 AA
2.2 Fail	—	1.0 Fail	1.5 Fail	2.1 Fail
2.2 Fail	1.0 Fail	—	1.5 Fail	2.1 Fail
3.4 AA Large	1.5 Fail	1.5 Fail	—	1.4 Fail
4.6 AA	2.1 Fail	2.1 Fail	1.4 Fail	—

White BG

2.5Fail

5.6AA

5.5AA

8.4AAA

11.6AAA

Black BG

8.4AAA

3.8AA Large

2.5Fail

1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A25D

797739

807F5B

605F41

464637

Deuteranopia

A1A063

859335

879059

666C40

4A4F35

Tritanopia

9B7175

C42D2B

AC5452

833C3B

603130

Achromatopsia

9B9B9B

4C4C4C

666666

4B4B4B

383838

Shades & Tints Shades & Tints

#9AAD43

Dark

Light

#CE0A48

Dark

Light

#B23F64

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9aad43;
  --color-2: #ce0a48;
  --color-3: #b23f64;
  --color-4: #882c48;
  --color-5: #63213e;
}

SCSS

$color-1: #9aad43;
$color-2: #ce0a48;
$color-3: #b23f64;
$color-4: #882c48;
$color-5: #63213e;

TAILWIND

colors: {
  'brand-1': '#9aad43',
  'brand-2': '#ce0a48',
  'brand-3': '#b23f64',
  'brand-4': '#882c48',
  'brand-5': '#63213e',
}

RGB Array

[154, 173, 67], [206, 10, 72], [178, 63, 100], [136, 44, 72], [99, 33, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9AAD43, #CE0A48, #B23F64, #882C48, #63213E is ideal for: tech websites, dark mode UIs, game UIs. 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: #9aad43; --color-2: #ce0a48; --color-3: #b23f64; --color-4: #882c48; --color-5: #63213e. 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. 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