#788080 + #69C0C9 + #7C608E + #DFDD4E + #43616F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#788080

Ink Gray · Gray · Warm Gray

HEX

#788080

RGB

rgb(120, 128, 128)

HSL

hsl(180, 3%, 49%)

HSB

hsb(180, 6%, 50%)

CMYK

cmyk(6%, 0%, 0%, 50%)

Oklch

oklch(59.3% 0.010 196.9)

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

#69C0C9

Slate Blue · MediumAquaMarine · Lake Green

HEX

#69C0C9

RGB

rgb(105, 192, 201)

HSL

hsl(186, 47%, 60%)

HSB

hsb(186, 48%, 79%)

CMYK

cmyk(48%, 4%, 0%, 21%)

Oklch

oklch(75.7% 0.085 204.3)

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

#7C608E

Dark Plum · SlateGray · Violet

HEX

#7C608E

RGB

rgb(124, 96, 142)

HSL

hsl(277, 19%, 47%)

HSB

hsb(277, 32%, 56%)

CMYK

cmyk(13%, 32%, 0%, 44%)

Oklch

oklch(53.5% 0.077 311.6)

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

#DFDD4E

Autumn Sage · SandyBrown · Sunflower

HEX

#DFDD4E

RGB

rgb(223, 221, 78)

HSL

hsl(59, 69%, 59%)

HSB

hsb(59, 65%, 87%)

CMYK

cmyk(0%, 1%, 65%, 13%)

Oklch

oklch(87.4% 0.160 108.5)

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

#43616F

Slate Blue · DimGray · Mint Ice

HEX

#43616F

RGB

rgb(67, 97, 111)

HSL

hsl(199, 25%, 35%)

HSB

hsb(199, 40%, 44%)

CMYK

cmyk(40%, 13%, 0%, 56%)

Oklch

oklch(47.5% 0.042 228.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

788080

817979

Analogous

79817D

788080

797D81

Triadic

788080

817981

818179

Split-Comp.

788080

81797D

817D79

Tetradic

788080

7D7981

817979

7D8179

Contrast Matrix WCAG 2.1 Contrast

788080	69C0C9	7C608E	DFDD4E	43616F
—	1.9 Fail	1.3 Fail	2.8 Fail	1.6 Fail
1.9 Fail	—	2.5 Fail	1.5 Fail	3.1 AA Large
1.3 Fail	2.5 Fail	—	3.7 AA Large	1.2 Fail
2.8 Fail	1.5 Fail	3.7 AA Large	—	4.6 AA
1.6 Fail	3.1 AA Large	1.2 Fail	4.6 AA	—

White BG

4.0AA Large

2.1Fail

5.4AA

1.4Fail

6.6AA

Black BG

5.2AA

10.0AAA

3.9AA Large

14.6AAA

3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7C80

8F8FC7

707083

DEDE71

50506C

Deuteranopia

7B7A80

8A83C6

727480

DEDE79

4E4C6B

Tritanopia

788080

6DC5C5

7B7A78

DF8C92

456968

Achromatopsia

7E7E7E

A7A7A7

6E6E6E

CDCDCD

5A5A5A

Shades & Tints Shades & Tints

#788080

Dark

Light

#69C0C9

Dark

Light

#7C608E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #788080;
  --color-2: #69c0c9;
  --color-3: #7c608e;
  --color-4: #dfdd4e;
  --color-5: #43616f;
}

SCSS

$color-1: #788080;
$color-2: #69c0c9;
$color-3: #7c608e;
$color-4: #dfdd4e;
$color-5: #43616f;

TAILWIND

colors: {
  'brand-1': '#788080',
  'brand-2': '#69c0c9',
  'brand-3': '#7c608e',
  'brand-4': '#dfdd4e',
  'brand-5': '#43616f',
}

RGB Array

[120, 128, 128], [105, 192, 201], [124, 96, 142], [223, 221, 78], [67, 97, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #788080, #69C0C9, #7C608E, #DFDD4E, #43616F 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: #788080; --color-2: #69c0c9; --color-3: #7c608e; --color-4: #dfdd4e; --color-5: #43616f. 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