← Back to Editor

#8AC6AC · #53A3BA · #5178B2 · #4C0503 · #00489C

warm

A 5-color warm 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

#8AC6AC

Jade · DarkSeaGreen · Apple Green

HEX
#8AC6AC
RGB
rgb(138, 198, 172)
HSL
hsl(154, 34%, 66%)
HSB
hsb(154, 30%, 78%)
CMYK
cmyk(30%, 0%, 13%, 22%)
Oklch
oklch(77.8% 0.072 165.8)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#53A3BA

Slate Blue · CadetBlue · Lake Green

HEX
#53A3BA
RGB
rgb(83, 163, 186)
HSL
hsl(193, 43%, 53%)
HSB
hsb(193, 55%, 73%)
CMYK
cmyk(55%, 12%, 0%, 27%)
Oklch
oklch(67.4% 0.085 219.0)

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

#5178B2

Azure · SteelBlue · Navy Blue

HEX
#5178B2
RGB
rgb(81, 120, 178)
HSL
hsl(216, 39%, 51%)
HSB
hsb(216, 54%, 70%)
CMYK
cmyk(54%, 33%, 0%, 30%)
Oklch
oklch(57.0% 0.100 258.1)

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

#4C0503

Vermilion · Maroon · Deep Berry

HEX
#4C0503
RGB
rgb(76, 5, 3)
HSL
hsl(2, 92%, 15%)
HSB
hsb(2, 96%, 30%)
CMYK
cmyk(0%, 93%, 96%, 70%)
Oklch
oklch(26.7% 0.102 29.1)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#00489C

Indigo · Teal · Prussian Blue

HEX
#00489C
RGB
rgb(0, 72, 156)
HSL
hsl(212, 100%, 31%)
HSB
hsb(212, 100%, 61%)
CMYK
cmyk(100%, 54%, 0%, 39%)
Oklch
oklch(41.8% 0.151 257.4)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8AC6AC
C68BA4

Analogous

8BC68F
8AC6AC
8BC2C6

Triadic

8AC6AC
AC8BC6
C6AC8B

Split-Comp.

8AC6AC
C68BC2
C68F8B

Tetradic

8AC6AC
8F8BC6
C68BA4
C2C68B

Contrast Matrix WCAG 2.1 Contrast

8AC6AC
53A3BA
5178B2
4C0503
00489C
—
1.5
Fail
2.3
Fail
8.1
AAA
4.5
AA Large
1.5
Fail
—
1.6
Fail
5.5
AA
3.0
AA Large
2.3
Fail
1.6
Fail
—
3.5
AA Large
1.9
Fail
8.1
AAA
5.5
AA
3.5
AA Large
—
1.8
Fail
4.5
AA Large
3.0
AA Large
1.9
Fail
1.8
Fail
—
White BG
2.0Fail
2.9Fail
4.5AA Large
15.8AAA
8.7AAA
Black BG
10.8AAA
7.3AAA
4.7AA
1.3Fail
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A5B2
7676B4
6262A4
2D2D03
1F2088

Deuteranopia

A19CB4
716BB3
605DA1
313704
1B1683

Tritanopia

8DB7B8
57B0AF
539996
480404
047874

Achromatopsia

B1B1B1
8E8E8E
737373
1A1A1A
3C3C3C

Shades & Tints Shades & Tints

#8AC6AC

Dark
Light

#53A3BA

Dark
Light

#5178B2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ac6ac;
  --color-2: #53a3ba;
  --color-3: #5178b2;
  --color-4: #4c0503;
  --color-5: #00489c;
}

SCSS

$color-1: #8ac6ac;
$color-2: #53a3ba;
$color-3: #5178b2;
$color-4: #4c0503;
$color-5: #00489c;

TAILWIND

colors: {
  'brand-1': '#8ac6ac',
  'brand-2': '#53a3ba',
  'brand-3': '#5178b2',
  'brand-4': '#4c0503',
  'brand-5': '#00489c',
}

RGB Array

[138, 198, 172], [83, 163, 186], [81, 120, 178], [76, 5, 3], [0, 72, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #8AC6AC, #53A3BA, #5178B2, #4C0503, #00489C 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: #8ac6ac; --color-2: #53a3ba; --color-3: #5178b2; --color-4: #4c0503; --color-5: #00489c. 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 warm-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