#B1F7F5 + #1BE2F7 + #7AB5A1 + #A39F82 + #2EADA2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B1F7F5

Jade · LightBlue · Glacier Blue

HEX

#B1F7F5

RGB

rgb(177, 247, 245)

HSL

hsl(178, 81%, 83%)

HSB

hsb(178, 28%, 97%)

CMYK

cmyk(28%, 0%, 1%, 3%)

Oklch

oklch(92.9% 0.069 193.8)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#1BE2F7

Lake Blue · Cyan · Lake Green

HEX

#1BE2F7

RGB

rgb(27, 226, 247)

HSL

hsl(186, 93%, 54%)

HSB

hsb(186, 89%, 97%)

CMYK

cmyk(89%, 9%, 0%, 3%)

Oklch

oklch(83.5% 0.140 207.0)

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

#7AB5A1

Mineral Blue · DarkSeaGreen · Lake Green

HEX

#7AB5A1

RGB

rgb(122, 181, 161)

HSL

hsl(160, 29%, 59%)

HSB

hsb(160, 33%, 71%)

CMYK

cmyk(33%, 0%, 11%, 29%)

Oklch

oklch(72.7% 0.068 171.1)

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

#A39F82

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#A39F82

RGB

rgb(163, 159, 130)

HSL

hsl(53, 15%, 57%)

HSB

hsb(53, 20%, 64%)

CMYK

cmyk(0%, 2%, 20%, 36%)

Oklch

oklch(69.8% 0.041 100.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#2EADA2

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#2EADA2

RGB

rgb(46, 173, 162)

HSL

hsl(175, 58%, 43%)

HSB

hsb(175, 73%, 68%)

CMYK

cmyk(73%, 0%, 6%, 32%)

Oklch

oklch(67.8% 0.108 186.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1F7F5

F7B1B3

Analogous

B1F7D1

B1F7F5

B1D6F7

Triadic

B1F7F5

F4B1F7

F7F4B1

Split-Comp.

B1F7F5

F7B1D6

F7D1B1

Tetradic

B1F7F5

D1B1F7

F7B1B3

D6F7B1

Contrast Matrix WCAG 2.1 Contrast

B1F7F5	1BE2F7	7AB5A1	A39F82	2EADA2
—	1.3 Fail	2.0 Fail	2.2 Fail	2.3 Fail
1.3 Fail	—	1.5 Fail	1.7 Fail	1.7 Fail
2.0 Fail	1.5 Fail	—	1.1 Fail	1.2 Fail
2.2 Fail	1.7 Fail	1.1 Fail	—	1.0 Fail
2.3 Fail	1.7 Fail	1.2 Fail	1.0 Fail	—

White BG

1.2Fail

1.6Fail

2.3Fail

2.7Fail

2.8Fail

Black BG

17.5AAA

13.3AAA

9.0AAA

7.8AAA

7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFD0F5

7173F2

9494A6

A1A189

6566A5

Deuteranopia

CBC6F6

6657F1

908CA7

A2A28B

5E54A5

Tritanopia

B5F6F6

25EEED

7DAAAB

A38F90

34A7A7

Achromatopsia

E2E2E2

A9A9A9

A1A1A1

9D9D9D

868686

Shades & Tints Shades & Tints

#B1F7F5

Dark

Light

#1BE2F7

Dark

Light

#7AB5A1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1f7f5;
  --color-2: #1be2f7;
  --color-3: #7ab5a1;
  --color-4: #a39f82;
  --color-5: #2eada2;
}

SCSS

$color-1: #b1f7f5;
$color-2: #1be2f7;
$color-3: #7ab5a1;
$color-4: #a39f82;
$color-5: #2eada2;

TAILWIND

colors: {
  'brand-1': '#b1f7f5',
  'brand-2': '#1be2f7',
  'brand-3': '#7ab5a1',
  'brand-4': '#a39f82',
  'brand-5': '#2eada2',
}

RGB Array

[177, 247, 245], [27, 226, 247], [122, 181, 161], [163, 159, 130], [46, 173, 162]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B1F7F5, #1BE2F7, #7AB5A1, #A39F82, #2EADA2 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: #b1f7f5; --color-2: #1be2f7; --color-3: #7ab5a1; --color-4: #a39f82; --color-5: #2eada2. 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 general-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