#7ABFB8 + #CFCFCF + #CFA87C + #CF837C + #C2678B · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7ABFB8

Jade · MediumAquaMarine · Lake Green

HEX

#7ABFB8

RGB

rgb(122, 191, 184)

HSL

hsl(174, 35%, 61%)

HSB

hsb(174, 36%, 75%)

CMYK

cmyk(36%, 0%, 4%, 25%)

Oklch

oklch(75.7% 0.071 187.7)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#CFCFCF

Silver Gray · LightGray · Pearl Gray

HEX

#CFCFCF

RGB

rgb(207, 207, 207)

HSL

hsl(0, 0%, 81%)

HSB

hsb(0, 0%, 81%)

CMYK

cmyk(0%, 0%, 0%, 19%)

Oklch

oklch(85.5% 0.000 89.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#CFA87C

Ginger · Tan · Warm Sun

HEX

#CFA87C

RGB

rgb(207, 168, 124)

HSL

hsl(32, 46%, 65%)

HSB

hsb(32, 40%, 81%)

CMYK

cmyk(0%, 19%, 40%, 19%)

Oklch

oklch(75.6% 0.075 69.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#CF837C

Peach Pink · DarkSalmon · Coral Red

HEX

#CF837C

RGB

rgb(207, 131, 124)

HSL

hsl(5, 46%, 65%)

HSB

hsb(5, 40%, 81%)

CMYK

cmyk(0%, 37%, 40%, 19%)

Oklch

oklch(68.7% 0.095 25.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#C2678B

Dark Violet · LightCoral · Rose Pink

HEX

#C2678B

RGB

rgb(194, 103, 139)

HSL

hsl(336, 43%, 58%)

HSB

hsb(336, 47%, 76%)

CMYK

cmyk(0%, 47%, 28%, 24%)

Oklch

oklch(62.9% 0.123 356.1)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7ABFB8

BE7980

Analogous

79BE95

7ABFB8

79A3BE

Triadic

7ABFB8

B779BE

BEB779

Split-Comp.

7ABFB8

BE79A3

BE9579

Tetradic

7ABFB8

9579BE

BE7980

A3BE79

Contrast Matrix WCAG 2.1 Contrast

7ABFB8	CFCFCF	CFA87C	CF837C	C2678B
—	1.4 Fail	1.0 Fail	1.4 Fail	1.8 Fail
1.4 Fail	—	1.4 Fail	1.9 Fail	2.4 Fail
1.0 Fail	1.4 Fail	—	1.3 Fail	1.7 Fail
1.4 Fail	1.9 Fail	1.3 Fail	—	1.3 Fail
1.8 Fail	2.4 Fail	1.7 Fail	1.3 Fail	—

White BG

2.1Fail

1.6Fail

2.2Fail

2.9Fail

3.7AA Large

Black BG

10.0AAA

13.5AAA

9.5AAA

7.2AAA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9898BA

CFCFCF

BEBE87

AEAD7E

9B9A82

Deuteranopia

948FBA

CFCFCF

C0C389

B3B87E

A0A780

Tritanopia

7DBBBB

CFCFCF

CD8F91

CB7F7F

BD7B7A

Achromatopsia

AAAAAA

CFCFCF

AFAFAF

999999

868686

Shades & Tints Shades & Tints

#7ABFB8

Dark

Light

#CFCFCF

Dark

Light

#CFA87C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7abfb8;
  --color-2: #cfcfcf;
  --color-3: #cfa87c;
  --color-4: #cf837c;
  --color-5: #c2678b;
}

SCSS

$color-1: #7abfb8;
$color-2: #cfcfcf;
$color-3: #cfa87c;
$color-4: #cf837c;
$color-5: #c2678b;

TAILWIND

colors: {
  'brand-1': '#7abfb8',
  'brand-2': '#cfcfcf',
  'brand-3': '#cfa87c',
  'brand-4': '#cf837c',
  'brand-5': '#c2678b',
}

RGB Array

[122, 191, 184], [207, 207, 207], [207, 168, 124], [207, 131, 124], [194, 103, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #7ABFB8, #CFCFCF, #CFA87C, #CF837C, #C2678B is ideal for: health products, baby brands, fresh-style blogs. 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: #7abfb8; --color-2: #cfcfcf; --color-3: #cfa87c; --color-4: #cf837c; --color-5: #c2678b. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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