#C2BC8D + #DEDBA6 + #B2C489 + #7FB87F + #3D997A · 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

#C2BC8D

Fresh Green · Tan · Sunflower

HEX

#C2BC8D

RGB

rgb(194, 188, 141)

HSL

hsl(53, 30%, 66%)

HSB

hsb(53, 27%, 76%)

CMYK

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

Oklch

oklch(78.8% 0.063 101.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#DEDBA6

Fresh Green · Wheat · Lemon Cream

HEX

#DEDBA6

RGB

rgb(222, 219, 166)

HSL

hsl(57, 46%, 76%)

HSB

hsb(57, 25%, 87%)

CMYK

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

Oklch

oklch(88.1% 0.069 105.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#B2C489

Willow Green · Tan · Apple Green

HEX

#B2C489

RGB

rgb(178, 196, 137)

HSL

hsl(78, 33%, 65%)

HSB

hsb(78, 30%, 77%)

CMYK

cmyk(9%, 0%, 30%, 23%)

Oklch

oklch(79.2% 0.082 122.1)

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

#7FB87F

Celadon · DarkSeaGreen · Apple Green

HEX

#7FB87F

RGB

rgb(127, 184, 127)

HSL

hsl(120, 29%, 61%)

HSB

hsb(120, 31%, 72%)

CMYK

cmyk(31%, 0%, 31%, 28%)

Oklch

oklch(72.8% 0.101 144.5)

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

#3D997A

Mineral Blue · MediumSeaGreen · Mint Ice

HEX

#3D997A

RGB

rgb(61, 153, 122)

HSL

hsl(160, 43%, 42%)

HSB

hsb(160, 60%, 60%)

CMYK

cmyk(60%, 0%, 20%, 40%)

Oklch

oklch(61.9% 0.100 167.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C2BC8D

8E94C2

Analogous

C2A28E

C2BC8D

AEC28E

Triadic

C2BC8D

8EC2BC

BC8EC2

Split-Comp.

C2BC8D

8EAEC2

A28EC2

Tetradic

C2BC8D

8EC2A2

8E94C2

C28EAE

Contrast Matrix WCAG 2.1 Contrast

C2BC8D	DEDBA6	B2C489	7FB87F	3D997A
—	1.4 Fail	1.0 Fail	1.2 Fail	1.8 Fail
1.4 Fail	—	1.3 Fail	1.6 Fail	2.5 Fail
1.0 Fail	1.3 Fail	—	1.2 Fail	1.8 Fail
1.2 Fail	1.6 Fail	1.2 Fail	—	1.5 Fail
1.8 Fail	2.5 Fail	1.8 Fail	1.5 Fail	—

White BG

1.9Fail

1.4Fail

1.9Fail

2.3Fail

3.5AA Large

Black BG

10.9AAA

14.8AAA

11.2AAA

9.1AAA

6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBF98

DDDDB3

BABA97

98988D

656682

Deuteranopia

C0C09B

DDDDB6

B9B79B

949090

605983

Tritanopia

C2A1A3

DEBDBF

B3A3A5

82989A

428789

Achromatopsia

B8B8B8

D6D6D6

B8B8B8

A0A0A0

7A7A7A

Shades & Tints Shades & Tints

#C2BC8D

Dark

Light

#DEDBA6

Dark

Light

#B2C489

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c2bc8d;
  --color-2: #dedba6;
  --color-3: #b2c489;
  --color-4: #7fb87f;
  --color-5: #3d997a;
}

SCSS

$color-1: #c2bc8d;
$color-2: #dedba6;
$color-3: #b2c489;
$color-4: #7fb87f;
$color-5: #3d997a;

TAILWIND

colors: {
  'brand-1': '#c2bc8d',
  'brand-2': '#dedba6',
  'brand-3': '#b2c489',
  'brand-4': '#7fb87f',
  'brand-5': '#3d997a',
}

RGB Array

[194, 188, 141], [222, 219, 166], [178, 196, 137], [127, 184, 127], [61, 153, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #C2BC8D, #DEDBA6, #B2C489, #7FB87F, #3D997A 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: #c2bc8d; --color-2: #dedba6; --color-3: #b2c489; --color-4: #7fb87f; --color-5: #3d997a. 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