← Back to Editor

#15848C · #4DA374 · #BED633 · #403030 · #D63362

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

#15848C

Lake Blue · Teal · Mint Ice

HEX
#15848C
RGB
rgb(21, 132, 140)
HSL
hsl(184, 74%, 32%)
HSB
hsb(184, 85%, 55%)
CMYK
cmyk(85%, 6%, 0%, 45%)
Oklch
oklch(56.1% 0.091 202.7)

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

#4DA374

Celadon · MediumSeaGreen · Olive Green

HEX
#4DA374
RGB
rgb(77, 163, 116)
HSL
hsl(147, 36%, 47%)
HSB
hsb(147, 53%, 64%)
CMYK
cmyk(53%, 0%, 29%, 36%)
Oklch
oklch(64.9% 0.110 157.4)

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

#BED633

Autumn Sage · GreenYellow · Sunflower

HEX
#BED633
RGB
rgb(190, 214, 51)
HSL
hsl(69, 67%, 52%)
HSB
hsb(69, 76%, 84%)
CMYK
cmyk(11%, 0%, 76%, 16%)
Oklch
oklch(83.1% 0.178 118.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#403030

Crimson · DarkSlateGray · Wine Red

HEX
#403030
RGB
rgb(64, 48, 48)
HSL
hsl(0, 14%, 22%)
HSB
hsb(0, 25%, 25%)
CMYK
cmyk(0%, 25%, 25%, 75%)
Oklch
oklch(32.7% 0.023 18.4)

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

#D63362

Dark Violet · MediumVioletRed · Rose Pink

HEX
#D63362
RGB
rgb(214, 51, 98)
HSL
hsl(343, 67%, 52%)
HSB
hsb(343, 76%, 84%)
CMYK
cmyk(0%, 76%, 54%, 16%)
Oklch
oklch(58.5% 0.199 9.3)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

15848C
8E1D15

Analogous

158E5A
15848C
154A8E

Triadic

15848C
8E1586
868E15

Split-Comp.

15848C
8E154A
8E5A15

Tetradic

15848C
5A158E
8E1D15
4A8E15

Contrast Matrix WCAG 2.1 Contrast

15848C
4DA374
BED633
403030
D63362
—
1.4
Fail
2.7
Fail
2.8
Fail
1.0
Fail
1.4
Fail
—
1.9
Fail
4.0
AA Large
1.5
Fail
2.7
Fail
1.9
Fail
—
7.6
AAA
2.9
Fail
2.8
Fail
4.0
AA Large
7.6
AAA
—
2.7
Fail
1.0
Fail
1.5
Fail
2.9
Fail
2.7
Fail
—
White BG
4.5AA Large
3.1AA Large
1.6Fail
12.5AAA
4.7AA
Black BG
4.7AA
6.8AA
12.9AAA
1.7Fail
4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

45468A
72737F
C8C95A
393930
8F8E57

Deuteranopia

3F368A
6D6782
C7C564
3A3B30
99A554

Tritanopia

1B8988
51888A
BF7A80
3F3030
CE4E4C

Achromatopsia

646464
848484
BCBCBC
353535
696969

Shades & Tints Shades & Tints

#15848C

Dark
Light

#4DA374

Dark
Light

#BED633

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #15848c;
  --color-2: #4da374;
  --color-3: #bed633;
  --color-4: #403030;
  --color-5: #d63362;
}

SCSS

$color-1: #15848c;
$color-2: #4da374;
$color-3: #bed633;
$color-4: #403030;
$color-5: #d63362;

TAILWIND

colors: {
  'brand-1': '#15848c',
  'brand-2': '#4da374',
  'brand-3': '#bed633',
  'brand-4': '#403030',
  'brand-5': '#d63362',
}

RGB Array

[21, 132, 140], [77, 163, 116], [190, 214, 51], [64, 48, 48], [214, 51, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #15848C, #4DA374, #BED633, #403030, #D63362 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: #15848c; --color-2: #4da374; --color-3: #bed633; --color-4: #403030; --color-5: #d63362. 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