#F3B620 + #97BF7C + #3DBF8D + #3F9E7A + #36755D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F3B620

Ginger · GoldenRod · Sunflower

HEX

#F3B620

RGB

rgb(243, 182, 32)

HSL

hsl(43, 90%, 54%)

HSB

hsb(43, 87%, 95%)

CMYK

cmyk(0%, 25%, 87%, 5%)

Oklch

oklch(81.1% 0.160 83.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#97BF7C

Celadon · DarkSeaGreen · Apple Green

HEX

#97BF7C

RGB

rgb(151, 191, 124)

HSL

hsl(96, 34%, 62%)

HSB

hsb(96, 35%, 75%)

CMYK

cmyk(21%, 0%, 35%, 25%)

Oklch

oklch(75.9% 0.101 133.4)

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

#3DBF8D

Mineral Blue · MediumSeaGreen · Olive Green

HEX

#3DBF8D

RGB

rgb(61, 191, 141)

HSL

hsl(157, 52%, 49%)

HSB

hsb(157, 68%, 75%)

CMYK

cmyk(68%, 0%, 26%, 25%)

Oklch

oklch(72.1% 0.135 163.4)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#3F9E7A

Mineral Blue · MediumSeaGreen · Olive Green

HEX

#3F9E7A

RGB

rgb(63, 158, 122)

HSL

hsl(157, 43%, 43%)

HSB

hsb(157, 60%, 62%)

CMYK

cmyk(60%, 0%, 23%, 38%)

Oklch

oklch(63.3% 0.106 165.1)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#36755D

Mineral Blue · SeaGreen · Forest Green

HEX

#36755D

RGB

rgb(54, 117, 93)

HSL

hsl(157, 37%, 34%)

HSB

hsb(157, 54%, 46%)

CMYK

cmyk(54%, 0%, 21%, 54%)

Oklch

oklch(51.3% 0.076 166.1)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3B620

205CF3

Analogous

F34E20

F3B620

C6F320

Triadic

F3B620

20F3B7

B720F3

Split-Comp.

F3B620

20C6F3

4E20F3

Tetradic

F3B620

20F34E

205CF3

F320C6

Contrast Matrix WCAG 2.1 Contrast

F3B620	97BF7C	3DBF8D	3F9E7A	36755D
—	1.1 Fail	1.3 Fail	1.8 Fail	3.0 Fail
1.1 Fail	—	1.1 Fail	1.6 Fail	2.6 Fail
1.3 Fail	1.1 Fail	—	1.4 Fail	2.3 Fail
1.8 Fail	1.6 Fail	1.4 Fail	—	1.7 Fail
3.0 Fail	2.6 Fail	2.3 Fail	1.7 Fail	—

White BG

1.8Fail

2.1Fail

2.3Fail

3.3AA Large

5.4AA

Black BG

11.5AAA

10.1AAA

9.0AAA

6.4AA

3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D844

A8A98C

757699

686983

515263

Deuteranopia

DCE14D

A6A390

6E649C

635C85

4E4964

Tritanopia

F06167

99999C

44A3A5

448A8B

396768

Achromatopsia

B7B7B7

ABABAB

929292

7D7D7D

5F5F5F

Shades & Tints Shades & Tints

#F3B620

Dark

Light

#97BF7C

Dark

Light

#3DBF8D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3b620;
  --color-2: #97bf7c;
  --color-3: #3dbf8d;
  --color-4: #3f9e7a;
  --color-5: #36755d;
}

SCSS

$color-1: #f3b620;
$color-2: #97bf7c;
$color-3: #3dbf8d;
$color-4: #3f9e7a;
$color-5: #36755d;

TAILWIND

colors: {
  'brand-1': '#f3b620',
  'brand-2': '#97bf7c',
  'brand-3': '#3dbf8d',
  'brand-4': '#3f9e7a',
  'brand-5': '#36755d',
}

RGB Array

[243, 182, 32], [151, 191, 124], [61, 191, 141], [63, 158, 122], [54, 117, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3B620, #97BF7C, #3DBF8D, #3F9E7A, #36755D 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: #f3b620; --color-2: #97bf7c; --color-3: #3dbf8d; --color-4: #3f9e7a; --color-5: #36755d. 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 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