#697177 + #739A9A + #B0B6A8 + #CFDDA8 + #E8F19B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#697177

Ink Gray · DimGray · Warm Gray

HEX

#697177

RGB

rgb(105, 113, 119)

HSL

hsl(206, 6%, 44%)

HSB

hsb(206, 12%, 47%)

CMYK

cmyk(12%, 5%, 0%, 53%)

Oklch

oklch(54.4% 0.014 240.1)

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

#739A9A

Slate Blue · LightSlateGray · Lake Green

HEX

#739A9A

RGB

rgb(115, 154, 154)

HSL

hsl(180, 16%, 53%)

HSB

hsb(180, 25%, 60%)

CMYK

cmyk(25%, 0%, 0%, 40%)

Oklch

oklch(65.8% 0.043 196.2)

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

#B0B6A8

Willow Green · DarkGray · Silver Sand

HEX

#B0B6A8

RGB

rgb(176, 182, 168)

HSL

hsl(86, 9%, 69%)

HSB

hsb(86, 8%, 71%)

CMYK

cmyk(3%, 0%, 8%, 29%)

Oklch

oklch(76.7% 0.021 125.9)

Traditional「Willow Green」· Paint「Silver Sand」· Creative Urban Concrete

#CFDDA8

Willow Green · Wheat · Apple Green

HEX

#CFDDA8

RGB

rgb(207, 221, 168)

HSL

hsl(76, 44%, 76%)

HSB

hsb(76, 24%, 87%)

CMYK

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

Oklch

oklch(87.4% 0.072 119.9)

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

#E8F19B

Fresh Green · Khaki · Lemon Cream

HEX

#E8F19B

RGB

rgb(232, 241, 155)

HSL

hsl(66, 75%, 78%)

HSB

hsb(66, 36%, 95%)

CMYK

cmyk(4%, 0%, 36%, 5%)

Oklch

oklch(93.2% 0.109 113.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

697177

776F69

Analogous

697776

697177

696A77

Triadic

697177

776971

717769

Split-Comp.

697177

77696A

777669

Tetradic

697177

766977

776F69

6A7769

Contrast Matrix WCAG 2.1 Contrast

697177	739A9A	B0B6A8	CFDDA8	E8F19B
—	1.6 Fail	2.4 Fail	3.4 AA Large	4.1 AA Large
1.6 Fail	—	1.5 Fail	2.1 Fail	2.6 Fail
2.4 Fail	1.5 Fail	—	1.4 Fail	1.7 Fail
3.4 AA Large	2.1 Fail	1.4 Fail	—	1.2 Fail
4.1 AA Large	2.6 Fail	1.7 Fail	1.2 Fail	—

White BG

5.0AA

3.1AA Large

2.1Fail

1.4Fail

1.2Fail

Black BG

4.2AA Large

6.8AA

10.1AAA

14.6AAA

17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6D76

84849A

B3B3AB

D5D5B5

ECECB0

Deuteranopia

6C6B75

827F9A

B2B2AC

D4D3B8

EBEBB5

Tritanopia

697474

759A9A

B0AEAF

D0BFC1

E8C0C4

Achromatopsia

6F6F6F

8E8E8E

B3B3B3

D3D3D3

E5E5E5

Shades & Tints Shades & Tints

#697177

Dark

Light

#739A9A

Dark

Light

#B0B6A8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #697177;
  --color-2: #739a9a;
  --color-3: #b0b6a8;
  --color-4: #cfdda8;
  --color-5: #e8f19b;
}

SCSS

$color-1: #697177;
$color-2: #739a9a;
$color-3: #b0b6a8;
$color-4: #cfdda8;
$color-5: #e8f19b;

TAILWIND

colors: {
  'brand-1': '#697177',
  'brand-2': '#739a9a',
  'brand-3': '#b0b6a8',
  'brand-4': '#cfdda8',
  'brand-5': '#e8f19b',
}

RGB Array

[105, 113, 119], [115, 154, 154], [176, 182, 168], [207, 221, 168], [232, 241, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #697177, #739A9A, #B0B6A8, #CFDDA8, #E8F19B 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: #697177; --color-2: #739a9a; --color-3: #b0b6a8; --color-4: #cfdda8; --color-5: #e8f19b. 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