#757080 + #63AD97 + #96993D + #B8775C + #FF2167 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#757080

Ink Gray · Gray · Warm Gray

HEX

#757080

RGB

rgb(117, 112, 128)

HSL

hsl(259, 7%, 47%)

HSB

hsb(259, 13%, 50%)

CMYK

cmyk(9%, 13%, 0%, 50%)

Oklch

oklch(55.5% 0.025 299.8)

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

#63AD97

Mineral Blue · CadetBlue · Lake Green

HEX

#63AD97

RGB

rgb(99, 173, 151)

HSL

hsl(162, 31%, 53%)

HSB

hsb(162, 43%, 68%)

CMYK

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

Oklch

oklch(69.3% 0.082 172.6)

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

#96993D

Autumn Sage · DarkGoldenRod · Honey Gold

HEX

#96993D

RGB

rgb(150, 153, 61)

HSL

hsl(62, 43%, 42%)

HSB

hsb(62, 60%, 60%)

CMYK

cmyk(2%, 0%, 60%, 40%)

Oklch

oklch(66.2% 0.115 110.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#B8775C

Tangerine · Sienna · Warm Sun

HEX

#B8775C

RGB

rgb(184, 119, 92)

HSL

hsl(18, 39%, 54%)

HSB

hsb(18, 50%, 72%)

CMYK

cmyk(0%, 35%, 50%, 28%)

Oklch

oklch(63.1% 0.091 43.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#FF2167

Dark Violet · DeepPink · Rose Pink

HEX

#FF2167

RGB

rgb(255, 33, 103)

HSL

hsl(341, 100%, 56%)

HSB

hsb(341, 87%, 100%)

CMYK

cmyk(0%, 87%, 60%, 0%)

Oklch

oklch(64.7% 0.246 11.5)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

757080

7B806F

Analogous

6F7380

757080

7D6F80

Triadic

757080

80756F

6F8075

Split-Comp.

757080

807D6F

73806F

Tetradic

757080

806F73

7B806F

6F807D

Contrast Matrix WCAG 2.1 Contrast

757080	63AD97	96993D	B8775C	FF2167
—	1.8 Fail	1.6 Fail	1.3 Fail	1.3 Fail
1.8 Fail	—	1.1 Fail	1.4 Fail	1.4 Fail
1.6 Fail	1.1 Fail	—	1.2 Fail	1.2 Fail
1.3 Fail	1.4 Fail	1.2 Fail	—	1.0 Fail
1.3 Fail	1.4 Fail	1.2 Fail	1.0 Fail	—

White BG

4.8AA

2.6Fail

3.0AA Large

3.6AA Large

3.7AA Large

Black BG

4.4AA Large

8.0AAA

6.9AA

5.8AA

5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

73737C

83849C

979753

9C9B63

9F9D56

Deuteranopia

73747B

7F799E

979759

A0A464

ACBC52

Tritanopia

757978

67A1A1

966569

B56869

F44946

Achromatopsia

737373

949494

8E8E8E

878787

6B6B6B

Shades & Tints Shades & Tints

#757080

Dark

Light

#63AD97

Dark

Light

#96993D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #757080;
  --color-2: #63ad97;
  --color-3: #96993d;
  --color-4: #b8775c;
  --color-5: #ff2167;
}

SCSS

$color-1: #757080;
$color-2: #63ad97;
$color-3: #96993d;
$color-4: #b8775c;
$color-5: #ff2167;

TAILWIND

colors: {
  'brand-1': '#757080',
  'brand-2': '#63ad97',
  'brand-3': '#96993d',
  'brand-4': '#b8775c',
  'brand-5': '#ff2167',
}

RGB Array

[117, 112, 128], [99, 173, 151], [150, 153, 61], [184, 119, 92], [255, 33, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #757080, #63AD97, #96993D, #B8775C, #FF2167 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: #757080; --color-2: #63ad97; --color-3: #96993d; --color-4: #b8775c; --color-5: #ff2167. 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