#48C3C0 + #63BA87 + #9B9645 + #C68067 + #E76A96 · 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

#48C3C0

Mineral Blue · MediumTurquoise · Lake Green

HEX

#48C3C0

RGB

rgb(72, 195, 192)

HSL

hsl(179, 51%, 52%)

HSB

hsb(179, 63%, 76%)

CMYK

cmyk(63%, 0%, 2%, 24%)

Oklch

oklch(74.9% 0.107 192.8)

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

#63BA87

Celadon · CadetBlue · Olive Green

HEX

#63BA87

RGB

rgb(99, 186, 135)

HSL

hsl(145, 39%, 56%)

HSB

hsb(145, 47%, 73%)

CMYK

cmyk(47%, 0%, 27%, 27%)

Oklch

oklch(72.0% 0.114 156.3)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#9B9645

Autumn Sage · DarkGoldenRod · Honey Gold

HEX

#9B9645

RGB

rgb(155, 150, 69)

HSL

hsl(57, 38%, 44%)

HSB

hsb(57, 55%, 61%)

CMYK

cmyk(0%, 3%, 55%, 39%)

Oklch

oklch(66.0% 0.104 105.7)

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

#C68067

Tangerine · DarkSalmon · Warm Sun

HEX

#C68067

RGB

rgb(198, 128, 103)

HSL

hsl(16, 45%, 59%)

HSB

hsb(16, 48%, 78%)

CMYK

cmyk(0%, 35%, 48%, 22%)

Oklch

oklch(66.7% 0.095 40.4)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#E76A96

Rouge · LightCoral · Rose Pink

HEX

#E76A96

RGB

rgb(231, 106, 150)

HSL

hsl(339, 72%, 66%)

HSB

hsb(339, 54%, 91%)

CMYK

cmyk(0%, 54%, 35%, 9%)

Oklch

oklch(68.7% 0.161 0.1)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

48C3C0

C34648

Analogous

46C383

48C3C0

4687C3

Triadic

48C3C0

C146C3

C3C146

Split-Comp.

48C3C0

C34687

C38346

Tetradic

48C3C0

8346C3

C34648

87C346

Contrast Matrix WCAG 2.1 Contrast

48C3C0	63BA87	9B9645	C68067	E76A96
—	1.1 Fail	1.4 Fail	1.5 Fail	1.4 Fail
1.1 Fail	—	1.3 Fail	1.3 Fail	1.3 Fail
1.4 Fail	1.3 Fail	—	1.0 Fail	1.0 Fail
1.5 Fail	1.3 Fail	1.0 Fail	—	1.0 Fail
1.4 Fail	1.3 Fail	1.0 Fail	1.0 Fail	—

White BG

2.1Fail

2.4Fail

3.1AA Large

3.0AA Large

Black BG

9.8AAA

8.9AAA

6.8AA

6.7AA

6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7D7EC1

898993

999959

A8A76D

B1B08B

Deuteranopia

766DC1

847D96

999A5D

ACB16F

B8C289

Tritanopia

4EC1C1

679D9F

9B686B

C37273

E18381

Achromatopsia

9E9E9E

9A9A9A

8E8E8E

929292

949494

Shades & Tints Shades & Tints

#48C3C0

Dark

Light

#63BA87

Dark

Light

#9B9645

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #48c3c0;
  --color-2: #63ba87;
  --color-3: #9b9645;
  --color-4: #c68067;
  --color-5: #e76a96;
}

SCSS

$color-1: #48c3c0;
$color-2: #63ba87;
$color-3: #9b9645;
$color-4: #c68067;
$color-5: #e76a96;

TAILWIND

colors: {
  'brand-1': '#48c3c0',
  'brand-2': '#63ba87',
  'brand-3': '#9b9645',
  'brand-4': '#c68067',
  'brand-5': '#e76a96',
}

RGB Array

[72, 195, 192], [99, 186, 135], [155, 150, 69], [198, 128, 103], [231, 106, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #48C3C0, #63BA87, #9B9645, #C68067, #E76A96 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: #48c3c0; --color-2: #63ba87; --color-3: #9b9645; --color-4: #c68067; --color-5: #e76a96. 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