← Back to Editor

#D0C501 · #B5C242 · #67C258 · #1AC264 · #3A3C55

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

#D0C501

Autumn Sage · GoldenRod · Honey Gold

HEX
#D0C501
RGB
rgb(208, 197, 1)
HSL
hsl(57, 99%, 41%)
HSB
hsb(57, 100%, 82%)
CMYK
cmyk(0%, 5%, 100%, 18%)
Oklch
oklch(80.7% 0.171 105.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#B5C242

Autumn Sage · GoldenRod · Sunflower

HEX
#B5C242
RGB
rgb(181, 194, 66)
HSL
hsl(66, 51%, 51%)
HSB
hsb(66, 66%, 76%)
CMYK
cmyk(7%, 0%, 66%, 24%)
Oklch
oklch(78.0% 0.150 114.9)

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

#67C258

Celadon · MediumSeaGreen · Olive Green

HEX
#67C258
RGB
rgb(103, 194, 88)
HSL
hsl(112, 46%, 55%)
HSB
hsb(112, 55%, 76%)
CMYK
cmyk(47%, 0%, 55%, 24%)
Oklch
oklch(73.4% 0.168 140.9)

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

#1AC264

Pine Green · MediumSeaGreen · Olive Green

HEX
#1AC264
RGB
rgb(26, 194, 100)
HSL
hsl(146, 76%, 43%)
HSB
hsb(146, 87%, 76%)
CMYK
cmyk(87%, 0%, 48%, 24%)
Oklch
oklch(71.5% 0.185 151.5)

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

#3A3C55

Indigo · DarkSlateGray · Prussian Blue

HEX
#3A3C55
RGB
rgb(58, 60, 85)
HSL
hsl(236, 19%, 28%)
HSB
hsb(236, 32%, 33%)
CMYK
cmyk(32%, 29%, 0%, 67%)
Oklch
oklch(36.5% 0.043 280.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D0C501
010BD0

Analogous

D05E01
D0C501
73D001

Triadic

D0C501
01D0C6
C601D0

Split-Comp.

D0C501
0173D0
5E01D0

Tetradic

D0C501
01D05E
010BD0
D00173

Contrast Matrix WCAG 2.1 Contrast

D0C501
B5C242
67C258
1AC264
3A3C55
—
1.1
Fail
1.2
Fail
1.3
Fail
6.0
AA
1.1
Fail
—
1.1
Fail
1.2
Fail
5.5
AA
1.2
Fail
1.1
Fail
—
1.1
Fail
4.8
AA
1.3
Fail
1.2
Fail
1.1
Fail
—
4.6
AA
6.0
AA
5.5
AA
4.8
AA
4.6
AA
—
White BG
1.8Fail
2.0Fail
2.2Fail
2.3Fail
10.7AAA
Black BG
11.7AAA
10.8AAA
9.4AAA
8.9AAA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCB30
BBBB61
8E8F72
63647B
3B3B4F

Deuteranopia

CCCD3C
BAB968
898278
594C80
3B3B4E

Tritanopia

CF565E
B6797F
6C868A
228D91
3A4A49

Achromatopsia

B2B2B2
B0B0B0
9B9B9B
858585
3E3E3E

Shades & Tints Shades & Tints

#D0C501

Dark
Light

#B5C242

Dark
Light

#67C258

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d0c501;
  --color-2: #b5c242;
  --color-3: #67c258;
  --color-4: #1ac264;
  --color-5: #3a3c55;
}

SCSS

$color-1: #d0c501;
$color-2: #b5c242;
$color-3: #67c258;
$color-4: #1ac264;
$color-5: #3a3c55;

TAILWIND

colors: {
  'brand-1': '#d0c501',
  'brand-2': '#b5c242',
  'brand-3': '#67c258',
  'brand-4': '#1ac264',
  'brand-5': '#3a3c55',
}

RGB Array

[208, 197, 1], [181, 194, 66], [103, 194, 88], [26, 194, 100], [58, 60, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D0C501, #B5C242, #67C258, #1AC264, #3A3C55 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: #d0c501; --color-2: #b5c242; --color-3: #67c258; --color-4: #1ac264; --color-5: #3a3c55. 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