← Back to Editor

#BEC9B7 · #64D1E7 · #76B7BF · #189EB4 · #746F63

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BEC9B7

Celadon · Silver · Apple Green

HEX
#BEC9B7
RGB
rgb(190, 201, 183)
HSL
hsl(97, 14%, 75%)
HSB
hsb(97, 9%, 79%)
CMYK
cmyk(5%, 0%, 9%, 21%)
Oklch
oklch(82.2% 0.027 133.0)

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

#64D1E7

Sky Blue · SkyBlue · Lake Green

HEX
#64D1E7
RGB
rgb(100, 209, 231)
HSL
hsl(190, 73%, 65%)
HSB
hsb(190, 57%, 91%)
CMYK
cmyk(57%, 10%, 0%, 9%)
Oklch
oklch(80.5% 0.104 212.8)

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

#76B7BF

Sky Blue · MediumAquaMarine · Lake Green

HEX
#76B7BF
RGB
rgb(118, 183, 191)
HSL
hsl(187, 36%, 61%)
HSB
hsb(187, 38%, 75%)
CMYK
cmyk(38%, 4%, 0%, 25%)
Oklch
oklch(73.9% 0.067 205.7)

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

#189EB4

Lake Blue · LightSeaGreen · Mint Ice

HEX
#189EB4
RGB
rgb(24, 158, 180)
HSL
hsl(188, 76%, 40%)
HSB
hsb(188, 87%, 71%)
CMYK
cmyk(87%, 12%, 0%, 29%)
Oklch
oklch(64.4% 0.108 212.6)

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

#746F63

Ochre · DimGray · Warm Gray

HEX
#746F63
RGB
rgb(116, 111, 99)
HSL
hsl(42, 8%, 42%)
HSB
hsb(42, 15%, 45%)
CMYK
cmyk(0%, 4%, 15%, 55%)
Oklch
oklch(54.3% 0.019 88.1)

Traditional「Ochre」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BEC9B7
C1B6C8

Analogous

C6C8B6
BEC9B7
B6C8B8

Triadic

BEC9B7
B6BDC8
C8B6BD

Split-Comp.

BEC9B7
B8B6C8
C8B6C6

Tetradic

BEC9B7
B6C6C8
C1B6C8
C8B8B6

Contrast Matrix WCAG 2.1 Contrast

BEC9B7
64D1E7
76B7BF
189EB4
746F63
—
1.0
Fail
1.3
Fail
1.9
Fail
2.9
Fail
1.0
Fail
—
1.3
Fail
1.8
Fail
2.8
Fail
1.3
Fail
1.3
Fail
—
1.4
Fail
2.2
Fail
1.9
Fail
1.8
Fail
1.4
Fail
—
1.6
Fail
2.9
Fail
2.8
Fail
2.2
Fail
1.6
Fail
—
White BG
1.7Fail
1.8Fail
2.3Fail
3.2AA Large
5.0AA
Black BG
12.2AAA
11.8AAA
9.3AAA
6.6AA
4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C3BB
9394E2
9293BD
5253AF
727266

Deuteranopia

C2C1BC
8D85E0
8E8ABD
4A40AD
727267

Tritanopia

BFBFC0
69DDDD
79BCBB
1FAAAA
746869

Achromatopsia

C4C4C4
B3B3B3
A4A4A4
787878
6F6F6F

Shades & Tints Shades & Tints

#BEC9B7

Dark
Light

#64D1E7

Dark
Light

#76B7BF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bec9b7;
  --color-2: #64d1e7;
  --color-3: #76b7bf;
  --color-4: #189eb4;
  --color-5: #746f63;
}

SCSS

$color-1: #bec9b7;
$color-2: #64d1e7;
$color-3: #76b7bf;
$color-4: #189eb4;
$color-5: #746f63;

TAILWIND

colors: {
  'brand-1': '#bec9b7',
  'brand-2': '#64d1e7',
  'brand-3': '#76b7bf',
  'brand-4': '#189eb4',
  'brand-5': '#746f63',
}

RGB Array

[190, 201, 183], [100, 209, 231], [118, 183, 191], [24, 158, 180], [116, 111, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BEC9B7, #64D1E7, #76B7BF, #189EB4, #746F63 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: #bec9b7; --color-2: #64d1e7; --color-3: #76b7bf; --color-4: #189eb4; --color-5: #746f63. 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