#6A757C + #6F8593 + #6893AE + #6BABD4 + #4CB9FF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#6A757C

Slate Blue · DimGray · Warm Gray

HEX

#6A757C

RGB

rgb(106, 117, 124)

HSL

hsl(203, 8%, 45%)

HSB

hsb(203, 15%, 49%)

CMYK

cmyk(15%, 6%, 0%, 51%)

Oklch

oklch(55.6% 0.017 235.6)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

#6F8593

Slate Blue · SlateGray · Navy Blue

HEX

#6F8593

RGB

rgb(111, 133, 147)

HSL

hsl(203, 14%, 51%)

HSB

hsb(203, 24%, 58%)

CMYK

cmyk(24%, 10%, 0%, 42%)

Oklch

oklch(60.4% 0.033 236.0)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#6893AE

Slate Blue · CadetBlue · Navy Blue

HEX

#6893AE

RGB

rgb(104, 147, 174)

HSL

hsl(203, 30%, 55%)

HSB

hsb(203, 40%, 68%)

CMYK

cmyk(40%, 16%, 0%, 32%)

Oklch

oklch(64.2% 0.062 236.6)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#6BABD4

Sky Blue · CornflowerBlue · Cobalt Blue

HEX

#6BABD4

RGB

rgb(107, 171, 212)

HSL

hsl(203, 55%, 63%)

HSB

hsb(203, 50%, 83%)

CMYK

cmyk(50%, 19%, 0%, 17%)

Oklch

oklch(71.4% 0.089 237.9)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#4CB9FF

Sky Blue · CornflowerBlue · Cobalt Blue

HEX

#4CB9FF

RGB

rgb(76, 185, 255)

HSL

hsl(203, 100%, 65%)

HSB

hsb(203, 70%, 100%)

CMYK

cmyk(70%, 27%, 0%, 0%)

Oklch

oklch(75.3% 0.141 240.7)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6A757C

7C716A

Analogous

6A7C7A

6A757C

6A6C7C

Triadic

6A757C

7C6A75

757C6A

Split-Comp.

6A757C

7C6A6C

7C7A6A

Tetradic

6A757C

7A6A7C

7C716A

6C7C6A

Contrast Matrix WCAG 2.1 Contrast

6A757C	6F8593	6893AE	6BABD4	4CB9FF
—	1.2 Fail	1.4 Fail	1.9 Fail	2.2 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	1.8 Fail
1.4 Fail	1.2 Fail	—	1.3 Fail	1.5 Fail
1.9 Fail	1.5 Fail	1.3 Fail	—	1.2 Fail
2.2 Fail	1.8 Fail	1.5 Fail	1.2 Fail	—

White BG

4.7AA

3.9AA Large

3.3AA Large

2.5Fail

2.2Fail

Black BG

4.4AA Large

5.5AA

6.4AA

8.4AAA

9.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6F6F7A

797990

7B7BA7

8787CA

7B7CEE

Deuteranopia

6E6D7A

77768F

7875A6

837EC8

756DEA

Tritanopia

6B7979

708D8C

6AA2A1

6EC2C1

51E1DE

Achromatopsia

737373

808080

898989

9D9D9D

A0A0A0

Shades & Tints Shades & Tints

#6A757C

Dark

Light

#6F8593

Dark

Light

#6893AE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6a757c;
  --color-2: #6f8593;
  --color-3: #6893ae;
  --color-4: #6babd4;
  --color-5: #4cb9ff;
}

SCSS

$color-1: #6a757c;
$color-2: #6f8593;
$color-3: #6893ae;
$color-4: #6babd4;
$color-5: #4cb9ff;

TAILWIND

colors: {
  'brand-1': '#6a757c',
  'brand-2': '#6f8593',
  'brand-3': '#6893ae',
  'brand-4': '#6babd4',
  'brand-5': '#4cb9ff',
}

RGB Array

[106, 117, 124], [111, 133, 147], [104, 147, 174], [107, 171, 212], [76, 185, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6A757C, #6F8593, #6893AE, #6BABD4, #4CB9FF 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: #6a757c; --color-2: #6f8593; --color-3: #6893ae; --color-4: #6babd4; --color-5: #4cb9ff. 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