← Back to Editor

#FFCD38 · #9CCC2D · #3A9922 · #16662E · #0B332B

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

#FFCD38

Ginger · Gold · Sunflower

HEX
#FFCD38
RGB
rgb(255, 205, 56)
HSL
hsl(45, 100%, 61%)
HSB
hsb(45, 78%, 100%)
CMYK
cmyk(0%, 20%, 78%, 0%)
Oklch
oklch(86.9% 0.163 88.9)

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

#9CCC2D

Grass Green · GreenYellow · Olive Green

HEX
#9CCC2D
RGB
rgb(156, 204, 45)
HSL
hsl(78, 64%, 49%)
HSB
hsb(78, 78%, 80%)
CMYK
cmyk(24%, 0%, 78%, 20%)
Oklch
oklch(78.4% 0.184 125.7)

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

#3A9922

Pine Green · ForestGreen · Forest Green

HEX
#3A9922
RGB
rgb(58, 153, 34)
HSL
hsl(108, 64%, 37%)
HSB
hsb(108, 78%, 60%)
CMYK
cmyk(62%, 0%, 78%, 40%)
Oklch
oklch(60.3% 0.177 140.2)

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

#16662E

Pine Green · ForestGreen · Forest Green

HEX
#16662E
RGB
rgb(22, 102, 46)
HSL
hsl(138, 65%, 24%)
HSB
hsb(138, 78%, 40%)
CMYK
cmyk(78%, 0%, 55%, 60%)
Oklch
oklch(45.0% 0.116 148.8)

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

#0B332B

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#0B332B
RGB
rgb(11, 51, 43)
HSL
hsl(168, 65%, 12%)
HSB
hsb(168, 78%, 20%)
CMYK
cmyk(78%, 0%, 16%, 80%)
Oklch
oklch(29.1% 0.046 176.9)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFCD38
386AFF

Analogous

FF6A38
FFCD38
CDFF38

Triadic

FFCD38
38FFCD
CD38FF

Split-Comp.

FFCD38
38CDFF
6A38FF

Tetradic

FFCD38
38FF6A
386AFF
FF38CD

Contrast Matrix WCAG 2.1 Contrast

FFCD38
9CCC2D
3A9922
16662E
0B332B
—
1.3
Fail
2.4
Fail
4.7
AA
9.2
AAA
1.3
Fail
—
1.9
Fail
3.7
AA Large
7.3
AAA
2.4
Fail
1.9
Fail
—
1.9
Fail
3.8
AA Large
4.7
AA
3.7
AA Large
1.9
Fail
—
2.0
Fail
9.2
AAA
7.3
AAA
3.8
AA Large
2.0
Fail
—
White BG
1.5Fail
1.9Fail
3.6AA Large
7.1AAA
13.8AAA
Black BG
14.0AAA
11.1AAA
5.8AA
3.0Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E95C
B1B153
63643F
39393C
1C1D2D

Deuteranopia

ECF065
AEAA5D
5E5746
342E3F
1A172D

Tritanopia

FD797F
9E7279
3F565B
1A4649
0D2E2F

Achromatopsia

CBCBCB
ACACAC
6F6F6F
484848
262626

Shades & Tints Shades & Tints

#FFCD38

Dark
Light

#9CCC2D

Dark
Light

#3A9922

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffcd38;
  --color-2: #9ccc2d;
  --color-3: #3a9922;
  --color-4: #16662e;
  --color-5: #0b332b;
}

SCSS

$color-1: #ffcd38;
$color-2: #9ccc2d;
$color-3: #3a9922;
$color-4: #16662e;
$color-5: #0b332b;

TAILWIND

colors: {
  'brand-1': '#ffcd38',
  'brand-2': '#9ccc2d',
  'brand-3': '#3a9922',
  'brand-4': '#16662e',
  'brand-5': '#0b332b',
}

RGB Array

[255, 205, 56], [156, 204, 45], [58, 153, 34], [22, 102, 46], [11, 51, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFCD38, #9CCC2D, #3A9922, #16662E, #0B332B 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: #ffcd38; --color-2: #9ccc2d; --color-3: #3a9922; --color-4: #16662e; --color-5: #0b332b. 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