#A5DD69 + #55BB8F + #3D9DAA + #2D637C + #8E229C · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A5DD69

Willow Green · LightGreen · Apple Green

HEX

#A5DD69

RGB

rgb(165, 221, 105)

HSL

hsl(89, 63%, 64%)

HSB

hsb(89, 52%, 87%)

CMYK

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

Oklch

oklch(83.4% 0.158 130.5)

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

#55BB8F

Mineral Blue · CadetBlue · Olive Green

HEX

#55BB8F

RGB

rgb(85, 187, 143)

HSL

hsl(154, 43%, 53%)

HSB

hsb(154, 55%, 73%)

CMYK

cmyk(55%, 0%, 24%, 27%)

Oklch

oklch(71.9% 0.116 162.8)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#3D9DAA

Slate Blue · SteelBlue · Mint Ice

HEX

#3D9DAA

RGB

rgb(61, 157, 170)

HSL

hsl(187, 47%, 45%)

HSB

hsb(187, 64%, 67%)

CMYK

cmyk(64%, 8%, 0%, 33%)

Oklch

oklch(64.5% 0.090 207.6)

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

#2D637C

Slate Blue · DarkSlateBlue · Mint Ice

HEX

#2D637C

RGB

rgb(45, 99, 124)

HSL

hsl(199, 47%, 33%)

HSB

hsb(199, 64%, 49%)

CMYK

cmyk(64%, 20%, 0%, 51%)

Oklch

oklch(47.4% 0.070 230.8)

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

#8E229C

Royal Purple · DarkMagenta · Eggplant

HEX

#8E229C

RGB

rgb(142, 34, 156)

HSL

hsl(293, 64%, 37%)

HSB

hsb(293, 78%, 61%)

CMYK

cmyk(9%, 78%, 0%, 39%)

Oklch

oklch(47.9% 0.198 322.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A5DD69

A169DD

Analogous

DDDB69

A5DD69

6BDD69

Triadic

A5DD69

69A5DD

DD69A5

Split-Comp.

A5DD69

696BDD

DB69DD

Tetradic

A5DD69

69DDDB

A169DD

DD696B

Contrast Matrix WCAG 2.1 Contrast

A5DD69	55BB8F	3D9DAA	2D637C	8E229C
—	1.5 Fail	2.0 Fail	4.1 AA Large	4.6 AA
1.5 Fail	—	1.3 Fail	2.8 Fail	3.1 AA Large
2.0 Fail	1.3 Fail	—	2.1 Fail	2.3 Fail
4.1 AA Large	2.8 Fail	2.1 Fail	—	1.1 Fail
4.6 AA	3.1 AA Large	2.3 Fail	1.1 Fail	—

White BG

1.6Fail

2.4Fail

3.2AA Large

6.6AA

7.3AAA

Black BG

13.1AAA

8.9AAA

6.6AA

3.2AA Large

2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBE85

81829A

6767A7

444576

5F5E7E

Deuteranopia

BAB68C

7B749C

615AA6

413D75

666E77

Tritanopia

A89BA0

5AA2A4

42A4A4

307170

896762

Achromatopsia

BFBFBF

979797

828282

565656

505050

Shades & Tints Shades & Tints

#A5DD69

Dark

Light

#55BB8F

Dark

Light

#3D9DAA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a5dd69;
  --color-2: #55bb8f;
  --color-3: #3d9daa;
  --color-4: #2d637c;
  --color-5: #8e229c;
}

SCSS

$color-1: #a5dd69;
$color-2: #55bb8f;
$color-3: #3d9daa;
$color-4: #2d637c;
$color-5: #8e229c;

TAILWIND

colors: {
  'brand-1': '#a5dd69',
  'brand-2': '#55bb8f',
  'brand-3': '#3d9daa',
  'brand-4': '#2d637c',
  'brand-5': '#8e229c',
}

RGB Array

[165, 221, 105], [85, 187, 143], [61, 157, 170], [45, 99, 124], [142, 34, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #A5DD69, #55BB8F, #3D9DAA, #2D637C, #8E229C 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: #a5dd69; --color-2: #55bb8f; --color-3: #3d9daa; --color-4: #2d637c; --color-5: #8e229c. 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