#444B44 + #306F5C + #547155 + #C78B43 + #D8501E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#444B44

Dark Cyan · DarkSlateGray · Charcoal

HEX

#444B44

RGB

rgb(68, 75, 68)

HSL

hsl(120, 5%, 28%)

HSB

hsb(120, 9%, 29%)

CMYK

cmyk(9%, 0%, 9%, 71%)

Oklch

oklch(40.4% 0.015 145.3)

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

#306F5C

Mineral Blue · SeaGreen · Mint Ice

HEX

#306F5C

RGB

rgb(48, 111, 92)

HSL

hsl(162, 40%, 31%)

HSB

hsb(162, 57%, 44%)

CMYK

cmyk(57%, 0%, 17%, 56%)

Oklch

oklch(49.4% 0.072 170.9)

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

#547155

Celadon · DimGray · Forest Green

HEX

#547155

RGB

rgb(84, 113, 85)

HSL

hsl(122, 15%, 39%)

HSB

hsb(122, 26%, 44%)

CMYK

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

Oklch

oklch(51.8% 0.055 145.6)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#C78B43

Ginger · GoldenRod · Warm Sun

HEX

#C78B43

RGB

rgb(199, 139, 67)

HSL

hsl(33, 54%, 52%)

HSB

hsb(33, 66%, 78%)

CMYK

cmyk(0%, 30%, 66%, 22%)

Oklch

oklch(68.3% 0.115 68.7)

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

#D8501E

Tangerine · Chocolate · Amber Brown

HEX

#D8501E

RGB

rgb(216, 80, 30)

HSL

hsl(16, 76%, 48%)

HSB

hsb(16, 86%, 85%)

CMYK

cmyk(0%, 63%, 86%, 15%)

Oklch

oklch(60.8% 0.181 38.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

444B44

4B444B

Analogous

474B44

444B44

444B47

Triadic

444B44

44444B

4B4444

Split-Comp.

444B44

47444B

4B4447

Tetradic

444B44

44474B

4B444B

4B4744

Contrast Matrix WCAG 2.1 Contrast

444B44	306F5C	547155	C78B43	D8501E
—	1.5 Fail	1.7 Fail	3.1 AA Large	2.2 Fail
1.5 Fail	—	1.1 Fail	2.0 Fail	1.4 Fail
1.7 Fail	1.1 Fail	—	1.9 Fail	1.3 Fail
3.1 AA Large	2.0 Fail	1.9 Fail	—	1.4 Fail
2.2 Fail	1.4 Fail	1.3 Fail	1.4 Fail	—

White BG

9.0AAA

5.9AA

5.4AA

2.9Fail

4.1AA Large

Black BG

2.3Fail

3.6AA Large

3.9AA Large

7.2AAA

5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

474746

4B4C61

61615C

ADAC54

9D9C2A

Deuteranopia

474646

484362

5F5D5D

B1B559

A5AF2D

Tritanopia

444747

336465

556162

C46265

D13436

Achromatopsia

484848

5A5A5A

656565

959595

737373

Shades & Tints Shades & Tints

#444B44

Dark

Light

#306F5C

Dark

Light

#547155

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #444b44;
  --color-2: #306f5c;
  --color-3: #547155;
  --color-4: #c78b43;
  --color-5: #d8501e;
}

SCSS

$color-1: #444b44;
$color-2: #306f5c;
$color-3: #547155;
$color-4: #c78b43;
$color-5: #d8501e;

TAILWIND

colors: {
  'brand-1': '#444b44',
  'brand-2': '#306f5c',
  'brand-3': '#547155',
  'brand-4': '#c78b43',
  'brand-5': '#d8501e',
}

RGB Array

[68, 75, 68], [48, 111, 92], [84, 113, 85], [199, 139, 67], [216, 80, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #444B44, #306F5C, #547155, #C78B43, #D8501E 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: #444b44; --color-2: #306f5c; --color-3: #547155; --color-4: #c78b43; --color-5: #d8501e. 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