← Back to Editor

#9FBD84 · #453442 · #263D45 · #614B45 · #86A36A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#9FBD84

Celadon · DarkSeaGreen · Apple Green

HEX
#9FBD84
RGB
rgb(159, 189, 132)
HSL
hsl(92, 30%, 63%)
HSB
hsb(92, 30%, 74%)
CMYK
cmyk(16%, 0%, 30%, 26%)
Oklch
oklch(76.2% 0.085 130.7)

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

#453442

Rose Purple · DarkSlateGray · Eggplant

HEX
#453442
RGB
rgb(69, 52, 66)
HSL
hsl(311, 14%, 24%)
HSB
hsb(311, 25%, 27%)
CMYK
cmyk(0%, 25%, 4%, 73%)
Oklch
oklch(34.9% 0.033 332.4)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#263D45

Slate Blue · DarkSlateGray · Peacock Green

HEX
#263D45
RGB
rgb(38, 61, 69)
HSL
hsl(195, 29%, 21%)
HSB
hsb(195, 45%, 27%)
CMYK
cmyk(45%, 12%, 0%, 73%)
Oklch
oklch(34.4% 0.032 221.8)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#614B45

Crimson · DarkOliveGreen · Wine Red

HEX
#614B45
RGB
rgb(97, 75, 69)
HSL
hsl(13, 17%, 33%)
HSB
hsb(13, 29%, 38%)
CMYK
cmyk(0%, 23%, 29%, 62%)
Oklch
oklch(43.4% 0.032 35.8)

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

#86A36A

Celadon · Gray · Olive Green

HEX
#86A36A
RGB
rgb(134, 163, 106)
HSL
hsl(91, 24%, 53%)
HSB
hsb(91, 35%, 64%)
CMYK
cmyk(18%, 0%, 35%, 36%)
Oklch
oklch(67.9% 0.086 130.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9FBD84
A384BD

Analogous

BBBD84
9FBD84
84BD86

Triadic

9FBD84
849FBD
BD849F

Split-Comp.

9FBD84
8684BD
BD84BB

Tetradic

9FBD84
84BBBD
A384BD
BD8684

Contrast Matrix WCAG 2.1 Contrast

9FBD84
453442
263D45
614B45
86A36A
—
5.5
AA
5.5
AA
3.9
AA Large
1.4
Fail
5.5
AA
—
1.0
Fail
1.4
Fail
4.1
AA Large
5.5
AA
1.0
Fail
—
1.4
Fail
4.1
AA Large
3.9
AA Large
1.4
Fail
1.4
Fail
—
2.9
Fail
1.4
Fail
4.1
AA Large
4.1
AA Large
2.9
Fail
—
White BG
2.1Fail
11.5AAA
11.4AAA
8.1AAA
2.8Fail
Black BG
10.1AAA
1.8Fail
1.8Fail
2.6Fail
7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAC92
3E3D3F
303043
575746
939378

Deuteranopia

AAA895
3F403E
2F2D43
595A47
918F7B

Tritanopia

A09D9F
443C3B
274241
604848
878385

Achromatopsia

AEAEAE
3B3B3B
373737
515151
949494

Shades & Tints Shades & Tints

#9FBD84

Dark
Light

#453442

Dark
Light

#263D45

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9fbd84;
  --color-2: #453442;
  --color-3: #263d45;
  --color-4: #614b45;
  --color-5: #86a36a;
}

SCSS

$color-1: #9fbd84;
$color-2: #453442;
$color-3: #263d45;
$color-4: #614b45;
$color-5: #86a36a;

TAILWIND

colors: {
  'brand-1': '#9fbd84',
  'brand-2': '#453442',
  'brand-3': '#263d45',
  'brand-4': '#614b45',
  'brand-5': '#86a36a',
}

RGB Array

[159, 189, 132], [69, 52, 66], [38, 61, 69], [97, 75, 69], [134, 163, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9FBD84, #453442, #263D45, #614B45, #86A36A is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #9fbd84; --color-2: #453442; --color-3: #263d45; --color-4: #614b45; --color-5: #86a36a. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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