#6E3000 + #733F0D + #5C4D46 + #4D4D57 + #5C627A · 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

#6E3000

Tangerine · Maroon · Cinnamon

HEX

#6E3000

RGB

rgb(110, 48, 0)

HSL

hsl(26, 100%, 22%)

HSB

hsb(26, 100%, 43%)

CMYK

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

Oklch

oklch(38.8% 0.103 50.0)

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

#733F0D

Tangerine · Sienna · Cinnamon

HEX

#733F0D

RGB

rgb(115, 63, 13)

HSL

hsl(29, 80%, 25%)

HSB

hsb(29, 89%, 45%)

CMYK

cmyk(0%, 45%, 89%, 55%)

Oklch

oklch(42.4% 0.094 58.2)

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

#5C4D46

Tangerine · DarkOliveGreen · Amber Brown

HEX

#5C4D46

RGB

rgb(92, 77, 70)

HSL

hsl(19, 14%, 32%)

HSB

hsb(19, 24%, 36%)

CMYK

cmyk(0%, 16%, 24%, 64%)

Oklch

oklch(43.3% 0.023 46.5)

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

#4D4D57

Ink Gray · DarkSlateGray · Charcoal

HEX

#4D4D57

RGB

rgb(77, 77, 87)

HSL

hsl(240, 6%, 32%)

HSB

hsb(240, 11%, 34%)

CMYK

cmyk(11%, 11%, 0%, 66%)

Oklch

oklch(42.4% 0.016 285.7)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#5C627A

Indigo · DimGray · Navy Blue

HEX

#5C627A

RGB

rgb(92, 98, 122)

HSL

hsl(228, 14%, 42%)

HSB

hsb(228, 25%, 48%)

CMYK

cmyk(25%, 20%, 0%, 52%)

Oklch

oklch(50.0% 0.039 273.9)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6E3000

004070

Analogous

700007

6E3000

706900

Triadic

6E3000

007031

310070

Split-Comp.

6E3000

007069

000770

Tetradic

6E3000

077000

004070

690070

Contrast Matrix WCAG 2.1 Contrast

6E3000	733F0D	5C4D46	4D4D57	5C627A
—	1.2 Fail	1.2 Fail	1.2 Fail	1.7 Fail
1.2 Fail	—	1.1 Fail	1.0 Fail	1.4 Fail
1.2 Fail	1.1 Fail	—	1.0 Fail	1.3 Fail
1.2 Fail	1.0 Fail	1.0 Fail	—	1.4 Fail
1.7 Fail	1.4 Fail	1.3 Fail	1.4 Fail	—

White BG

10.1AAA

8.6AAA

8.1AAA

8.4AAA

6.0AA

Black BG

2.1Fail

2.4Fail

2.6Fail

2.5Fail

3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

53530C

5C5C19

565548

4D4D55

5F5F74

Deuteranopia

575B0E

60631C

565748

4D4D54

5E5E73

Tritanopia

6B1517

702325

5B4949

4D5352

5C706F

Achromatopsia

3D3D3D

494949

515151

4E4E4E

636363

Shades & Tints Shades & Tints

#6E3000

Dark

Light

#733F0D

Dark

Light

#5C4D46

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6e3000;
  --color-2: #733f0d;
  --color-3: #5c4d46;
  --color-4: #4d4d57;
  --color-5: #5c627a;
}

SCSS

$color-1: #6e3000;
$color-2: #733f0d;
$color-3: #5c4d46;
$color-4: #4d4d57;
$color-5: #5c627a;

TAILWIND

colors: {
  'brand-1': '#6e3000',
  'brand-2': '#733f0d',
  'brand-3': '#5c4d46',
  'brand-4': '#4d4d57',
  'brand-5': '#5c627a',
}

RGB Array

[110, 48, 0], [115, 63, 13], [92, 77, 70], [77, 77, 87], [92, 98, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #6E3000, #733F0D, #5C4D46, #4D4D57, #5C627A 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: #6e3000; --color-2: #733f0d; --color-3: #5c4d46; --color-4: #4d4d57; --color-5: #5c627a. 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