← Back to Editor

#649460 · #FFBD24 · #C81008 · #000300 · #349F97

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#649460

Celadon · DimGray · Olive Green

HEX
#649460
RGB
rgb(100, 148, 96)
HSL
hsl(115, 21%, 48%)
HSB
hsb(115, 35%, 58%)
CMYK
cmyk(32%, 0%, 35%, 42%)
Oklch
oklch(61.8% 0.093 142.6)

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

#FFBD24

Ginger · Orange · Sunflower

HEX
#FFBD24
RGB
rgb(255, 189, 36)
HSL
hsl(42, 100%, 57%)
HSB
hsb(42, 86%, 100%)
CMYK
cmyk(0%, 26%, 86%, 0%)
Oklch
oklch(83.7% 0.165 81.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#C81008

Vermilion · FireBrick · Passion Red

HEX
#C81008
RGB
rgb(200, 16, 8)
HSL
hsl(3, 92%, 41%)
HSB
hsb(3, 96%, 78%)
CMYK
cmyk(0%, 92%, 96%, 22%)
Oklch
oklch(52.7% 0.210 29.4)

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

#000300

Pine Green · Black · Dark Green

HEX
#000300
RGB
rgb(0, 3, 0)
HSL
hsl(120, 100%, 1%)
HSB
hsb(120, 100%, 1%)
CMYK
cmyk(100%, 0%, 100%, 99%)
Oklch
oklch(8.4% 0.029 142.5)

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

#349F97

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#349F97
RGB
rgb(52, 159, 151)
HSL
hsl(176, 51%, 41%)
HSB
hsb(176, 67%, 62%)
CMYK
cmyk(67%, 0%, 5%, 38%)
Oklch
oklch(64.1% 0.096 187.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

649460
906194

Analogous

7F9461
649460
619476

Triadic

649460
616594
946165

Split-Comp.

649460
766194
94617F

Tetradic

649460
617F94
906194
947661

Contrast Matrix WCAG 2.1 Contrast

649460
FFBD24
C81008
000300
349F97
—
2.1
Fail
1.7
Fail
5.9
AA
1.1
Fail
2.1
Fail
—
3.6
AA Large
12.4
AAA
1.9
Fail
1.7
Fail
3.6
AA Large
—
3.5
AA Large
1.9
Fail
5.9
AA
12.4
AAA
3.5
AA Large
—
6.5
AA
1.1
Fail
1.9
Fail
1.9
Fail
6.5
AA
—
White BG
3.5AA Large
1.7Fail
5.9AA
20.7AAA
3.2AA Large
Black BG
5.9AA
12.6AAA
3.5AA Large
1.0Fail
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

79796D
E2E249
78770A
010101
626399

Deuteranopia

767270
E6EB52
83910A
010101
5C5499

Tritanopia

667779
FC666D
BF0B0C
000101
399A9B

Achromatopsia

808080
BFBFBF
464646
020202
7E7E7E

Shades & Tints Shades & Tints

#649460

Dark
Light

#FFBD24

Dark
Light

#C81008

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #649460;
  --color-2: #ffbd24;
  --color-3: #c81008;
  --color-4: #000300;
  --color-5: #349f97;
}

SCSS

$color-1: #649460;
$color-2: #ffbd24;
$color-3: #c81008;
$color-4: #000300;
$color-5: #349f97;

TAILWIND

colors: {
  'brand-1': '#649460',
  'brand-2': '#ffbd24',
  'brand-3': '#c81008',
  'brand-4': '#000300',
  'brand-5': '#349f97',
}

RGB Array

[100, 148, 96], [255, 189, 36], [200, 16, 8], [0, 3, 0], [52, 159, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #649460, #FFBD24, #C81008, #000300, #349F97 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #649460; --color-2: #ffbd24; --color-3: #c81008; --color-4: #000300; --color-5: #349f97. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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