#478F8C + #2D2935 + #693A3D + #A34C3D + #BAA754 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#478F8C

Mineral Blue · CadetBlue · Mint Ice

HEX

#478F8C

RGB

rgb(71, 143, 140)

HSL

hsl(178, 34%, 42%)

HSB

hsb(178, 50%, 56%)

CMYK

cmyk(50%, 0%, 2%, 44%)

Oklch

oklch(60.3% 0.072 191.8)

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

#2D2935

Deep Indigo · DarkSlateGray · Dark Purple

HEX

#2D2935

RGB

rgb(45, 41, 53)

HSL

hsl(260, 13%, 18%)

HSB

hsb(260, 23%, 21%)

CMYK

cmyk(15%, 23%, 0%, 79%)

Oklch

oklch(29.0% 0.022 300.3)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#693A3D

Crimson · DarkOliveGreen · Wine Red

HEX

#693A3D

RGB

rgb(105, 58, 61)

HSL

hsl(356, 29%, 32%)

HSB

hsb(356, 45%, 41%)

CMYK

cmyk(0%, 45%, 42%, 59%)

Oklch

oklch(40.7% 0.067 16.4)

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

#A34C3D

Crimson · Sienna · Passion Red

HEX

#A34C3D

RGB

rgb(163, 76, 61)

HSL

hsl(9, 46%, 44%)

HSB

hsb(9, 63%, 64%)

CMYK

cmyk(0%, 53%, 63%, 36%)

Oklch

oklch(52.4% 0.119 31.4)

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

#BAA754

Ginger · SandyBrown · Sunflower

HEX

#BAA754

RGB

rgb(186, 167, 84)

HSL

hsl(49, 43%, 53%)

HSB

hsb(49, 55%, 73%)

CMYK

cmyk(0%, 10%, 55%, 27%)

Oklch

oklch(72.8% 0.106 96.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

478F8C

904749

Analogous

479069

478F8C

476E90

Triadic

478F8C

8D4790

908D47

Split-Comp.

478F8C

90476E

906947

Tetradic

478F8C

694790

904749

6E9047

Contrast Matrix WCAG 2.1 Contrast

478F8C	2D2935	693A3D	A34C3D	BAA754
—	3.8 AA Large	2.5 Fail	1.5 Fail	1.6 Fail
3.8 AA Large	—	1.5 Fail	2.5 Fail	5.9 AA
2.5 Fail	1.5 Fail	—	1.6 Fail	3.8 AA Large
1.5 Fail	2.5 Fail	1.6 Fail	—	2.4 Fail
1.6 Fail	5.9 AA	3.8 AA Large	2.4 Fail	—

White BG

3.8AA Large

14.2AAA

9.2AAA

5.7AA

2.4Fail

Black BG

5.6AA

1.5Fail

2.3Fail

3.7AA Large

8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

66678D

2B2B32

55543C

7D7D41

B2B268

Deuteranopia

625D8D

2C2C31

575B3C

828942

B3B46D

Tritanopia

4B8D8D

2D302F

673C3C

9F4344

B9787B

Achromatopsia

797979

2C2C2C

484848

646464

A3A3A3

Shades & Tints Shades & Tints

#478F8C

Dark

Light

#2D2935

Dark

Light

#693A3D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #478f8c;
  --color-2: #2d2935;
  --color-3: #693a3d;
  --color-4: #a34c3d;
  --color-5: #baa754;
}

SCSS

$color-1: #478f8c;
$color-2: #2d2935;
$color-3: #693a3d;
$color-4: #a34c3d;
$color-5: #baa754;

TAILWIND

colors: {
  'brand-1': '#478f8c',
  'brand-2': '#2d2935',
  'brand-3': '#693a3d',
  'brand-4': '#a34c3d',
  'brand-5': '#baa754',
}

RGB Array

[71, 143, 140], [45, 41, 53], [105, 58, 61], [163, 76, 61], [186, 167, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #478F8C, #2D2935, #693A3D, #A34C3D, #BAA754 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: #478f8c; --color-2: #2d2935; --color-3: #693a3d; --color-4: #a34c3d; --color-5: #baa754. 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