← Back to Editor

#668F43 · #F8AF40 · #F46101 · #972000 · #19090A

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

#668F43

Celadon · DarkOliveGreen · Olive Green

HEX
#668F43
RGB
rgb(102, 143, 67)
HSL
hsl(92, 36%, 41%)
HSB
hsb(92, 53%, 56%)
CMYK
cmyk(29%, 0%, 53%, 44%)
Oklch
oklch(60.2% 0.115 132.4)

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

#F8AF40

Ginger · SandyBrown · Warm Sun

HEX
#F8AF40
RGB
rgb(248, 175, 64)
HSL
hsl(36, 93%, 61%)
HSB
hsb(36, 74%, 97%)
CMYK
cmyk(0%, 29%, 74%, 3%)
Oklch
oklch(80.5% 0.148 73.6)

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

#F46101

Tangerine · OrangeRed · Amber Brown

HEX
#F46101
RGB
rgb(244, 97, 1)
HSL
hsl(24, 99%, 48%)
HSB
hsb(24, 100%, 96%)
CMYK
cmyk(0%, 60%, 100%, 4%)
Oklch
oklch(67.3% 0.198 43.4)

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

#972000

Vermilion · DarkRed · Wine Red

HEX
#972000
RGB
rgb(151, 32, 0)
HSL
hsl(13, 100%, 30%)
HSB
hsb(13, 100%, 59%)
CMYK
cmyk(0%, 79%, 100%, 41%)
Oklch
oklch(44.2% 0.159 34.0)

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

#19090A

Crimson · Black · Deep Berry

HEX
#19090A
RGB
rgb(25, 9, 10)
HSL
hsl(356, 47%, 7%)
HSB
hsb(356, 64%, 10%)
CMYK
cmyk(0%, 64%, 60%, 90%)
Oklch
oklch(16.5% 0.028 16.6)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

668F43
6B438E

Analogous

8C8E43
668F43
438E45

Triadic

668F43
43668E
8E4366

Split-Comp.

668F43
45438E
8E438C

Tetradic

668F43
438C8E
6B438E
8E4543

Contrast Matrix WCAG 2.1 Contrast

668F43
F8AF40
F46101
972000
19090A
—
2.0
Fail
1.2
Fail
2.2
Fail
5.1
AA
2.0
Fail
—
1.7
Fail
4.4
AA Large
10.3
AAA
1.2
Fail
1.7
Fail
—
2.6
Fail
6.0
AA
2.2
Fail
4.4
AA Large
2.6
Fail
—
2.3
Fail
5.1
AA
10.3
AAA
6.0
AA
2.3
Fail
—
White BG
3.8AA Large
1.9Fail
3.2AA Large
8.3AAA
19.4AAA
Black BG
5.6AA
11.2AAA
6.6AA
2.5Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

787855
D8D85B
B4B318
636208
12120A

Deuteranopia

75725A
DDE261
BDC81E
6A730A
13140A

Tritanopia

686467
F47075
ED2B2F
910E0F
180A0A

Achromatopsia

7A7A7A
B8B8B8
828282
404040
0E0E0E

Shades & Tints Shades & Tints

#668F43

Dark
Light

#F8AF40

Dark
Light

#F46101

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #668f43;
  --color-2: #f8af40;
  --color-3: #f46101;
  --color-4: #972000;
  --color-5: #19090a;
}

SCSS

$color-1: #668f43;
$color-2: #f8af40;
$color-3: #f46101;
$color-4: #972000;
$color-5: #19090a;

TAILWIND

colors: {
  'brand-1': '#668f43',
  'brand-2': '#f8af40',
  'brand-3': '#f46101',
  'brand-4': '#972000',
  'brand-5': '#19090a',
}

RGB Array

[102, 143, 67], [248, 175, 64], [244, 97, 1], [151, 32, 0], [25, 9, 10]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #668F43, #F8AF40, #F46101, #972000, #19090A 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: #668f43; --color-2: #f8af40; --color-3: #f46101; --color-4: #972000; --color-5: #19090a. 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