#61C7F7 + #B4E4BE + #EFE7B6 + #DABEA9 + #9D4369 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#61C7F7

Sky Blue · LightSkyBlue · Lake Green

HEX

#61C7F7

RGB

rgb(97, 199, 247)

HSL

hsl(199, 90%, 67%)

HSB

hsb(199, 61%, 97%)

CMYK

cmyk(61%, 19%, 0%, 3%)

Oklch

oklch(78.8% 0.117 231.2)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#B4E4BE

Celadon · Silver · Apple Green

HEX

#B4E4BE

RGB

rgb(180, 228, 190)

HSL

hsl(133, 47%, 80%)

HSB

hsb(133, 21%, 89%)

CMYK

cmyk(21%, 0%, 17%, 11%)

Oklch

oklch(87.5% 0.072 151.0)

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

#EFE7B6

Fresh Green · Wheat · Lemon Cream

HEX

#EFE7B6

RGB

rgb(239, 231, 182)

HSL

hsl(52, 64%, 83%)

HSB

hsb(52, 24%, 94%)

CMYK

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

Oklch

oklch(92.2% 0.064 99.8)

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

#DABEA9

Apricot · Tan · Peach Orange

HEX

#DABEA9

RGB

rgb(218, 190, 169)

HSL

hsl(26, 40%, 76%)

HSB

hsb(26, 22%, 85%)

CMYK

cmyk(0%, 13%, 22%, 15%)

Oklch

oklch(82.0% 0.043 59.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#9D4369

Dark Violet · Sienna · Camellia

HEX

#9D4369

RGB

rgb(157, 67, 105)

HSL

hsl(335, 40%, 44%)

HSB

hsb(335, 57%, 62%)

CMYK

cmyk(0%, 57%, 33%, 38%)

Oklch

oklch(51.3% 0.127 356.1)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

61C7F7

F78F5F

Analogous

5FF7DB

61C7F7

5F7BF7

Triadic

61C7F7

F75FC7

C7F75F

Split-Comp.

61C7F7

F75F7B

F7DB5F

Tetradic

61C7F7

DB5FF7

F78F5F

7BF75F

Contrast Matrix WCAG 2.1 Contrast

61C7F7	B4E4BE	EFE7B6	DABEA9	9D4369
—	1.3 Fail	1.5 Fail	1.1 Fail	3.2 AA Large
1.3 Fail	—	1.1 Fail	1.2 Fail	4.3 AA Large
1.5 Fail	1.1 Fail	—	1.4 Fail	4.9 AA
1.1 Fail	1.2 Fail	1.4 Fail	—	3.5 AA Large
3.2 AA Large	4.3 AA Large	4.9 AA	3.5 AA Large	—

White BG

1.9Fail

1.4Fail

1.3Fail

1.8Fail

6.1AA

Black BG

11.0AAA

14.8AAA

16.8AAA

11.9AAA

3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8D8EEB

C9C9C7

ECEBC2

CECEAE

767560

Deuteranopia

8780E9

C6C2C9

ECEDC5

D0D2AF

7B825E

Tritanopia

66E2E0

B6CED0

EFCBCD

D9B2B3

995957

Achromatopsia

AEAEAE

D1D1D1

E4E4E4

C4C4C4

626262

Shades & Tints Shades & Tints

#61C7F7

Dark

Light

#B4E4BE

Dark

Light

#EFE7B6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #61c7f7;
  --color-2: #b4e4be;
  --color-3: #efe7b6;
  --color-4: #dabea9;
  --color-5: #9d4369;
}

SCSS

$color-1: #61c7f7;
$color-2: #b4e4be;
$color-3: #efe7b6;
$color-4: #dabea9;
$color-5: #9d4369;

TAILWIND

colors: {
  'brand-1': '#61c7f7',
  'brand-2': '#b4e4be',
  'brand-3': '#efe7b6',
  'brand-4': '#dabea9',
  'brand-5': '#9d4369',
}

RGB Array

[97, 199, 247], [180, 228, 190], [239, 231, 182], [218, 190, 169], [157, 67, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #61C7F7, #B4E4BE, #EFE7B6, #DABEA9, #9D4369 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: #61c7f7; --color-2: #b4e4be; --color-3: #efe7b6; --color-4: #dabea9; --color-5: #9d4369. 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