#AFC74D + #6A9B3D + #36685C + #3C4558 + #492C12 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#AFC74D

Grass Green · GreenYellow · Olive Green

HEX

#AFC74D

RGB

rgb(175, 199, 77)

HSL

hsl(72, 52%, 54%)

HSB

hsb(72, 61%, 78%)

CMYK

cmyk(12%, 0%, 61%, 22%)

Oklch

oklch(78.8% 0.149 119.4)

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

#6A9B3D

Celadon · DarkOliveGreen · Olive Green

HEX

#6A9B3D

RGB

rgb(106, 155, 61)

HSL

hsl(91, 44%, 42%)

HSB

hsb(91, 61%, 61%)

CMYK

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

Oklch

oklch(63.4% 0.136 132.3)

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

#36685C

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#36685C

RGB

rgb(54, 104, 92)

HSL

hsl(166, 32%, 31%)

HSB

hsb(166, 48%, 41%)

CMYK

cmyk(48%, 0%, 12%, 59%)

Oklch

oklch(47.8% 0.058 176.3)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#3C4558

Indigo · DarkSlateGray · Prussian Blue

HEX

#3C4558

RGB

rgb(60, 69, 88)

HSL

hsl(221, 19%, 29%)

HSB

hsb(221, 32%, 35%)

CMYK

cmyk(32%, 22%, 0%, 65%)

Oklch

oklch(39.0% 0.035 265.0)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#492C12

Tangerine · DarkOliveGreen · Cinnamon

HEX

#492C12

RGB

rgb(73, 44, 18)

HSL

hsl(28, 60%, 18%)

HSB

hsb(28, 75%, 29%)

CMYK

cmyk(0%, 40%, 75%, 71%)

Oklch

oklch(32.3% 0.058 60.2)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFC74D

654DC7

Analogous

C7A24D

AFC74D

71C74D

Triadic

AFC74D

4DAEC7

C74DAE

Split-Comp.

AFC74D

4D71C7

A24DC7

Tetradic

AFC74D

4DC7A2

654DC7

C74D71

Contrast Matrix WCAG 2.1 Contrast

AFC74D	6A9B3D	36685C	3C4558	492C12
—	1.7 Fail	3.4 AA Large	5.1 AA	6.7 AA
1.7 Fail	—	1.9 Fail	2.9 Fail	3.9 AA Large
3.4 AA Large	1.9 Fail	—	1.5 Fail	2.0 Fail
5.1 AA	2.9 Fail	1.5 Fail	—	1.3 Fail
6.7 AA	3.9 AA Large	2.0 Fail	1.3 Fail	—

White BG

1.9Fail

3.3AA Large

6.4AA

9.6AAA

12.7AAA

Black BG

11.1AAA

6.4AA

3.3AA Large

2.2Fail

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9BA6B

7F8054

4C4C5F

404053

3C3C18

Deuteranopia

B8B672

7C7959

494560

3F3F52

3E401A

Tritanopia

B08287

6C666A

396162

3C504F

481D1E

Achromatopsia

B2B2B2

828282

585858

444444

323232

Shades & Tints Shades & Tints

#AFC74D

Dark

Light

#6A9B3D

Dark

Light

#36685C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afc74d;
  --color-2: #6a9b3d;
  --color-3: #36685c;
  --color-4: #3c4558;
  --color-5: #492c12;
}

SCSS

$color-1: #afc74d;
$color-2: #6a9b3d;
$color-3: #36685c;
$color-4: #3c4558;
$color-5: #492c12;

TAILWIND

colors: {
  'brand-1': '#afc74d',
  'brand-2': '#6a9b3d',
  'brand-3': '#36685c',
  'brand-4': '#3c4558',
  'brand-5': '#492c12',
}

RGB Array

[175, 199, 77], [106, 155, 61], [54, 104, 92], [60, 69, 88], [73, 44, 18]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFC74D, #6A9B3D, #36685C, #3C4558, #492C12 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: #afc74d; --color-2: #6a9b3d; --color-3: #36685c; --color-4: #3c4558; --color-5: #492c12. 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