← Back to Editor

#3078A8 · #D86090 · #486048 · #F0C048 · #C04848

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

#3078A8

Lake Blue · SteelBlue · Navy Blue

HEX
#3078A8
RGB
rgb(48, 120, 168)
HSL
hsl(204, 56%, 42%)
HSB
hsb(204, 71%, 66%)
CMYK
cmyk(71%, 29%, 0%, 34%)
Oklch
oklch(55.0% 0.103 241.5)

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

#D86090

Rouge · LightCoral · Rose Pink

HEX
#D86090
RGB
rgb(216, 96, 144)
HSL
hsl(336, 61%, 61%)
HSB
hsb(336, 56%, 85%)
CMYK
cmyk(0%, 56%, 33%, 15%)
Oklch
oklch(65.0% 0.158 357.3)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#486048

Celadon · DarkOliveGreen · Forest Green

HEX
#486048
RGB
rgb(72, 96, 72)
HSL
hsl(120, 14%, 33%)
HSB
hsb(120, 25%, 38%)
CMYK
cmyk(25%, 0%, 25%, 62%)
Oklch
oklch(46.2% 0.048 144.7)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#F0C048

Ginger · SandyBrown · Sunflower

HEX
#F0C048
RGB
rgb(240, 192, 72)
HSL
hsl(43, 85%, 61%)
HSB
hsb(43, 70%, 94%)
CMYK
cmyk(0%, 20%, 70%, 6%)
Oklch
oklch(83.0% 0.144 86.5)

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

#C04848

Crimson · Sienna · Passion Red

HEX
#C04848
RGB
rgb(192, 72, 72)
HSL
hsl(0, 49%, 52%)
HSB
hsb(0, 63%, 75%)
CMYK
cmyk(0%, 63%, 63%, 25%)
Oklch
oklch(56.5% 0.155 23.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3078A8
A75F2F

Analogous

2FA79B
3078A8
2F3BA7

Triadic

3078A8
A72F77
77A72F

Split-Comp.

3078A8
A72F3B
A79B2F

Tetradic

3078A8
9B2FA7
A75F2F
3BA72F

Contrast Matrix WCAG 2.1 Contrast

3078A8
D86090
486048
F0C048
C04848
—
1.4
Fail
1.4
Fail
2.8
Fail
1.0
Fail
1.4
Fail
—
2.0
Fail
2.1
Fail
1.4
Fail
1.4
Fail
2.0
Fail
—
4.1
AA Large
1.4
Fail
2.8
Fail
2.1
Fail
4.1
AA Large
—
2.9
Fail
1.0
Fail
1.4
Fail
1.4
Fail
2.9
Fail
—
White BG
4.8AA
3.5AA Large
6.9AA
1.7Fail
4.9AA
Black BG
4.4AA Large
6.0AA
3.0AA Large
12.3AAA
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F509C
A4A384
52534E
DBDB65
8C8B48

Deuteranopia

4B469A
ABB482
514F4F
DEE26C
939C48

Tritanopia

349391
D27B79
495253
EE7C81
BA4848

Achromatopsia

686868
898989
565656
C1C1C1
6C6C6C

Shades & Tints Shades & Tints

#3078A8

Dark
Light

#D86090

Dark
Light

#486048

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3078a8;
  --color-2: #d86090;
  --color-3: #486048;
  --color-4: #f0c048;
  --color-5: #c04848;
}

SCSS

$color-1: #3078a8;
$color-2: #d86090;
$color-3: #486048;
$color-4: #f0c048;
$color-5: #c04848;

TAILWIND

colors: {
  'brand-1': '#3078a8',
  'brand-2': '#d86090',
  'brand-3': '#486048',
  'brand-4': '#f0c048',
  'brand-5': '#c04848',
}

RGB Array

[48, 120, 168], [216, 96, 144], [72, 96, 72], [240, 192, 72], [192, 72, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3078A8, #D86090, #486048, #F0C048, #C04848 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: #3078a8; --color-2: #d86090; --color-3: #486048; --color-4: #f0c048; --color-5: #c04848. 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