#A3AA51 + #AB6453 + #3C160B + #913863 + #422B42 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A3AA51

Autumn Sage · DarkSeaGreen · Honey Gold

HEX

#A3AA51

RGB

rgb(163, 170, 81)

HSL

hsl(65, 35%, 49%)

HSB

hsb(65, 52%, 67%)

CMYK

cmyk(4%, 0%, 52%, 33%)

Oklch

oklch(71.3% 0.114 113.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#AB6453

Crimson · Sienna · Passion Red

HEX

#AB6453

RGB

rgb(171, 100, 83)

HSL

hsl(12, 35%, 50%)

HSB

hsb(12, 51%, 67%)

CMYK

cmyk(0%, 42%, 51%, 33%)

Oklch

oklch(57.9% 0.096 34.3)

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

#3C160B

Vermilion · Black · Deep Berry

HEX

#3C160B

RGB

rgb(60, 22, 11)

HSL

hsl(13, 69%, 14%)

HSB

hsb(13, 82%, 24%)

CMYK

cmyk(0%, 63%, 82%, 76%)

Oklch

oklch(25.7% 0.063 36.9)

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

#913863

Dark Violet · Sienna · Camellia

HEX

#913863

RGB

rgb(145, 56, 99)

HSL

hsl(331, 44%, 39%)

HSB

hsb(331, 61%, 57%)

CMYK

cmyk(0%, 61%, 32%, 43%)

Oklch

oklch(47.7% 0.129 353.0)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#422B42

Rose Purple · DarkSlateGray · Eggplant

HEX

#422B42

RGB

rgb(66, 43, 66)

HSL

hsl(300, 21%, 21%)

HSB

hsb(300, 35%, 26%)

CMYK

cmyk(0%, 35%, 0%, 74%)

Oklch

oklch(32.6% 0.050 326.7)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A3AA51

5951A9

Analogous

A98451

A3AA51

76A951

Triadic

A3AA51

51A1A9

A951A1

Split-Comp.

A3AA51

5176A9

8451A9

Tetradic

A3AA51

51A984

5951A9

A95176

Contrast Matrix WCAG 2.1 Contrast

A3AA51	AB6453	3C160B	913863	422B42
—	1.8 Fail	6.4 AA	2.9 Fail	5.1 AA
1.8 Fail	—	3.6 AA Large	1.6 Fail	2.8 Fail
6.4 AA	3.6 AA Large	—	2.2 Fail	1.3 Fail
2.9 Fail	1.6 Fail	2.2 Fail	—	1.8 Fail
5.1 AA	2.8 Fail	1.3 Fail	1.8 Fail	—

White BG

2.5Fail

4.5AA Large

16.0AAA

7.1AAA

12.7AAA

Black BG

8.4AAA

4.7AA

1.3Fail

2.9Fail

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A6A667

8C8C57

2C2B0E

6A6A59

38383C

Deuteranopia

A6A56C

909658

2E310E

707656

393B3B

Tritanopia

A3787B

A75A5B

3A1010

8D504F

413837

Achromatopsia

9E9E9E

777777

202020

585858

343434

Shades & Tints Shades & Tints

#A3AA51

Dark

Light

#AB6453

Dark

Light

#3C160B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a3aa51;
  --color-2: #ab6453;
  --color-3: #3c160b;
  --color-4: #913863;
  --color-5: #422b42;
}

SCSS

$color-1: #a3aa51;
$color-2: #ab6453;
$color-3: #3c160b;
$color-4: #913863;
$color-5: #422b42;

TAILWIND

colors: {
  'brand-1': '#a3aa51',
  'brand-2': '#ab6453',
  'brand-3': '#3c160b',
  'brand-4': '#913863',
  'brand-5': '#422b42',
}

RGB Array

[163, 170, 81], [171, 100, 83], [60, 22, 11], [145, 56, 99], [66, 43, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #A3AA51, #AB6453, #3C160B, #913863, #422B42 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: #a3aa51; --color-2: #ab6453; --color-3: #3c160b; --color-4: #913863; --color-5: #422b42. 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 sea-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