← Back to Editor

#339886 · #C4AB75 · #CA6F6C · #A20518 · #3B5F83

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#339886

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#339886
RGB
rgb(51, 152, 134)
HSL
hsl(169, 50%, 40%)
HSB
hsb(169, 66%, 60%)
CMYK
cmyk(66%, 0%, 12%, 40%)
Oklch
oklch(61.7% 0.096 178.8)

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

#C4AB75

Ginger · Tan · Sunflower

HEX
#C4AB75
RGB
rgb(196, 171, 117)
HSL
hsl(41, 40%, 61%)
HSB
hsb(41, 40%, 77%)
CMYK
cmyk(0%, 13%, 40%, 23%)
Oklch
oklch(75.0% 0.077 85.8)

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

#CA6F6C

Peach Pink · LightCoral · Coral Red

HEX
#CA6F6C
RGB
rgb(202, 111, 108)
HSL
hsl(2, 47%, 61%)
HSB
hsb(2, 47%, 79%)
CMYK
cmyk(0%, 45%, 47%, 21%)
Oklch
oklch(64.4% 0.116 22.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#A20518

Vermilion · DarkRed · Wine Red

HEX
#A20518
RGB
rgb(162, 5, 24)
HSL
hsl(353, 94%, 33%)
HSB
hsb(353, 97%, 64%)
CMYK
cmyk(0%, 97%, 85%, 36%)
Oklch
oklch(45.0% 0.180 25.3)

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

#3B5F83

Indigo · DarkSlateBlue · Prussian Blue

HEX
#3B5F83
RGB
rgb(59, 95, 131)
HSL
hsl(210, 38%, 37%)
HSB
hsb(210, 55%, 51%)
CMYK
cmyk(55%, 27%, 0%, 49%)
Oklch
oklch(47.4% 0.072 249.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

339886
993346

Analogous

339953
339886
337999

Triadic

339886
863399
998633

Split-Comp.

339886
993379
995333

Tetradic

339886
533399
993346
799933

Contrast Matrix WCAG 2.1 Contrast

339886
C4AB75
CA6F6C
A20518
3B5F83
—
1.6
Fail
1.0
Fail
2.3
Fail
1.9
Fail
1.6
Fail
—
1.6
Fail
3.7
AA Large
3.0
Fail
1.0
Fail
1.6
Fail
—
2.3
Fail
1.9
Fail
2.3
Fail
3.7
AA Large
2.3
Fail
—
1.2
Fail
1.9
Fail
3.0
Fail
1.9
Fail
1.2
Fail
—
White BG
3.5AA Large
2.2Fail
3.5AA Large
8.2AAA
6.7AA
Black BG
6.0AA
9.4AAA
6.0AA
2.6Fail
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F608A
B9B982
A3A26D
5E5D13
4B4B7A

Deuteranopia

59518B
BBBD85
A8AF6D
677312
494678

Tritanopia

388E8F
C38C8F
C56D6D
9A100F
3D7372

Achromatopsia

787878
ACACAC
8A8A8A
363636
585858

Shades & Tints Shades & Tints

#339886

Dark
Light

#C4AB75

Dark
Light

#CA6F6C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #339886;
  --color-2: #c4ab75;
  --color-3: #ca6f6c;
  --color-4: #a20518;
  --color-5: #3b5f83;
}

SCSS

$color-1: #339886;
$color-2: #c4ab75;
$color-3: #ca6f6c;
$color-4: #a20518;
$color-5: #3b5f83;

TAILWIND

colors: {
  'brand-1': '#339886',
  'brand-2': '#c4ab75',
  'brand-3': '#ca6f6c',
  'brand-4': '#a20518',
  'brand-5': '#3b5f83',
}

RGB Array

[51, 152, 134], [196, 171, 117], [202, 111, 108], [162, 5, 24], [59, 95, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #339886, #C4AB75, #CA6F6C, #A20518, #3B5F83 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: #339886; --color-2: #c4ab75; --color-3: #ca6f6c; --color-4: #a20518; --color-5: #3b5f83. 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