#367A71 + #345E59 + #303030 + #C75D5D + #C7BC5D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#367A71

Mineral Blue · SeaGreen · Mint Ice

HEX

#367A71

RGB

rgb(54, 122, 113)

HSL

hsl(172, 39%, 35%)

HSB

hsb(172, 56%, 48%)

CMYK

cmyk(56%, 0%, 7%, 52%)

Oklch

oklch(53.3% 0.070 183.8)

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

#345E59

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#345E59

RGB

rgb(52, 94, 89)

HSL

hsl(173, 29%, 29%)

HSB

hsb(173, 45%, 37%)

CMYK

cmyk(45%, 0%, 5%, 63%)

Oklch

oklch(45.0% 0.048 185.9)

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

#303030

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#303030

RGB

rgb(48, 48, 48)

HSL

hsl(0, 0%, 19%)

HSB

hsb(0, 0%, 19%)

CMYK

cmyk(0%, 0%, 0%, 81%)

Oklch

oklch(30.9% 0.000 89.9)

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

#C75D5D

Crimson · Tomato · Passion Red

HEX

#C75D5D

RGB

rgb(199, 93, 93)

HSL

hsl(0, 49%, 57%)

HSB

hsb(0, 53%, 78%)

CMYK

cmyk(0%, 53%, 53%, 22%)

Oklch

oklch(60.8% 0.136 21.9)

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

#C7BC5D

Autumn Sage · BurlyWood · Sunflower

HEX

#C7BC5D

RGB

rgb(199, 188, 93)

HSL

hsl(54, 49%, 57%)

HSB

hsb(54, 53%, 78%)

CMYK

cmyk(0%, 6%, 53%, 22%)

Oklch

oklch(78.5% 0.118 102.7)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

367A71

7C3640

Analogous

367C50

367A71

36637C

Triadic

367A71

73367C

7C7336

Split-Comp.

367A71

7C3663

7C5036

Tetradic

367A71

50367C

7C3640

637C36

Contrast Matrix WCAG 2.1 Contrast

367A71	345E59	303030	C75D5D	C7BC5D
—	1.4 Fail	2.6 Fail	1.2 Fail	2.6 Fail
1.4 Fail	—	1.8 Fail	1.8 Fail	3.7 AA Large
2.6 Fail	1.8 Fail	—	3.2 AA Large	6.8 AA
1.2 Fail	1.8 Fail	3.2 AA Large	—	2.1 Fail
2.6 Fail	3.7 AA Large	6.8 AA	2.1 Fail	—

White BG

5.0AA

7.3AAA

13.2AAA

4.1AA Large

1.9Fail

Black BG

4.2AA Large

2.9Fail

1.6Fail

5.2AA

10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

535473

46475A

303030

99985D

C2C274

Deuteranopia

504A74

44415B

303030

9FA75D

C3C47A

Tritanopia

397575

365B5B

303030

C25D5D

C6868A

Achromatopsia

656565

515151

303030

7D7D7D

B4B4B4

Shades & Tints Shades & Tints

#367A71

Dark

Light

#345E59

Dark

Light

#303030

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #367a71;
  --color-2: #345e59;
  --color-3: #303030;
  --color-4: #c75d5d;
  --color-5: #c7bc5d;
}

SCSS

$color-1: #367a71;
$color-2: #345e59;
$color-3: #303030;
$color-4: #c75d5d;
$color-5: #c7bc5d;

TAILWIND

colors: {
  'brand-1': '#367a71',
  'brand-2': '#345e59',
  'brand-3': '#303030',
  'brand-4': '#c75d5d',
  'brand-5': '#c7bc5d',
}

RGB Array

[54, 122, 113], [52, 94, 89], [48, 48, 48], [199, 93, 93], [199, 188, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #367A71, #345E59, #303030, #C75D5D, #C7BC5D 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: #367a71; --color-2: #345e59; --color-3: #303030; --color-4: #c75d5d; --color-5: #c7bc5d. 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