#AFCC1F + #9C8839 + #915054 + #644242 + #363532 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AFCC1F

Grass Green · GreenYellow · Olive Green

HEX

#AFCC1F

RGB

rgb(175, 204, 31)

HSL

hsl(70, 74%, 46%)

HSB

hsb(70, 85%, 80%)

CMYK

cmyk(14%, 0%, 85%, 20%)

Oklch

oklch(79.6% 0.181 119.7)

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

#9C8839

Ochre · DarkGoldenRod · Honey Gold

HEX

#9C8839

RGB

rgb(156, 136, 57)

HSL

hsl(48, 46%, 42%)

HSB

hsb(48, 63%, 61%)

CMYK

cmyk(0%, 13%, 63%, 39%)

Oklch

oklch(62.9% 0.101 95.1)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#915054

Crimson · Sienna · Passion Red

HEX

#915054

RGB

rgb(145, 80, 84)

HSL

hsl(356, 29%, 44%)

HSB

hsb(356, 45%, 57%)

CMYK

cmyk(0%, 45%, 42%, 43%)

Oklch

oklch(50.9% 0.087 16.7)

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

#644242

Crimson · DarkOliveGreen · Wine Red

HEX

#644242

RGB

rgb(100, 66, 66)

HSL

hsl(0, 20%, 33%)

HSB

hsb(0, 34%, 39%)

CMYK

cmyk(0%, 34%, 34%, 61%)

Oklch

oklch(41.8% 0.048 19.3)

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

#363532

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#363532

RGB

rgb(54, 53, 50)

HSL

hsl(45, 4%, 20%)

HSB

hsb(45, 7%, 21%)

CMYK

cmyk(0%, 2%, 7%, 79%)

Oklch

oklch(32.9% 0.005 91.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFCC1F

3B1ECC

Analogous

CC921E

AFCC1F

58CC1E

Triadic

AFCC1F

1EAFCC

CC1EAF

Split-Comp.

AFCC1F

1E58CC

921ECC

Tetradic

AFCC1F

1ECC92

3B1ECC

CC1E58

Contrast Matrix WCAG 2.1 Contrast

AFCC1F	9C8839	915054	644242	363532
—	1.9 Fail	3.3 AA Large	4.8 AA	6.7 AA
1.9 Fail	—	1.7 Fail	2.5 Fail	3.5 AA Large
3.3 AA Large	1.7 Fail	—	1.4 Fail	2.0 Fail
4.8 AA	2.5 Fail	1.4 Fail	—	1.4 Fail
6.7 AA	3.5 AA Large	2.0 Fail	1.4 Fail	—

White BG

1.8Fail

3.5AA Large

6.0AA

8.8AAA

12.3AAA

Black BG

11.5AAA

6.0AA

3.5AA Large

2.4Fail

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBC49

93934C

757453

555542

363633

Deuteranopia

BAB853

959651

797E53

575A42

363633

Tritanopia

B06A71

9B5B5F

8E5252

624242

363333

Achromatopsia

B0B0B0

858585

646464

4C4C4C

353535

Shades & Tints Shades & Tints

#AFCC1F

Dark

Light

#9C8839

Dark

Light

#915054

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afcc1f;
  --color-2: #9c8839;
  --color-3: #915054;
  --color-4: #644242;
  --color-5: #363532;
}

SCSS

$color-1: #afcc1f;
$color-2: #9c8839;
$color-3: #915054;
$color-4: #644242;
$color-5: #363532;

TAILWIND

colors: {
  'brand-1': '#afcc1f',
  'brand-2': '#9c8839',
  'brand-3': '#915054',
  'brand-4': '#644242',
  'brand-5': '#363532',
}

RGB Array

[175, 204, 31], [156, 136, 57], [145, 80, 84], [100, 66, 66], [54, 53, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFCC1F, #9C8839, #915054, #644242, #363532 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: #afcc1f; --color-2: #9c8839; --color-3: #915054; --color-4: #644242; --color-5: #363532. 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