← Back to Editor

#F19D35 · #D85A32 · #003030 · #186060 · #607860

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

#F19D35

Ginger · GoldenRod · Warm Sun

HEX
#F19D35
RGB
rgb(241, 157, 53)
HSL
hsl(33, 87%, 58%)
HSB
hsb(33, 78%, 95%)
CMYK
cmyk(0%, 35%, 78%, 5%)
Oklch
oklch(76.4% 0.150 66.9)

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

#D85A32

Vermilion · Chocolate · Passion Red

HEX
#D85A32
RGB
rgb(216, 90, 50)
HSL
hsl(14, 68%, 52%)
HSB
hsb(14, 77%, 85%)
CMYK
cmyk(0%, 58%, 77%, 15%)
Oklch
oklch(62.3% 0.168 37.7)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#003030

Lake Blue · DarkSlateGray · Peacock Green

HEX
#003030
RGB
rgb(0, 48, 48)
HSL
hsl(180, 100%, 9%)
HSB
hsb(180, 100%, 19%)
CMYK
cmyk(100%, 0%, 0%, 81%)
Oklch
oklch(28.0% 0.048 194.8)

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

#186060

Lake Blue · DarkSlateGray · Peacock Green

HEX
#186060
RGB
rgb(24, 96, 96)
HSL
hsl(180, 60%, 24%)
HSB
hsb(180, 75%, 38%)
CMYK
cmyk(75%, 0%, 0%, 62%)
Oklch
oklch(44.7% 0.068 195.0)

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

#607860

Celadon · DimGray · Olive Green

HEX
#607860
RGB
rgb(96, 120, 96)
HSL
hsl(120, 11%, 42%)
HSB
hsb(120, 20%, 47%)
CMYK
cmyk(20%, 0%, 20%, 53%)
Oklch
oklch(54.6% 0.046 144.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F19D35
378BF1

Analogous

F14037
F19D35
E8F137

Triadic

F19D35
37F19D
9D37F1

Split-Comp.

F19D35
37E8F1
4037F1

Tetradic

F19D35
37F140
378BF1
F137E8

Contrast Matrix WCAG 2.1 Contrast

F19D35
D85A32
003030
186060
607860
—
1.8
Fail
6.6
AA
3.3
AA Large
2.2
Fail
1.8
Fail
—
3.7
AA Large
1.9
Fail
1.2
Fail
6.6
AA
3.7
AA Large
—
2.0
Fail
3.0
Fail
3.3
AA Large
1.9
Fail
2.0
Fail
—
1.5
Fail
2.2
Fail
1.2
Fail
3.0
Fail
1.5
Fail
—
White BG
2.2Fail
3.9AA Large
14.3AAA
7.3AAA
4.8AA
Black BG
9.6AAA
5.4AA
1.5Fail
2.9Fail
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCC4E
A1A03C
151530
373860
6A6B66

Deuteranopia

D2D854
A9B23E
120E30
332E60
696767

Tritanopia

ED6266
D24345
023030
1C6060
616A6B

Achromatopsia

AAAAAA
7B7B7B
222222
4A4A4A
6E6E6E

Shades & Tints Shades & Tints

#F19D35

Dark
Light

#D85A32

Dark
Light

#003030

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f19d35;
  --color-2: #d85a32;
  --color-3: #003030;
  --color-4: #186060;
  --color-5: #607860;
}

SCSS

$color-1: #f19d35;
$color-2: #d85a32;
$color-3: #003030;
$color-4: #186060;
$color-5: #607860;

TAILWIND

colors: {
  'brand-1': '#f19d35',
  'brand-2': '#d85a32',
  'brand-3': '#003030',
  'brand-4': '#186060',
  'brand-5': '#607860',
}

RGB Array

[241, 157, 53], [216, 90, 50], [0, 48, 48], [24, 96, 96], [96, 120, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F19D35, #D85A32, #003030, #186060, #607860 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: #f19d35; --color-2: #d85a32; --color-3: #003030; --color-4: #186060; --color-5: #607860. 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