← Back to Editor

#B9C46E · #C27F3C · #D1323D · #3A3642 · #242026

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 LibraryData Visualization

Color Details Color Details

#B9C46E

Autumn Sage · Tan · Sunflower

HEX
#B9C46E
RGB
rgb(185, 196, 110)
HSL
hsl(68, 42%, 60%)
HSB
hsb(68, 44%, 77%)
CMYK
cmyk(6%, 0%, 44%, 23%)
Oklch
oklch(79.3% 0.111 115.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#C27F3C

Ochre · Chocolate · Amber Brown

HEX
#C27F3C
RGB
rgb(194, 127, 60)
HSL
hsl(30, 53%, 50%)
HSB
hsb(30, 69%, 76%)
CMYK
cmyk(0%, 35%, 69%, 24%)
Oklch
oklch(65.3% 0.117 63.1)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#D1323D

Vermilion · Crimson · Passion Red

HEX
#D1323D
RGB
rgb(209, 50, 61)
HSL
hsl(356, 63%, 51%)
HSB
hsb(356, 76%, 82%)
CMYK
cmyk(0%, 76%, 71%, 18%)
Oklch
oklch(56.9% 0.195 22.7)

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

#3A3642

Deep Indigo · DarkSlateGray · Eggplant

HEX
#3A3642
RGB
rgb(58, 54, 66)
HSL
hsl(260, 10%, 24%)
HSB
hsb(260, 18%, 26%)
CMYK
cmyk(12%, 18%, 0%, 74%)
Oklch
oklch(34.2% 0.021 300.5)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#242026

Dark Plum · Black · Dark Stone

HEX
#242026
RGB
rgb(36, 32, 38)
HSL
hsl(280, 9%, 14%)
HSB
hsb(280, 16%, 15%)
CMYK
cmyk(5%, 16%, 0%, 85%)
Oklch
oklch(25.1% 0.013 314.6)

Traditional「Dark Plum」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B9C46E
7A6EC4

Analogous

C4A46E
B9C46E
8EC46E

Triadic

B9C46E
6EB8C4
C46EB8

Split-Comp.

B9C46E
6E8EC4
A46EC4

Tetradic

B9C46E
6EC4A4
7A6EC4
C46E8E

Contrast Matrix WCAG 2.1 Contrast

B9C46E
C27F3C
D1323D
3A3642
242026
—
1.7
Fail
2.6
Fail
6.3
AA
8.5
AAA
1.7
Fail
—
1.5
Fail
3.6
AA Large
4.9
AA
2.6
Fail
1.5
Fail
—
2.4
Fail
3.2
AA Large
6.3
AA
3.6
AA Large
2.4
Fail
—
1.4
Fail
8.5
AAA
4.9
AA
3.2
AA Large
1.4
Fail
—
White BG
1.9Fail
3.3AA Large
5.0AA
11.8AAA
16.0AAA
Black BG
11.2AAA
6.4AA
4.2AA Large
1.8Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBE83
A5A44C
8C8B3A
38383F
222225

Deuteranopia

BDBC88
A9AE50
95A13A
39393E
232324

Tritanopia

BA9397
BF595C
C93838
3A3D3C
242323

Achromatopsia

B7B7B7
8B8B8B
636363
393939
222222

Shades & Tints Shades & Tints

#B9C46E

Dark
Light

#C27F3C

Dark
Light

#D1323D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b9c46e;
  --color-2: #c27f3c;
  --color-3: #d1323d;
  --color-4: #3a3642;
  --color-5: #242026;
}

SCSS

$color-1: #b9c46e;
$color-2: #c27f3c;
$color-3: #d1323d;
$color-4: #3a3642;
$color-5: #242026;

TAILWIND

colors: {
  'brand-1': '#b9c46e',
  'brand-2': '#c27f3c',
  'brand-3': '#d1323d',
  'brand-4': '#3a3642',
  'brand-5': '#242026',
}

RGB Array

[185, 196, 110], [194, 127, 60], [209, 50, 61], [58, 54, 66], [36, 32, 38]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B9C46E, #C27F3C, #D1323D, #3A3642, #242026 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #b9c46e; --color-2: #c27f3c; --color-3: #d1323d; --color-4: #3a3642; --color-5: #242026. 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 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