#5A7D75 + #6B593B + #704027 + #702730 + #331A1C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#5A7D75

Mineral Blue · DimGray · Mint Ice

HEX

#5A7D75

RGB

rgb(90, 125, 117)

HSL

hsl(166, 16%, 42%)

HSB

hsb(166, 28%, 49%)

CMYK

cmyk(28%, 0%, 6%, 51%)

Oklch

oklch(56.1% 0.042 179.0)

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

#6B593B

Ochre · DarkOliveGreen · Amber Brown

HEX

#6B593B

RGB

rgb(107, 89, 59)

HSL

hsl(37, 29%, 33%)

HSB

hsb(37, 45%, 42%)

CMYK

cmyk(0%, 17%, 45%, 58%)

Oklch

oklch(47.4% 0.050 79.8)

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

#704027

Tangerine · DarkOliveGreen · Amber Brown

HEX

#704027

RGB

rgb(112, 64, 39)

HSL

hsl(21, 48%, 30%)

HSB

hsb(21, 65%, 44%)

CMYK

cmyk(0%, 43%, 65%, 56%)

Oklch

oklch(42.4% 0.077 47.4)

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

#702730

Crimson · Brown · Wine Red

HEX

#702730

RGB

rgb(112, 39, 48)

HSL

hsl(353, 48%, 30%)

HSB

hsb(353, 65%, 44%)

CMYK

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

Oklch

oklch(38.4% 0.103 16.1)

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

#331A1C

Crimson · Black · Deep Berry

HEX

#331A1C

RGB

rgb(51, 26, 28)

HSL

hsl(355, 32%, 15%)

HSB

hsb(355, 49%, 20%)

CMYK

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

Oklch

oklch(25.3% 0.040 15.2)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5A7D75

7C5A62

Analogous

5A7C63

5A7D75

5A737C

Triadic

5A7D75

745A7C

7C745A

Split-Comp.

5A7D75

7C5A73

7C635A

Tetradic

5A7D75

635A7C

7C5A62

737C5A

Contrast Matrix WCAG 2.1 Contrast

5A7D75	6B593B	704027	702730	331A1C
—	1.5 Fail	1.9 Fail	2.3 Fail	3.5 AA Large
1.5 Fail	—	1.3 Fail	1.5 Fail	2.4 Fail
1.9 Fail	1.3 Fail	—	1.2 Fail	1.9 Fail
2.3 Fail	1.5 Fail	1.2 Fail	—	1.5 Fail
3.5 AA Large	2.4 Fail	1.9 Fail	1.5 Fail	—

White BG

4.5AA

6.7AA

8.6AAA

10.4AAA

16.1AAA

Black BG

4.6AA

3.1AA Large

2.5Fail

2.0Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

696977

636342

5B5B2D

50502E

28281C

Deuteranopia

676577

646644

5E622F

555A2D

2A2B1B

Tritanopia

5C7879

6A4849

6E3233

6C2C2C

321B1B

Achromatopsia

727272

5B5B5B

4C4C4C

3E3E3E

222222

Shades & Tints Shades & Tints

#5A7D75

Dark

Light

#6B593B

Dark

Light

#704027

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5a7d75;
  --color-2: #6b593b;
  --color-3: #704027;
  --color-4: #702730;
  --color-5: #331a1c;
}

SCSS

$color-1: #5a7d75;
$color-2: #6b593b;
$color-3: #704027;
$color-4: #702730;
$color-5: #331a1c;

TAILWIND

colors: {
  'brand-1': '#5a7d75',
  'brand-2': '#6b593b',
  'brand-3': '#704027',
  'brand-4': '#702730',
  'brand-5': '#331a1c',
}

RGB Array

[90, 125, 117], [107, 89, 59], [112, 64, 39], [112, 39, 48], [51, 26, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5A7D75, #6B593B, #704027, #702730, #331A1C 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: #5a7d75; --color-2: #6b593b; --color-3: #704027; --color-4: #702730; --color-5: #331a1c. 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