#2E2620 + #196B5C + #AA791A + #A84F28 + #A82F28 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2E2620

Tangerine · DarkSlateGray · Cinnamon

HEX

#2E2620

RGB

rgb(46, 38, 32)

HSL

hsl(26, 18%, 15%)

HSB

hsb(26, 30%, 18%)

CMYK

cmyk(0%, 17%, 30%, 82%)

Oklch

oklch(27.6% 0.016 58.9)

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

#196B5C

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#196B5C

RGB

rgb(25, 107, 92)

HSL

hsl(169, 62%, 26%)

HSB

hsb(169, 77%, 42%)

CMYK

cmyk(77%, 0%, 14%, 58%)

Oklch

oklch(47.6% 0.080 177.4)

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

#AA791A

Ochre · DarkGoldenRod · Honey Gold

HEX

#AA791A

RGB

rgb(170, 121, 26)

HSL

hsl(40, 73%, 38%)

HSB

hsb(40, 85%, 67%)

CMYK

cmyk(0%, 29%, 85%, 33%)

Oklch

oklch(61.0% 0.119 78.1)

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

#A84F28

Tangerine · Sienna · Amber Brown

HEX

#A84F28

RGB

rgb(168, 79, 40)

HSL

hsl(18, 62%, 41%)

HSB

hsb(18, 76%, 66%)

CMYK

cmyk(0%, 53%, 76%, 34%)

Oklch

oklch(53.3% 0.128 42.6)

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

#A82F28

Vermilion · Brown · Passion Red

HEX

#A82F28

RGB

rgb(168, 47, 40)

HSL

hsl(3, 62%, 41%)

HSB

hsb(3, 76%, 66%)

CMYK

cmyk(0%, 72%, 76%, 34%)

Oklch

oklch(49.1% 0.159 27.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2E2620

1F272D

Analogous

2D1F20

2E2620

2D2C1F

Triadic

2E2620

1F2D25

251F2D

Split-Comp.

2E2620

1F2D2C

1F202D

Tetradic

2E2620

202D1F

1F272D

2C1F2D

Contrast Matrix WCAG 2.1 Contrast

2E2620	196B5C	AA791A	A84F28	A82F28
—	2.3 Fail	3.9 AA Large	2.7 Fail	2.2 Fail
2.3 Fail	—	1.7 Fail	1.2 Fail	1.1 Fail
3.9 AA Large	1.7 Fail	—	1.4 Fail	1.8 Fail
2.7 Fail	1.2 Fail	1.4 Fail	—	1.2 Fail
2.2 Fail	1.1 Fail	1.8 Fail	1.2 Fail	—

White BG

14.8AAA

6.4AA

3.8AA Large

5.5AA

6.8AA

Black BG

1.4Fail

3.3AA Large

5.5AA

3.8AA Large

3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2A21

3D3D60

959431

818131

74732A

Deuteranopia

2B2C22

383261

989B37

878D34

7B842A

Tritanopia

2E2323

1D6263

A84347

A4393B

A22B2B

Achromatopsia

282828

515151

7D7D7D

656565

525252

Shades & Tints Shades & Tints

#2E2620

Dark

Light

#196B5C

Dark

Light

#AA791A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2e2620;
  --color-2: #196b5c;
  --color-3: #aa791a;
  --color-4: #a84f28;
  --color-5: #a82f28;
}

SCSS

$color-1: #2e2620;
$color-2: #196b5c;
$color-3: #aa791a;
$color-4: #a84f28;
$color-5: #a82f28;

TAILWIND

colors: {
  'brand-1': '#2e2620',
  'brand-2': '#196b5c',
  'brand-3': '#aa791a',
  'brand-4': '#a84f28',
  'brand-5': '#a82f28',
}

RGB Array

[46, 38, 32], [25, 107, 92], [170, 121, 26], [168, 79, 40], [168, 47, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #2E2620, #196B5C, #AA791A, #A84F28, #A82F28 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: #2e2620; --color-2: #196b5c; --color-3: #aa791a; --color-4: #a84f28; --color-5: #a82f28. 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