#F7585C + #7897B3 + #F8D734 + #9CC754 + #D6D6D6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F7585C

Peach Pink · Tomato · Coral Red

HEX

#F7585C

RGB

rgb(247, 88, 92)

HSL

hsl(358, 91%, 66%)

HSB

hsb(358, 64%, 97%)

CMYK

cmyk(0%, 64%, 63%, 3%)

Oklch

oklch(67.4% 0.194 22.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#7897B3

Slate Blue · LightSlateGray · Navy Blue

HEX

#7897B3

RGB

rgb(120, 151, 179)

HSL

hsl(208, 28%, 59%)

HSB

hsb(208, 33%, 70%)

CMYK

cmyk(33%, 16%, 0%, 30%)

Oklch

oklch(66.3% 0.054 246.0)

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

#F8D734

Autumn Sage · Gold · Sunflower

HEX

#F8D734

RGB

rgb(248, 215, 52)

HSL

hsl(50, 93%, 59%)

HSB

hsb(50, 79%, 97%)

CMYK

cmyk(0%, 13%, 79%, 3%)

Oklch

oklch(88.2% 0.169 96.8)

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

#9CC754

Grass Green · DarkSeaGreen · Olive Green

HEX

#9CC754

RGB

rgb(156, 199, 84)

HSL

hsl(82, 51%, 55%)

HSB

hsb(82, 58%, 78%)

CMYK

cmyk(22%, 0%, 58%, 22%)

Oklch

oklch(77.5% 0.151 126.8)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#D6D6D6

Silver Gray · LightGray · Pearl Gray

HEX

#D6D6D6

RGB

rgb(214, 214, 214)

HSL

hsl(0, 0%, 84%)

HSB

hsb(0, 0%, 84%)

CMYK

cmyk(0%, 0%, 0%, 16%)

Oklch

oklch(87.6% 0.000 89.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7585C

59F7F2

Analogous

F759AE

F7585C

F7A359

Triadic

F7585C

5FF759

595FF7

Split-Comp.

F7585C

59F7A3

59AEF7

Tetradic

F7585C

AEF759

59F7F2

A359F7

Contrast Matrix WCAG 2.1 Contrast

F7585C	7897B3	F8D734	9CC754	D6D6D6
—	1.1 Fail	2.3 Fail	1.6 Fail	2.2 Fail
1.1 Fail	—	2.1 Fail	1.6 Fail	2.1 Fail
2.3 Fail	2.1 Fail	—	1.4 Fail	1.0 Fail
1.6 Fail	1.6 Fail	1.4 Fail	—	1.3 Fail
2.2 Fail	2.1 Fail	1.0 Fail	1.3 Fail	—

White BG

3.2AA Large

3.1AA Large

1.4Fail

2.0Fail

1.5Fail

Black BG

6.5AA

6.9AA

14.8AAA

10.7AAA

14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B15B

8586AC

EAE95B

AFAF70

D6D6D6

Deuteranopia

BBC75B

8481AB

ECEE65

ACA977

D6D6D6

Tritanopia

EF5A5A

7AA7A6

F67B81

9E868B

D6D6D6

Achromatopsia

888888

919191

CECECE

ADADAD

D6D6D6

Shades & Tints Shades & Tints

#F7585C

Dark

Light

#7897B3

Dark

Light

#F8D734

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7585c;
  --color-2: #7897b3;
  --color-3: #f8d734;
  --color-4: #9cc754;
  --color-5: #d6d6d6;
}

SCSS

$color-1: #f7585c;
$color-2: #7897b3;
$color-3: #f8d734;
$color-4: #9cc754;
$color-5: #d6d6d6;

TAILWIND

colors: {
  'brand-1': '#f7585c',
  'brand-2': '#7897b3',
  'brand-3': '#f8d734',
  'brand-4': '#9cc754',
  'brand-5': '#d6d6d6',
}

RGB Array

[247, 88, 92], [120, 151, 179], [248, 215, 52], [156, 199, 84], [214, 214, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7585C, #7897B3, #F8D734, #9CC754, #D6D6D6 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: #f7585c; --color-2: #7897b3; --color-3: #f8d734; --color-4: #9cc754; --color-5: #d6d6d6. 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