#1E9081 + #532D2A + #662C2C + #9E2323 + #D33D30 · 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

#1E9081

Mineral Blue · Teal · Mint Ice

HEX

#1E9081

RGB

rgb(30, 144, 129)

HSL

hsl(172, 66%, 34%)

HSB

hsb(172, 79%, 56%)

CMYK

cmyk(79%, 0%, 10%, 44%)

Oklch

oklch(59.0% 0.099 181.6)

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

#532D2A

Crimson · DarkSlateGray · Wine Red

HEX

#532D2A

RGB

rgb(83, 45, 42)

HSL

hsl(4, 33%, 25%)

HSB

hsb(4, 49%, 33%)

CMYK

cmyk(0%, 46%, 49%, 67%)

Oklch

oklch(34.5% 0.057 25.2)

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

#662C2C

Crimson · Brown · Wine Red

HEX

#662C2C

RGB

rgb(102, 44, 44)

HSL

hsl(0, 40%, 29%)

HSB

hsb(0, 57%, 40%)

CMYK

cmyk(0%, 57%, 57%, 60%)

Oklch

oklch(37.4% 0.084 22.0)

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

#9E2323

Vermilion · Brown · Wine Red

HEX

#9E2323

RGB

rgb(158, 35, 35)

HSL

hsl(0, 64%, 38%)

HSB

hsb(0, 78%, 62%)

CMYK

cmyk(0%, 78%, 78%, 38%)

Oklch

oklch(46.0% 0.159 26.1)

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

#D33D30

Vermilion · Crimson · Passion Red

HEX

#D33D30

RGB

rgb(211, 61, 48)

HSL

hsl(5, 65%, 51%)

HSB

hsb(5, 77%, 83%)

CMYK

cmyk(0%, 71%, 77%, 17%)

Oklch

oklch(58.0% 0.189 29.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1E9081

901D2D

Analogous

1D9047

1E9081

1D6690

Triadic

1E9081

811D90

90811D

Split-Comp.

1E9081

901D66

90471D

Tetradic

1E9081

471D90

901D2D

66901D

Contrast Matrix WCAG 2.1 Contrast

1E9081	532D2A	662C2C	9E2323	D33D30
—	3.0 AA Large	2.7 Fail	2.0 Fail	1.2 Fail
3.0 AA Large	—	1.1 Fail	1.5 Fail	2.5 Fail
2.7 Fail	1.1 Fail	—	1.4 Fail	2.3 Fail
2.0 Fail	1.5 Fail	1.4 Fail	—	1.6 Fail
1.2 Fail	2.5 Fail	2.3 Fail	1.6 Fail	—

White BG

3.9AA Large

11.8AAA

10.7AAA

7.7AAA

4.7AA

Black BG

5.4AA

1.8Fail

2.0Fail

2.7Fail

4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F5085

43422B

4D4C2C

696823

929133

Deuteranopia

494086

45482B

50552C

707923

9BA634

Tritanopia

248788

512B2B

632C2C

982323

CC3636

Achromatopsia

6C6C6C

383838

3D3D3D

484848

686868

Shades & Tints Shades & Tints

#1E9081

Dark

Light

#532D2A

Dark

Light

#662C2C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1e9081;
  --color-2: #532d2a;
  --color-3: #662c2c;
  --color-4: #9e2323;
  --color-5: #d33d30;
}

SCSS

$color-1: #1e9081;
$color-2: #532d2a;
$color-3: #662c2c;
$color-4: #9e2323;
$color-5: #d33d30;

TAILWIND

colors: {
  'brand-1': '#1e9081',
  'brand-2': '#532d2a',
  'brand-3': '#662c2c',
  'brand-4': '#9e2323',
  'brand-5': '#d33d30',
}

RGB Array

[30, 144, 129], [83, 45, 42], [102, 44, 44], [158, 35, 35], [211, 61, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #1E9081, #532D2A, #662C2C, #9E2323, #D33D30 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: #1e9081; --color-2: #532d2a; --color-3: #662c2c; --color-4: #9e2323; --color-5: #d33d30. 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