← Back to Editor

#5A5248 · #BDC566 · #F2E38A · #FDA781 · #D52C61

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#5A5248

Ochre · DarkOliveGreen · Amber Brown

HEX
#5A5248
RGB
rgb(90, 82, 72)
HSL
hsl(33, 11%, 32%)
HSB
hsb(33, 20%, 35%)
CMYK
cmyk(0%, 9%, 20%, 65%)
Oklch
oklch(44.3% 0.019 73.4)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#BDC566

Autumn Sage · Tan · Sunflower

HEX
#BDC566
RGB
rgb(189, 197, 102)
HSL
hsl(65, 45%, 59%)
HSB
hsb(65, 48%, 77%)
CMYK
cmyk(4%, 0%, 48%, 23%)
Oklch
oklch(79.7% 0.120 113.1)

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

#F2E38A

Fresh Green · Khaki · Sunflower

HEX
#F2E38A
RGB
rgb(242, 227, 138)
HSL
hsl(51, 80%, 75%)
HSB
hsb(51, 43%, 95%)
CMYK
cmyk(0%, 6%, 43%, 5%)
Oklch
oklch(90.9% 0.111 99.9)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#FDA781

Apricot · LightSalmon · Warm Sun

HEX
#FDA781
RGB
rgb(253, 167, 129)
HSL
hsl(18, 97%, 75%)
HSB
hsb(18, 49%, 99%)
CMYK
cmyk(0%, 34%, 49%, 1%)
Oklch
oklch(80.5% 0.114 44.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#D52C61

Dark Violet · Crimson · Camellia

HEX
#D52C61
RGB
rgb(213, 44, 97)
HSL
hsl(341, 67%, 50%)
HSB
hsb(341, 79%, 84%)
CMYK
cmyk(0%, 79%, 54%, 16%)
Oklch
oklch(57.8% 0.204 8.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5A5248
49515B

Analogous

5B4A49
5A5248
5A5B49

Triadic

5A5248
495B52
52495B

Split-Comp.

5A5248
495A5B
4A495B

Tetradic

5A5248
495B4A
49515B
5B495A

Contrast Matrix WCAG 2.1 Contrast

5A5248
BDC566
F2E38A
FDA781
D52C61
—
4.1
AA Large
5.9
AA
4.0
AA Large
1.6
Fail
4.1
AA Large
—
1.4
Fail
1.0
Fail
2.6
Fail
5.9
AA
1.4
Fail
—
1.5
Fail
3.7
AA Large
4.0
AA Large
1.0
Fail
1.5
Fail
—
2.5
Fail
1.6
Fail
2.6
Fail
3.7
AA Large
2.5
Fail
—
White BG
7.7AAA
1.9Fail
1.3Fail
1.9Fail
4.8AA
Black BG
2.7Fail
11.3AAA
16.1AAA
11.0AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

57564A
C0C17D
ECEBA0
D8D78A
8C8A54

Deuteranopia

57584B
C0BF83
ECEDA5
DDE38C
96A251

Tritanopia

5A4C4D
BD8F93
F1B1B4
F99193
CD4A48

Achromatopsia

535353
B8B8B8
DDDDDD
BCBCBC
656565

Shades & Tints Shades & Tints

#5A5248

Dark
Light

#BDC566

Dark
Light

#F2E38A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5a5248;
  --color-2: #bdc566;
  --color-3: #f2e38a;
  --color-4: #fda781;
  --color-5: #d52c61;
}

SCSS

$color-1: #5a5248;
$color-2: #bdc566;
$color-3: #f2e38a;
$color-4: #fda781;
$color-5: #d52c61;

TAILWIND

colors: {
  'brand-1': '#5a5248',
  'brand-2': '#bdc566',
  'brand-3': '#f2e38a',
  'brand-4': '#fda781',
  'brand-5': '#d52c61',
}

RGB Array

[90, 82, 72], [189, 197, 102], [242, 227, 138], [253, 167, 129], [213, 44, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5A5248, #BDC566, #F2E38A, #FDA781, #D52C61 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #5a5248; --color-2: #bdc566; --color-3: #f2e38a; --color-4: #fda781; --color-5: #d52c61. 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 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