← Back to Editor

#FFFF2B · #F3AA27 · #DB6C24 · #054B86 · #000F30

warm

A 5-color warm 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

#FFFF2B

Autumn Sage · Yellow · Sunflower

HEX
#FFFF2B
RGB
rgb(255, 255, 43)
HSL
hsl(60, 100%, 58%)
HSB
hsb(60, 83%, 100%)
CMYK
cmyk(0%, 0%, 83%, 0%)
Oklch
oklch(96.9% 0.203 109.7)

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

#F3AA27

Ginger · GoldenRod · Warm Sun

HEX
#F3AA27
RGB
rgb(243, 170, 39)
HSL
hsl(39, 89%, 55%)
HSB
hsb(39, 84%, 95%)
CMYK
cmyk(0%, 30%, 84%, 5%)
Oklch
oklch(78.9% 0.156 75.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#DB6C24

Tangerine · Chocolate · Amber Brown

HEX
#DB6C24
RGB
rgb(219, 108, 36)
HSL
hsl(24, 72%, 50%)
HSB
hsb(24, 84%, 86%)
CMYK
cmyk(0%, 51%, 84%, 14%)
Oklch
oklch(65.2% 0.160 48.6)

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

#054B86

Lake Blue · Teal · Prussian Blue

HEX
#054B86
RGB
rgb(5, 75, 134)
HSL
hsl(207, 93%, 27%)
HSB
hsb(207, 96%, 53%)
CMYK
cmyk(96%, 44%, 0%, 47%)
Oklch
oklch(40.9% 0.116 251.3)

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

#000F30

Indigo · Black · Deep Sea Blue

HEX
#000F30
RGB
rgb(0, 15, 48)
HSL
hsl(221, 100%, 9%)
HSB
hsb(221, 100%, 19%)
CMYK
cmyk(100%, 69%, 0%, 81%)
Oklch
oklch(18.0% 0.071 259.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFF2B
2929FF

Analogous

FF9429
FFFF2B
94FF29

Triadic

FFFF2B
29FFFF
FF29FF

Split-Comp.

FFFF2B
2994FF
9429FF

Tetradic

FFFF2B
29FF94
2929FF
FF2994

Contrast Matrix WCAG 2.1 Contrast

FFFF2B
F3AA27
DB6C24
054B86
000F30
—
1.8
Fail
3.2
AA Large
8.3
AAA
17.6
AAA
1.8
Fail
—
1.7
Fail
4.5
AA Large
9.5
AAA
3.2
AA Large
1.7
Fail
—
2.6
Fail
5.6
AA
8.3
AAA
4.5
AA Large
2.6
Fail
—
2.1
Fail
17.6
AAA
9.5
AAA
5.6
AA
2.1
Fail
—
White BG
1.1Fail
2.0Fail
3.4AA Large
8.9AAA
18.9AAA
Black BG
19.6AAA
10.6AAA
6.2AA
2.4Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FFFF5E
D3D347
ABAA35
232478
060728

Deuteranopia

FFFF6B
D8DD4E
B1BA3A
1F1A74
060526

Tritanopia

FF8790
EF6065
D54346
096C6A
012220

Achromatopsia

E7E7E7
B1B1B1
858585
3D3D3D
0E0E0E

Shades & Tints Shades & Tints

#FFFF2B

Dark
Light

#F3AA27

Dark
Light

#DB6C24

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffff2b;
  --color-2: #f3aa27;
  --color-3: #db6c24;
  --color-4: #054b86;
  --color-5: #000f30;
}

SCSS

$color-1: #ffff2b;
$color-2: #f3aa27;
$color-3: #db6c24;
$color-4: #054b86;
$color-5: #000f30;

TAILWIND

colors: {
  'brand-1': '#ffff2b',
  'brand-2': '#f3aa27',
  'brand-3': '#db6c24',
  'brand-4': '#054b86',
  'brand-5': '#000f30',
}

RGB Array

[255, 255, 43], [243, 170, 39], [219, 108, 36], [5, 75, 134], [0, 15, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FFFF2B, #F3AA27, #DB6C24, #054B86, #000F30 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: #ffff2b; --color-2: #f3aa27; --color-3: #db6c24; --color-4: #054b86; --color-5: #000f30. 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 warm-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