← Back to Editor

#2F2C01 · #F6B014 · #FACD5A · #7A935A · #213708

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#2F2C01

Autumn Sage · Black · Amber Gold

HEX
#2F2C01
RGB
rgb(47, 44, 1)
HSL
hsl(56, 96%, 9%)
HSB
hsb(56, 98%, 18%)
CMYK
cmyk(0%, 6%, 98%, 82%)
Oklch
oklch(28.7% 0.060 105.5)

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

#F6B014

Ginger · Orange · Sunflower

HEX
#F6B014
RGB
rgb(246, 176, 20)
HSL
hsl(41, 93%, 52%)
HSB
hsb(41, 92%, 96%)
CMYK
cmyk(0%, 28%, 92%, 4%)
Oklch
oklch(80.3% 0.163 79.2)

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

#FACD5A

Ginger · SandyBrown · Sunflower

HEX
#FACD5A
RGB
rgb(250, 205, 90)
HSL
hsl(43, 94%, 67%)
HSB
hsb(43, 64%, 98%)
CMYK
cmyk(0%, 18%, 64%, 2%)
Oklch
oklch(86.6% 0.141 87.6)

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

#7A935A

Grass Green · Gray · Olive Green

HEX
#7A935A
RGB
rgb(122, 147, 90)
HSL
hsl(86, 24%, 46%)
HSB
hsb(86, 39%, 58%)
CMYK
cmyk(17%, 0%, 39%, 42%)
Oklch
oklch(62.9% 0.085 127.9)

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

#213708

Grass Green · DarkGreen · Dark Green

HEX
#213708
RGB
rgb(33, 55, 8)
HSL
hsl(88, 75%, 12%)
HSB
hsb(88, 85%, 22%)
CMYK
cmyk(40%, 0%, 85%, 78%)
Oklch
oklch(30.7% 0.075 131.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F2C01
01042D

Analogous

2D1401
2F2C01
1A2D01

Triadic

2F2C01
012D2A
2A012D

Split-Comp.

2F2C01
011A2D
14012D

Tetradic

2F2C01
012D14
01042D
2D011A

Contrast Matrix WCAG 2.1 Contrast

2F2C01
F6B014
FACD5A
7A935A
213708
—
7.5
AAA
9.4
AAA
4.2
AA Large
1.1
Fail
7.5
AAA
—
1.3
Fail
1.8
Fail
6.9
AA
9.4
AAA
1.3
Fail
—
2.3
Fail
8.6
AAA
4.2
AA Large
1.8
Fail
2.3
Fail
—
3.8
AA Large
1.1
Fail
6.9
AA
8.6
AAA
3.8
AA Large
—
White BG
14.2AAA
1.9Fail
1.5Fail
3.4AA Large
13.0AAA
Black BG
1.5Fail
11.1AAA
13.9AAA
6.1AA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E0B
D8D73A
E7E676
858568
2B2B13

Deuteranopia

2E2E0E
DCE143
E9ED7D
83826B
292816

Tritanopia

2F1415
F3585E
F88C91
7B7375
221C1E

Achromatopsia

282828
B3B3B3
CDCDCD
858585
2B2B2B

Shades & Tints Shades & Tints

#2F2C01

Dark
Light

#F6B014

Dark
Light

#FACD5A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f2c01;
  --color-2: #f6b014;
  --color-3: #facd5a;
  --color-4: #7a935a;
  --color-5: #213708;
}

SCSS

$color-1: #2f2c01;
$color-2: #f6b014;
$color-3: #facd5a;
$color-4: #7a935a;
$color-5: #213708;

TAILWIND

colors: {
  'brand-1': '#2f2c01',
  'brand-2': '#f6b014',
  'brand-3': '#facd5a',
  'brand-4': '#7a935a',
  'brand-5': '#213708',
}

RGB Array

[47, 44, 1], [246, 176, 20], [250, 205, 90], [122, 147, 90], [33, 55, 8]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #2F2C01, #F6B014, #FACD5A, #7A935A, #213708 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: #2f2c01; --color-2: #f6b014; --color-3: #facd5a; --color-4: #7a935a; --color-5: #213708. 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