#7C2EC8 + #836EB2 + #89AE9A + #B0C1B5 + #EDE3D4 · 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

#7C2EC8

Royal Purple · DarkOrchid · Violet

HEX

#7C2EC8

RGB

rgb(124, 46, 200)

HSL

hsl(270, 63%, 48%)

HSB

hsb(270, 77%, 78%)

CMYK

cmyk(38%, 77%, 0%, 22%)

Oklch

oklch(49.8% 0.221 301.6)

Traditional「Royal Purple」· Paint「Violet」· Creative Blush Sunrise

#836EB2

Deep Indigo · LightSlateGray · Navy Blue

HEX

#836EB2

RGB

rgb(131, 110, 178)

HSL

hsl(259, 31%, 56%)

HSB

hsb(259, 38%, 70%)

CMYK

cmyk(26%, 38%, 0%, 30%)

Oklch

oklch(58.6% 0.104 297.3)

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

#89AE9A

Celadon · DarkSeaGreen · Apple Green

HEX

#89AE9A

RGB

rgb(137, 174, 154)

HSL

hsl(148, 19%, 61%)

HSB

hsb(148, 21%, 68%)

CMYK

cmyk(21%, 0%, 11%, 32%)

Oklch

oklch(71.8% 0.050 161.2)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#B0C1B5

Celadon · Silver · Apple Green

HEX

#B0C1B5

RGB

rgb(176, 193, 181)

HSL

hsl(138, 12%, 72%)

HSB

hsb(138, 9%, 76%)

CMYK

cmyk(9%, 0%, 6%, 24%)

Oklch

oklch(79.4% 0.025 155.0)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#EDE3D4

Goose Yellow · Beige · Peach Orange

HEX

#EDE3D4

RGB

rgb(237, 227, 212)

HSL

hsl(36, 41%, 88%)

HSB

hsb(36, 11%, 93%)

CMYK

cmyk(0%, 4%, 11%, 7%)

Oklch

oklch(92.0% 0.023 78.2)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7C2EC8

7AC82D

Analogous

2D2DC8

7C2EC8

C82DC8

Triadic

7C2EC8

C87A2D

2DC87A

Split-Comp.

7C2EC8

C8C82D

2DC82D

Tetradic

7C2EC8

C82D2D

7AC82D

2DC8C8

Contrast Matrix WCAG 2.1 Contrast

7C2EC8	836EB2	89AE9A	B0C1B5	EDE3D4
—	1.6 Fail	2.8 Fail	3.6 AA Large	5.4 AA
1.6 Fail	—	1.8 Fail	2.3 Fail	3.4 AA Large
2.8 Fail	1.8 Fail	—	1.3 Fail	1.9 Fail
3.6 AA Large	2.3 Fail	1.3 Fail	—	1.5 Fail
5.4 AA	3.4 AA Large	1.9 Fail	1.5 Fail	—

White BG

6.8AA

4.3AA Large

2.4Fail

1.9Fail

1.3Fail

Black BG

3.1AA Large

4.8AA

8.6AAA

11.1AAA

16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5A5AA3

7A7AA2

99999F

B7B8B8

E9E9D8

Deuteranopia

5F659A

7B7D9E

9794A0

B6B5B9

E9EAD8

Tritanopia

78857F

829592

8BA3A4

B1BABB

ECDADB

Achromatopsia

575757

7C7C7C

A1A1A1

BBBBBB

E4E4E4

Shades & Tints Shades & Tints

#7C2EC8

Dark

Light

#836EB2

Dark

Light

#89AE9A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7c2ec8;
  --color-2: #836eb2;
  --color-3: #89ae9a;
  --color-4: #b0c1b5;
  --color-5: #ede3d4;
}

SCSS

$color-1: #7c2ec8;
$color-2: #836eb2;
$color-3: #89ae9a;
$color-4: #b0c1b5;
$color-5: #ede3d4;

TAILWIND

colors: {
  'brand-1': '#7c2ec8',
  'brand-2': '#836eb2',
  'brand-3': '#89ae9a',
  'brand-4': '#b0c1b5',
  'brand-5': '#ede3d4',
}

RGB Array

[124, 46, 200], [131, 110, 178], [137, 174, 154], [176, 193, 181], [237, 227, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #7C2EC8, #836EB2, #89AE9A, #B0C1B5, #EDE3D4 is ideal for: corporate websites, product showcases, portfolios. 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: #7c2ec8; --color-2: #836eb2; --color-3: #89ae9a; --color-4: #b0c1b5; --color-5: #ede3d4. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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