#7C9F3B + #9AB85B + #3E4142 + #FF9811 + #F0691B · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#7C9F3B

Grass Green · DarkOliveGreen · Olive Green

HEX

#7C9F3B

RGB

rgb(124, 159, 59)

HSL

hsl(81, 46%, 43%)

HSB

hsb(81, 63%, 62%)

CMYK

cmyk(22%, 0%, 63%, 38%)

Oklch

oklch(65.5% 0.134 126.2)

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

#9AB85B

Grass Green · DarkSeaGreen · Olive Green

HEX

#9AB85B

RGB

rgb(154, 184, 91)

HSL

hsl(79, 40%, 54%)

HSB

hsb(79, 51%, 72%)

CMYK

cmyk(16%, 0%, 51%, 28%)

Oklch

oklch(74.0% 0.125 124.2)

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

#3E4142

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#3E4142

RGB

rgb(62, 65, 66)

HSL

hsl(195, 3%, 25%)

HSB

hsb(195, 6%, 26%)

CMYK

cmyk(6%, 2%, 0%, 74%)

Oklch

oklch(37.3% 0.004 219.6)

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

#FF9811

Ginger · Orange · Warm Sun

HEX

#FF9811

RGB

rgb(255, 152, 17)

HSL

hsl(34, 100%, 53%)

HSB

hsb(34, 93%, 100%)

CMYK

cmyk(0%, 40%, 93%, 0%)

Oklch

oklch(77.1% 0.172 63.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#F0691B

Tangerine · Chocolate · Warm Sun

HEX

#F0691B

RGB

rgb(240, 105, 27)

HSL

hsl(22, 88%, 52%)

HSB

hsb(22, 89%, 94%)

CMYK

cmyk(0%, 56%, 89%, 6%)

Oklch

oklch(67.8% 0.185 44.7)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7C9F3B

5F3BA0

Analogous

A0913B

7C9F3B

4AA03B

Triadic

7C9F3B

3B7DA0

A03B7D

Split-Comp.

7C9F3B

3B4AA0

913BA0

Tetradic

7C9F3B

3BA091

5F3BA0

A03B4A

Contrast Matrix WCAG 2.1 Contrast

7C9F3B	9AB85B	3E4142	FF9811	F0691B
—	1.4 Fail	3.4 AA Large	1.4 Fail	1.0 Fail
1.4 Fail	—	4.6 AA	1.0 Fail	1.4 Fail
3.4 AA Large	4.6 AA	—	4.8 AA	3.3 AA Large
1.4 Fail	1.0 Fail	4.8 AA	—	1.4 Fail
1.0 Fail	1.4 Fail	3.3 AA Large	1.4 Fail	—

White BG

3.1AA Large

2.2Fail

10.3AAA

2.2Fail

3.1AA Large

Black BG

6.9AA

9.4AAA

2.0Fail

9.8AAA

6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8B53

A7A772

3F3F42

D2D132

B6B42E

Deuteranopia

898759

A5A377

3F3F42

D8E03A

BDC832

Tritanopia

7E666B

9B8387

3E4242

FA4B51

E93D40

Achromatopsia

898989

A4A4A4

404040

A7A7A7

888888

Shades & Tints Shades & Tints

#7C9F3B

Dark

Light

#9AB85B

Dark

Light

#3E4142

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7c9f3b;
  --color-2: #9ab85b;
  --color-3: #3e4142;
  --color-4: #ff9811;
  --color-5: #f0691b;
}

SCSS

$color-1: #7c9f3b;
$color-2: #9ab85b;
$color-3: #3e4142;
$color-4: #ff9811;
$color-5: #f0691b;

TAILWIND

colors: {
  'brand-1': '#7c9f3b',
  'brand-2': '#9ab85b',
  'brand-3': '#3e4142',
  'brand-4': '#ff9811',
  'brand-5': '#f0691b',
}

RGB Array

[124, 159, 59], [154, 184, 91], [62, 65, 66], [255, 152, 17], [240, 105, 27]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #7C9F3B, #9AB85B, #3E4142, #FF9811, #F0691B is ideal for: corporate websites, product showcases, portfolios. 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: #7c9f3b; --color-2: #9ab85b; --color-3: #3e4142; --color-4: #ff9811; --color-5: #f0691b. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 warm-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