#422136 + #7D554B + #6F714C + #AF8B1B + #AE2A35 · 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

#422136

Rose Purple · DarkSlateGray · Raspberry

HEX

#422136

RGB

rgb(66, 33, 54)

HSL

hsl(322, 33%, 19%)

HSB

hsb(322, 50%, 26%)

CMYK

cmyk(0%, 50%, 18%, 74%)

Oklch

oklch(30.1% 0.059 342.5)

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

#7D554B

Crimson · DimGray · Wine Red

HEX

#7D554B

RGB

rgb(125, 85, 75)

HSL

hsl(12, 25%, 39%)

HSB

hsb(12, 40%, 49%)

CMYK

cmyk(0%, 32%, 40%, 51%)

Oklch

oklch(49.0% 0.056 34.6)

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

#6F714C

Autumn Sage · DimGray · Honey Gold

HEX

#6F714C

RGB

rgb(111, 113, 76)

HSL

hsl(63, 20%, 37%)

HSB

hsb(63, 33%, 44%)

CMYK

cmyk(2%, 0%, 33%, 56%)

Oklch

oklch(53.7% 0.054 110.7)

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

#AF8B1B

Ochre · DarkGoldenRod · Honey Gold

HEX

#AF8B1B

RGB

rgb(175, 139, 27)

HSL

hsl(45, 73%, 40%)

HSB

hsb(45, 85%, 69%)

CMYK

cmyk(0%, 21%, 85%, 31%)

Oklch

oklch(65.3% 0.126 89.0)

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

#AE2A35

Vermilion · Brown · Passion Red

HEX

#AE2A35

RGB

rgb(174, 42, 53)

HSL

hsl(355, 61%, 42%)

HSB

hsb(355, 76%, 68%)

CMYK

cmyk(0%, 76%, 70%, 32%)

Oklch

oklch(49.8% 0.168 21.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

422136

20402C

Analogous

3C2040

422136

402025

Triadic

422136

354020

203540

Split-Comp.

422136

254020

20403C

Tetradic

422136

403C20

20402C

202540

Contrast Matrix WCAG 2.1 Contrast

422136	7D554B	6F714C	AF8B1B	AE2A35
—	2.2 Fail	2.8 Fail	4.3 AA Large	2.1 Fail
2.2 Fail	—	1.3 Fail	2.0 Fail	1.0 Fail
2.8 Fail	1.3 Fail	—	1.6 Fail	1.3 Fail
4.3 AA Large	2.0 Fail	1.6 Fail	—	2.1 Fail
2.1 Fail	1.0 Fail	1.3 Fail	2.1 Fail	—

White BG

14.0AAA

6.4AA

5.1AA

3.2AA Large

6.6AA

Black BG

1.5Fail

3.3AA Large

4.1AA Large

6.5AA

3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

343331

6C6B4D

707055

9F9F36

757432

Deuteranopia

363830

6E714E

707057

A2A43D

7D8632

Tritanopia

402D2C

7B4F50

6F5C5E

AD4B50

A73030

Achromatopsia

2D2D2D

606060

6C6C6C

898989

535353

Shades & Tints Shades & Tints

#422136

Dark

Light

#7D554B

Dark

Light

#6F714C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #422136;
  --color-2: #7d554b;
  --color-3: #6f714c;
  --color-4: #af8b1b;
  --color-5: #ae2a35;
}

SCSS

$color-1: #422136;
$color-2: #7d554b;
$color-3: #6f714c;
$color-4: #af8b1b;
$color-5: #ae2a35;

TAILWIND

colors: {
  'brand-1': '#422136',
  'brand-2': '#7d554b',
  'brand-3': '#6f714c',
  'brand-4': '#af8b1b',
  'brand-5': '#ae2a35',
}

RGB Array

[66, 33, 54], [125, 85, 75], [111, 113, 76], [175, 139, 27], [174, 42, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #422136, #7D554B, #6F714C, #AF8B1B, #AE2A35 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: #422136; --color-2: #7d554b; --color-3: #6f714c; --color-4: #af8b1b; --color-5: #ae2a35. 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