#334F5E + #261A14 + #A64242 + #A67742 + #A69442 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#334F5E

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#334F5E

RGB

rgb(51, 79, 94)

HSL

hsl(201, 30%, 28%)

HSB

hsb(201, 46%, 37%)

CMYK

cmyk(46%, 16%, 0%, 63%)

Oklch

oklch(41.2% 0.042 232.6)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#261A14

Tangerine · Black · Cinnamon

HEX

#261A14

RGB

rgb(38, 26, 20)

HSL

hsl(20, 31%, 11%)

HSB

hsb(20, 47%, 15%)

CMYK

cmyk(0%, 32%, 47%, 85%)

Oklch

oklch(23.1% 0.022 47.7)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#A64242

Crimson · Sienna · Passion Red

HEX

#A64242

RGB

rgb(166, 66, 66)

HSL

hsl(0, 43%, 45%)

HSB

hsb(0, 60%, 65%)

CMYK

cmyk(0%, 60%, 60%, 35%)

Oklch

oklch(51.5% 0.133 22.9)

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

#A67742

Ochre · Sienna · Amber Brown

HEX

#A67742

RGB

rgb(166, 119, 66)

HSL

hsl(32, 43%, 45%)

HSB

hsb(32, 60%, 65%)

CMYK

cmyk(0%, 28%, 60%, 35%)

Oklch

oklch(60.6% 0.091 67.9)

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

#A69442

Ochre · DarkGoldenRod · Honey Gold

HEX

#A69442

RGB

rgb(166, 148, 66)

HSL

hsl(49, 43%, 45%)

HSB

hsb(49, 60%, 65%)

CMYK

cmyk(0%, 11%, 60%, 35%)

Oklch

oklch(66.6% 0.105 97.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

334F5E

5D4132

Analogous

325D56

334F5E

32385D

Triadic

334F5E

5D324E

4E5D32

Split-Comp.

334F5E

5D3238

5D5632

Tetradic

334F5E

56325D

5D4132

385D32

Contrast Matrix WCAG 2.1 Contrast

334F5E	261A14	A64242	A67742	A69442
—	2.0 Fail	1.4 Fail	2.2 Fail	2.9 Fail
2.0 Fail	—	2.8 Fail	4.3 AA Large	5.6 AA
1.4 Fail	2.8 Fail	—	1.5 Fail	2.0 Fail
2.2 Fail	4.3 AA Large	1.5 Fail	—	1.3 Fail
2.9 Fail	5.6 AA	2.0 Fail	1.3 Fail	—

White BG

8.7AAA

16.9AAA

6.0AA

3.9AA Large

3.0AA Large

Black BG

2.4Fail

1.2Fail

3.5AA Large

5.3AA

6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F5A

212115

7B7A42

92914F

9E9E56

Deuteranopia

3E3B5A

222216

818842

949852

9FA15B

Tritanopia

345857

251717

A14242

A4595B

A56669

Achromatopsia

484848

1D1D1D

606060

7F7F7F

909090

Shades & Tints Shades & Tints

#334F5E

Dark

Light

#261A14

Dark

Light

#A64242

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #334f5e;
  --color-2: #261a14;
  --color-3: #a64242;
  --color-4: #a67742;
  --color-5: #a69442;
}

SCSS

$color-1: #334f5e;
$color-2: #261a14;
$color-3: #a64242;
$color-4: #a67742;
$color-5: #a69442;

TAILWIND

colors: {
  'brand-1': '#334f5e',
  'brand-2': '#261a14',
  'brand-3': '#a64242',
  'brand-4': '#a67742',
  'brand-5': '#a69442',
}

RGB Array

[51, 79, 94], [38, 26, 20], [166, 66, 66], [166, 119, 66], [166, 148, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #334F5E, #261A14, #A64242, #A67742, #A69442 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: #334f5e; --color-2: #261a14; --color-3: #a64242; --color-4: #a67742; --color-5: #a69442. 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