#680607 + #3F4757 + #359388 + #7AA052 + #F3AC1E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#680607

Vermilion · Maroon · Wine Red

HEX

#680607

RGB

rgb(104, 6, 7)

HSL

hsl(359, 89%, 22%)

HSB

hsb(359, 94%, 41%)

CMYK

cmyk(0%, 94%, 93%, 59%)

Oklch

oklch(32.9% 0.129 27.9)

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

#3F4757

Indigo · DarkSlateGray · Prussian Blue

HEX

#3F4757

RGB

rgb(63, 71, 87)

HSL

hsl(220, 16%, 29%)

HSB

hsb(220, 28%, 34%)

CMYK

cmyk(28%, 18%, 0%, 66%)

Oklch

oklch(39.7% 0.029 264.2)

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

#359388

Mineral Blue · MediumSeaGreen · Mint Ice

HEX

#359388

RGB

rgb(53, 147, 136)

HSL

hsl(173, 47%, 39%)

HSB

hsb(173, 64%, 58%)

CMYK

cmyk(64%, 0%, 7%, 42%)

Oklch

oklch(60.5% 0.089 184.3)

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

#7AA052

Grass Green · Gray · Olive Green

HEX

#7AA052

RGB

rgb(122, 160, 82)

HSL

hsl(89, 32%, 47%)

HSB

hsb(89, 49%, 63%)

CMYK

cmyk(24%, 0%, 49%, 37%)

Oklch

oklch(65.9% 0.114 130.3)

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

#F3AC1E

Ginger · GoldenRod · Sunflower

HEX

#F3AC1E

RGB

rgb(243, 172, 30)

HSL

hsl(40, 90%, 54%)

HSB

hsb(40, 88%, 95%)

CMYK

cmyk(0%, 29%, 88%, 5%)

Oklch

oklch(79.2% 0.159 77.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

680607

066A68

Analogous

6A063A

680607

6A3606

Triadic

680607

086A06

06086A

Split-Comp.

680607

066A36

063A6A

Tetradic

680607

3A6A06

066A68

36066A

Contrast Matrix WCAG 2.1 Contrast

680607	3F4757	359388	7AA052	F3AC1E
—	1.4 Fail	3.5 AA Large	4.3 AA Large	6.6 AA
1.4 Fail	—	2.5 Fail	3.1 AA Large	4.8 AA
3.5 AA Large	2.5 Fail	—	1.2 Fail	1.9 Fail
4.3 AA Large	3.1 AA Large	1.2 Fail	—	1.5 Fail
6.6 AA	4.8 AA	1.9 Fail	1.5 Fail	—

White BG

13.0AAA

9.3AAA

3.7AA Large

3.0AA Large

2.0Fail

Black BG

1.6Fail

2.3Fail

5.7AA

7.0AA

10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3D07

424353

5E5F8B

8A8B65

D4D440

Deuteranopia

434B07

424152

58518B

888569

D8DE49

Tritanopia

630707

3F504F

3A8D8D

7C7477

EF5B61

Achromatopsia

232323

464646

767676

8C8C8C

B1B1B1

Shades & Tints Shades & Tints

#680607

Dark

Light

#3F4757

Dark

Light

#359388

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #680607;
  --color-2: #3f4757;
  --color-3: #359388;
  --color-4: #7aa052;
  --color-5: #f3ac1e;
}

SCSS

$color-1: #680607;
$color-2: #3f4757;
$color-3: #359388;
$color-4: #7aa052;
$color-5: #f3ac1e;

TAILWIND

colors: {
  'brand-1': '#680607',
  'brand-2': '#3f4757',
  'brand-3': '#359388',
  'brand-4': '#7aa052',
  'brand-5': '#f3ac1e',
}

RGB Array

[104, 6, 7], [63, 71, 87], [53, 147, 136], [122, 160, 82], [243, 172, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #680607, #3F4757, #359388, #7AA052, #F3AC1E 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: #680607; --color-2: #3f4757; --color-3: #359388; --color-4: #7aa052; --color-5: #f3ac1e. 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