← Back to Editor

#FFA43A · #CD7022 · #8F6429 · #4E5351 · #1B3745

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#FFA43A

Ginger · SandyBrown · Warm Sun

HEX
#FFA43A
RGB
rgb(255, 164, 58)
HSL
hsl(32, 100%, 61%)
HSB
hsb(32, 77%, 100%)
CMYK
cmyk(0%, 36%, 77%, 0%)
Oklch
oklch(79.3% 0.157 65.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#CD7022

Tangerine · Chocolate · Amber Brown

HEX
#CD7022
RGB
rgb(205, 112, 34)
HSL
hsl(27, 72%, 47%)
HSB
hsb(27, 83%, 80%)
CMYK
cmyk(0%, 45%, 83%, 20%)
Oklch
oklch(63.9% 0.145 54.9)

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

#8F6429

Ochre · Sienna · Amber Brown

HEX
#8F6429
RGB
rgb(143, 100, 41)
HSL
hsl(35, 55%, 36%)
HSB
hsb(35, 71%, 56%)
CMYK
cmyk(0%, 30%, 71%, 44%)
Oklch
oklch(53.7% 0.093 71.8)

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

#4E5351

Ink Gray · DarkSlateGray · Charcoal

HEX
#4E5351
RGB
rgb(78, 83, 81)
HSL
hsl(156, 3%, 32%)
HSB
hsb(156, 6%, 33%)
CMYK
cmyk(6%, 0%, 2%, 67%)
Oklch
oklch(43.7% 0.007 170.1)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#1B3745

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#1B3745
RGB
rgb(27, 55, 69)
HSL
hsl(200, 44%, 19%)
HSB
hsb(200, 61%, 27%)
CMYK
cmyk(61%, 20%, 0%, 73%)
Oklch
oklch(32.1% 0.042 231.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFA43A
3895FF

Analogous

FF3F38
FFA43A
F8FF38

Triadic

FFA43A
38FFA2
A238FF

Split-Comp.

FFA43A
38F8FF
3F38FF

Tetradic

FFA43A
38FF3F
3895FF
FF38F8

Contrast Matrix WCAG 2.1 Contrast

FFA43A
CD7022
8F6429
4E5351
1B3745
—
1.8
Fail
2.6
Fail
4.0
AA Large
6.3
AA
1.8
Fail
—
1.5
Fail
2.2
Fail
3.5
AA Large
2.6
Fail
1.5
Fail
—
1.5
Fail
2.4
Fail
4.0
AA Large
2.2
Fail
1.5
Fail
—
1.6
Fail
6.3
AA
3.5
AA Large
2.4
Fail
1.6
Fail
—
White BG
2.0Fail
3.5AA Large
5.2AA
7.8AAA
12.5AAA
Black BG
10.6AAA
5.9AA
4.0AA Large
2.7Fail
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D754
A5A435
7C7C37
505051
272742

Deuteranopia

DDE45A
AAB139
7F823B
505052
262341

Tritanopia

FA686C
C84447
8D4345
4E5252
1C3F3E

Achromatopsia

B3B3B3
838383
6A6A6A
515151
303030

Shades & Tints Shades & Tints

#FFA43A

Dark
Light

#CD7022

Dark
Light

#8F6429

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffa43a;
  --color-2: #cd7022;
  --color-3: #8f6429;
  --color-4: #4e5351;
  --color-5: #1b3745;
}

SCSS

$color-1: #ffa43a;
$color-2: #cd7022;
$color-3: #8f6429;
$color-4: #4e5351;
$color-5: #1b3745;

TAILWIND

colors: {
  'brand-1': '#ffa43a',
  'brand-2': '#cd7022',
  'brand-3': '#8f6429',
  'brand-4': '#4e5351',
  'brand-5': '#1b3745',
}

RGB Array

[255, 164, 58], [205, 112, 34], [143, 100, 41], [78, 83, 81], [27, 55, 69]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FFA43A, #CD7022, #8F6429, #4E5351, #1B3745 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ffa43a; --color-2: #cd7022; --color-3: #8f6429; --color-4: #4e5351; --color-5: #1b3745. 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 tech, SaaS, healthcare, eco industries. 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