#245C51 + #3E776E + #48837D + #7FB0AD + #C5800B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#245C51

Mineral Blue · DarkSlateGray · Peacock Green

HEX

#245C51

RGB

rgb(36, 92, 81)

HSL

hsl(168, 44%, 25%)

HSB

hsb(168, 61%, 36%)

CMYK

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

Oklch

oklch(43.4% 0.062 178.3)

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

#3E776E

Mineral Blue · SeaGreen · Mint Ice

HEX

#3E776E

RGB

rgb(62, 119, 110)

HSL

hsl(171, 31%, 35%)

HSB

hsb(171, 48%, 47%)

CMYK

cmyk(48%, 0%, 8%, 53%)

Oklch

oklch(52.8% 0.062 182.4)

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

#48837D

Mineral Blue · SlateGray · Mint Ice

HEX

#48837D

RGB

rgb(72, 131, 125)

HSL

hsl(174, 29%, 40%)

HSB

hsb(174, 45%, 51%)

CMYK

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

Oklch

oklch(56.8% 0.063 187.1)

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

#7FB0AD

Mineral Blue · DarkSeaGreen · Lake Green

HEX

#7FB0AD

RGB

rgb(127, 176, 173)

HSL

hsl(176, 24%, 59%)

HSB

hsb(176, 28%, 69%)

CMYK

cmyk(28%, 0%, 2%, 31%)

Oklch

oklch(72.2% 0.052 191.3)

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

#C5800B

Ochre · DarkGoldenRod · Amber Brown

HEX

#C5800B

RGB

rgb(197, 128, 11)

HSL

hsl(38, 89%, 41%)

HSB

hsb(38, 94%, 77%)

CMYK

cmyk(0%, 35%, 94%, 23%)

Oklch

oklch(65.6% 0.139 71.1)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

245C51

5C242F

Analogous

245C35

245C51

244B5C

Triadic

245C51

51245C

5C5124

Split-Comp.

245C51

5C244B

5C3524

Tetradic

245C51

35245C

5C242F

4B5C24

Contrast Matrix WCAG 2.1 Contrast

245C51	3E776E	48837D	7FB0AD	C5800B
—	1.5 Fail	1.8 Fail	3.2 AA Large	2.4 Fail
1.5 Fail	—	1.2 Fail	2.1 Fail	1.6 Fail
1.8 Fail	1.2 Fail	—	1.8 Fail	1.3 Fail
3.2 AA Large	2.1 Fail	1.8 Fail	—	1.3 Fail
2.4 Fail	1.6 Fail	1.3 Fail	1.3 Fail	—

White BG

7.7AAA

5.2AA

4.4AA Large

2.4Fail

3.2AA Large

Black BG

2.7Fail

4.1AA Large

4.8AA

8.7AAA

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3D54

575770

62627E

9495AE

A7A727

Deuteranopia

393554

534F71

5E5A7F

918EAE

ABB02E

Tritanopia

275656

417272

4B8080

81AEAE

C23E43

Achromatopsia

4A4A4A

656565

717171

A1A1A1

878787

Shades & Tints Shades & Tints

#245C51

Dark

Light

#3E776E

Dark

Light

#48837D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #245c51;
  --color-2: #3e776e;
  --color-3: #48837d;
  --color-4: #7fb0ad;
  --color-5: #c5800b;
}

SCSS

$color-1: #245c51;
$color-2: #3e776e;
$color-3: #48837d;
$color-4: #7fb0ad;
$color-5: #c5800b;

TAILWIND

colors: {
  'brand-1': '#245c51',
  'brand-2': '#3e776e',
  'brand-3': '#48837d',
  'brand-4': '#7fb0ad',
  'brand-5': '#c5800b',
}

RGB Array

[36, 92, 81], [62, 119, 110], [72, 131, 125], [127, 176, 173], [197, 128, 11]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #245C51, #3E776E, #48837D, #7FB0AD, #C5800B 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: #245c51; --color-2: #3e776e; --color-3: #48837d; --color-4: #7fb0ad; --color-5: #c5800b. 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