← Back to Editor

#FFF28A · #FDD154 · #213534 · #0B2025 · #030D16

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

#FFF28A

Fresh Green · Khaki · Lemon Cream

HEX
#FFF28A
RGB
rgb(255, 242, 138)
HSL
hsl(53, 100%, 77%)
HSB
hsb(53, 46%, 100%)
CMYK
cmyk(0%, 5%, 46%, 0%)
Oklch
oklch(95.0% 0.126 102.2)

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

#FDD154

Ginger · SandyBrown · Sunflower

HEX
#FDD154
RGB
rgb(253, 209, 84)
HSL
hsl(44, 98%, 66%)
HSB
hsb(44, 67%, 99%)
CMYK
cmyk(0%, 17%, 67%, 1%)
Oklch
oklch(87.7% 0.148 89.4)

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

#213534

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#213534
RGB
rgb(33, 53, 52)
HSL
hsl(177, 23%, 17%)
HSB
hsb(177, 38%, 21%)
CMYK
cmyk(38%, 0%, 2%, 79%)
Oklch
oklch(31.2% 0.026 192.0)

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

#0B2025

Lake Blue · Black · Peacock Green

HEX
#0B2025
RGB
rgb(11, 32, 37)
HSL
hsl(192, 54%, 9%)
HSB
hsb(192, 70%, 15%)
CMYK
cmyk(70%, 14%, 0%, 85%)
Oklch
oklch(22.9% 0.028 215.3)

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

#030D16

Lake Blue · Black · Deep Sea Blue

HEX
#030D16
RGB
rgb(3, 13, 22)
HSL
hsl(208, 76%, 5%)
HSB
hsb(208, 86%, 9%)
CMYK
cmyk(86%, 41%, 0%, 91%)
Oklch
oklch(15.3% 0.026 242.5)

Traditional「Lake Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF28A
8A97FF

Analogous

FFB78A
FFF28A
D2FF8A

Triadic

FFF28A
8AFFF1
F18AFF

Split-Comp.

FFF28A
8AD2FF
B78AFF

Tetradic

FFF28A
8AFFB7
8A97FF
FF8AD2

Contrast Matrix WCAG 2.1 Contrast

FFF28A
FDD154
213534
0B2025
030D16
—
1.3
Fail
11.3
AAA
14.7
AAA
17.1
AAA
1.3
Fail
—
8.9
AAA
11.6
AAA
13.4
AAA
11.3
AAA
8.9
AAA
—
1.3
Fail
1.5
Fail
14.7
AAA
11.6
AAA
1.3
Fail
—
1.2
Fail
17.1
AAA
13.4
AAA
1.5
Fail
1.2
Fail
—
White BG
1.1Fail
1.5Fail
12.9AAA
16.8AAA
19.6AAA
Black BG
18.3AAA
14.4AAA
1.6Fail
1.2Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9A3
EAEA72
2A2A34
141424
070714

Deuteranopia

FAFBA9
EDF07A
292734
131124
070613

Tritanopia

FEB7BB
FB8A8F
223434
0C2323
031212

Achromatopsia

EAEAEA
D0D0D0
2F2F2F
1A1A1A
0B0B0B

Shades & Tints Shades & Tints

#FFF28A

Dark
Light

#FDD154

Dark
Light

#213534

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff28a;
  --color-2: #fdd154;
  --color-3: #213534;
  --color-4: #0b2025;
  --color-5: #030d16;
}

SCSS

$color-1: #fff28a;
$color-2: #fdd154;
$color-3: #213534;
$color-4: #0b2025;
$color-5: #030d16;

TAILWIND

colors: {
  'brand-1': '#fff28a',
  'brand-2': '#fdd154',
  'brand-3': '#213534',
  'brand-4': '#0b2025',
  'brand-5': '#030d16',
}

RGB Array

[255, 242, 138], [253, 209, 84], [33, 53, 52], [11, 32, 37], [3, 13, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF28A, #FDD154, #213534, #0B2025, #030D16 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: #fff28a; --color-2: #fdd154; --color-3: #213534; --color-4: #0b2025; --color-5: #030d16. 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