← Back to Editor

#7B9A9A · #F6A74B · #FDF2AB · #FC572A · #363740

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#7B9A9A

Slate Blue · LightSlateGray · Lake Green

HEX
#7B9A9A
RGB
rgb(123, 154, 154)
HSL
hsl(180, 13%, 54%)
HSB
hsb(180, 20%, 60%)
CMYK
cmyk(20%, 0%, 0%, 40%)
Oklch
oklch(66.3% 0.035 196.3)

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

#F6A74B

Ginger · SandyBrown · Warm Sun

HEX
#F6A74B
RGB
rgb(246, 167, 75)
HSL
hsl(32, 90%, 63%)
HSB
hsb(32, 70%, 96%)
CMYK
cmyk(0%, 32%, 70%, 4%)
Oklch
oklch(78.9% 0.141 67.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#FDF2AB

Fresh Green · Wheat · Lemon Cream

HEX
#FDF2AB
RGB
rgb(253, 242, 171)
HSL
hsl(52, 95%, 83%)
HSB
hsb(52, 32%, 99%)
CMYK
cmyk(0%, 4%, 32%, 1%)
Oklch
oklch(95.4% 0.090 100.4)

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

#FC572A

Vermilion · Tomato · Passion Red

HEX
#FC572A
RGB
rgb(252, 87, 42)
HSL
hsl(13, 97%, 58%)
HSB
hsb(13, 83%, 99%)
CMYK
cmyk(0%, 65%, 83%, 1%)
Oklch
oklch(67.5% 0.209 35.5)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#363740

Indigo · DarkSlateGray · Dark Stone

HEX
#363740
RGB
rgb(54, 55, 64)
HSL
hsl(234, 8%, 23%)
HSB
hsb(234, 16%, 25%)
CMYK
cmyk(16%, 14%, 0%, 75%)
Oklch
oklch(33.9% 0.016 280.5)

Traditional「Indigo」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7B9A9A
997A7A

Analogous

7A998A
7B9A9A
7A8A99

Triadic

7B9A9A
997A99
99997A

Split-Comp.

7B9A9A
997A8A
998A7A

Tetradic

7B9A9A
8A7A99
997A7A
8A997A

Contrast Matrix WCAG 2.1 Contrast

7B9A9A
F6A74B
FDF2AB
FC572A
363740
—
1.5
Fail
2.7
Fail
1.1
Fail
3.9
AA Large
1.5
Fail
—
1.8
Fail
1.6
Fail
5.9
AA
2.7
Fail
1.8
Fail
—
2.8
Fail
10.4
AAA
1.1
Fail
1.6
Fail
2.8
Fail
—
3.7
AA Large
3.9
AA Large
5.9
AA
10.4
AAA
3.7
AA Large
—
White BG
3.0AA Large
2.0Fail
1.1Fail
3.2AA Large
11.8AAA
Black BG
6.9AA
10.5AAA
18.5AAA
6.5AA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

88899A
D4D361
F8F8BC
B5B335
36363E

Deuteranopia

87849A
D8DE67
F9FAC0
BECA38
36363D

Tritanopia

7D9A9A
F27377
FCCACD
F43D3F
363C3C

Achromatopsia

919191
B4B4B4
EDEDED
838383
383838

Shades & Tints Shades & Tints

#7B9A9A

Dark
Light

#F6A74B

Dark
Light

#FDF2AB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7b9a9a;
  --color-2: #f6a74b;
  --color-3: #fdf2ab;
  --color-4: #fc572a;
  --color-5: #363740;
}

SCSS

$color-1: #7b9a9a;
$color-2: #f6a74b;
$color-3: #fdf2ab;
$color-4: #fc572a;
$color-5: #363740;

TAILWIND

colors: {
  'brand-1': '#7b9a9a',
  'brand-2': '#f6a74b',
  'brand-3': '#fdf2ab',
  'brand-4': '#fc572a',
  'brand-5': '#363740',
}

RGB Array

[123, 154, 154], [246, 167, 75], [253, 242, 171], [252, 87, 42], [54, 55, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7B9A9A, #F6A74B, #FDF2AB, #FC572A, #363740 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #7b9a9a; --color-2: #f6a74b; --color-3: #fdf2ab; --color-4: #fc572a; --color-5: #363740. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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