← Back to Editor

#527A71 · #A0C580 · #FFD356 · #F8A41D · #CC272D

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 App

Color Details Color Details

#527A71

Mineral Blue · DimGray · Mint Ice

HEX
#527A71
RGB
rgb(82, 122, 113)
HSL
hsl(166, 20%, 40%)
HSB
hsb(166, 33%, 48%)
CMYK
cmyk(33%, 0%, 7%, 52%)
Oklch
oklch(54.7% 0.047 178.8)

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

#A0C580

Celadon · DarkSeaGreen · Apple Green

HEX
#A0C580
RGB
rgb(160, 197, 128)
HSL
hsl(92, 37%, 64%)
HSB
hsb(92, 35%, 77%)
CMYK
cmyk(19%, 0%, 35%, 23%)
Oklch
oklch(78.0% 0.102 131.3)

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

#FFD356

Ginger · SandyBrown · Sunflower

HEX
#FFD356
RGB
rgb(255, 211, 86)
HSL
hsl(44, 100%, 67%)
HSB
hsb(44, 66%, 100%)
CMYK
cmyk(0%, 17%, 66%, 0%)
Oklch
oklch(88.3% 0.148 89.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#F8A41D

Ginger · Orange · Warm Sun

HEX
#F8A41D
RGB
rgb(248, 164, 29)
HSL
hsl(37, 94%, 54%)
HSB
hsb(37, 88%, 97%)
CMYK
cmyk(0%, 34%, 88%, 3%)
Oklch
oklch(78.3% 0.162 71.3)

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

#CC272D

Vermilion · FireBrick · Passion Red

HEX
#CC272D
RGB
rgb(204, 39, 45)
HSL
hsl(358, 68%, 48%)
HSB
hsb(358, 81%, 80%)
CMYK
cmyk(0%, 81%, 78%, 20%)
Oklch
oklch(54.9% 0.199 25.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

527A71
7A525B

Analogous

527A5C
527A71
52707A

Triadic

527A71
71527A
7A7152

Split-Comp.

527A71
7A5270
7A5C52

Tetradic

527A71
5C527A
7A525B
707A52

Contrast Matrix WCAG 2.1 Contrast

527A71
A0C580
FFD356
F8A41D
CC272D
—
2.5
Fail
3.4
AA Large
2.4
Fail
1.1
Fail
2.5
Fail
—
1.4
Fail
1.0
Fail
2.8
Fail
3.4
AA Large
1.4
Fail
—
1.4
Fail
3.8
AA Large
2.4
Fail
1.0
Fail
1.4
Fail
—
2.6
Fail
1.1
Fail
2.8
Fail
3.8
AA Large
2.6
Fail
—
White BG
4.8AA
1.9Fail
1.4Fail
2.0Fail
5.4AA
Black BG
4.4AA Large
10.8AAA
14.7AAA
10.3AAA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

636473
B0B091
ECEC74
D4D33E
85832C

Deuteranopia

615E74
AEAB95
EFF27C
D9DF46
8E9A2B

Tritanopia

547575
A29EA1
FD8C91
F4575D
C42A2A

Achromatopsia

6D6D6D
B2B2B2
D2D2D2
AEAEAE
595959

Shades & Tints Shades & Tints

#527A71

Dark
Light

#A0C580

Dark
Light

#FFD356

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #527a71;
  --color-2: #a0c580;
  --color-3: #ffd356;
  --color-4: #f8a41d;
  --color-5: #cc272d;
}

SCSS

$color-1: #527a71;
$color-2: #a0c580;
$color-3: #ffd356;
$color-4: #f8a41d;
$color-5: #cc272d;

TAILWIND

colors: {
  'brand-1': '#527a71',
  'brand-2': '#a0c580',
  'brand-3': '#ffd356',
  'brand-4': '#f8a41d',
  'brand-5': '#cc272d',
}

RGB Array

[82, 122, 113], [160, 197, 128], [255, 211, 86], [248, 164, 29], [204, 39, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #527A71, #A0C580, #FFD356, #F8A41D, #CC272D is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #527a71; --color-2: #a0c580; --color-3: #ffd356; --color-4: #f8a41d; --color-5: #cc272d. 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 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