#69888B + #87A08D + #C0C291 + #E1DD96 + #F7F6A3 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#69888B

Slate Blue · SlateGray · Mint Ice

HEX

#69888B

RGB

rgb(105, 136, 139)

HSL

hsl(185, 14%, 48%)

HSB

hsb(185, 24%, 55%)

CMYK

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

Oklch

oklch(60.4% 0.035 203.6)

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

#87A08D

Celadon · DarkSeaGreen · Olive Green

HEX

#87A08D

RGB

rgb(135, 160, 141)

HSL

hsl(134, 12%, 58%)

HSB

hsb(134, 16%, 63%)

CMYK

cmyk(16%, 0%, 12%, 37%)

Oklch

oklch(68.1% 0.039 152.5)

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

#C0C291

Fresh Green · Tan · Sunflower

HEX

#C0C291

RGB

rgb(192, 194, 145)

HSL

hsl(62, 29%, 66%)

HSB

hsb(62, 25%, 76%)

CMYK

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

Oklch

oklch(80.0% 0.066 109.7)

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

#E1DD96

Fresh Green · Khaki · Sunflower

HEX

#E1DD96

RGB

rgb(225, 221, 150)

HSL

hsl(57, 56%, 74%)

HSB

hsb(57, 33%, 88%)

CMYK

cmyk(0%, 2%, 33%, 12%)

Oklch

oklch(88.4% 0.091 105.4)

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

#F7F6A3

Fresh Green · Khaki · Lemon Cream

HEX

#F7F6A3

RGB

rgb(247, 246, 163)

HSL

hsl(59, 84%, 80%)

HSB

hsb(59, 34%, 97%)

CMYK

cmyk(0%, 0%, 34%, 3%)

Oklch

oklch(95.5% 0.104 107.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

69888B

8C6C69

Analogous

698C7D

69888B

69788C

Triadic

69888B

8C6989

898C69

Split-Comp.

69888B

8C6978

8C7D69

Tetradic

69888B

7D698C

8C6C69

788C69

Contrast Matrix WCAG 2.1 Contrast

69888B	87A08D	C0C291	E1DD96	F7F6A3
—	1.4 Fail	2.1 Fail	2.7 Fail	3.4 AA Large
1.4 Fail	—	1.5 Fail	2.0 Fail	2.5 Fail
2.1 Fail	1.5 Fail	—	1.3 Fail	1.6 Fail
2.7 Fail	2.0 Fail	1.3 Fail	—	1.2 Fail
3.4 AA Large	2.5 Fail	1.6 Fail	1.2 Fail	—

White BG

3.8AA Large

2.8Fail

1.8Fail

1.4Fail

1.1Fail

Black BG

5.5AA

7.4AAA

11.4AAA

15.0AAA

18.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

76778A

929292

C1C19D

DFDFA7

F7F7B7

Deuteranopia

75728A

908F93

C1C1A0

E0E0AB

F7F7BC

Tritanopia

6B8A8A

889596

C0A6A8

E1B5B8

F7C7CA

Achromatopsia

7F7F7F

969696

BCBCBC

D6D6D6

EDEDED

Shades & Tints Shades & Tints

#69888B

Dark

Light

#87A08D

Dark

Light

#C0C291

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #69888b;
  --color-2: #87a08d;
  --color-3: #c0c291;
  --color-4: #e1dd96;
  --color-5: #f7f6a3;
}

SCSS

$color-1: #69888b;
$color-2: #87a08d;
$color-3: #c0c291;
$color-4: #e1dd96;
$color-5: #f7f6a3;

TAILWIND

colors: {
  'brand-1': '#69888b',
  'brand-2': '#87a08d',
  'brand-3': '#c0c291',
  'brand-4': '#e1dd96',
  'brand-5': '#f7f6a3',
}

RGB Array

[105, 136, 139], [135, 160, 141], [192, 194, 145], [225, 221, 150], [247, 246, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #69888B, #87A08D, #C0C291, #E1DD96, #F7F6A3 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: #69888b; --color-2: #87a08d; --color-3: #c0c291; --color-4: #e1dd96; --color-5: #f7f6a3. 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