← Back to Editor

#F0C8A2 · #CC6E11 · #171716 · #F28517 · #966C43

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F0C8A2

Apricot · Wheat · Peach Orange

HEX
#F0C8A2
RGB
rgb(240, 200, 162)
HSL
hsl(29, 72%, 79%)
HSB
hsb(29, 33%, 94%)
CMYK
cmyk(0%, 17%, 33%, 6%)
Oklch
oklch(85.8% 0.068 65.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#CC6E11

Ochre · Chocolate · Amber Brown

HEX
#CC6E11
RGB
rgb(204, 110, 17)
HSL
hsl(30, 85%, 43%)
HSB
hsb(30, 92%, 80%)
CMYK
cmyk(0%, 46%, 92%, 20%)
Oklch
oklch(63.3% 0.149 56.5)

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

#171716

Ink Black · Black · Jet Black

HEX
#171716
RGB
rgb(23, 23, 22)
HSL
hsl(60, 2%, 9%)
HSB
hsb(60, 4%, 9%)
CMYK
cmyk(0%, 0%, 4%, 91%)
Oklch
oklch(20.4% 0.002 106.6)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

#F28517

Ginger · GoldenRod · Warm Sun

HEX
#F28517
RGB
rgb(242, 133, 23)
HSL
hsl(30, 89%, 52%)
HSB
hsb(30, 90%, 95%)
CMYK
cmyk(0%, 45%, 90%, 5%)
Oklch
oklch(72.3% 0.169 57.1)

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

#966C43

Ochre · Sienna · Amber Brown

HEX
#966C43
RGB
rgb(150, 108, 67)
HSL
hsl(30, 38%, 43%)
HSB
hsb(30, 55%, 59%)
CMYK
cmyk(0%, 28%, 55%, 41%)
Oklch
oklch(56.5% 0.078 64.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0C8A2
A3CBF0

Analogous

F0A3A4
F0C8A2
F0EFA3

Triadic

F0C8A2
A3F0C8
C8A3F0

Split-Comp.

F0C8A2
A3F0EF
A3A4F0

Tetradic

F0C8A2
A4F0A3
A3CBF0
EFA3F0

Contrast Matrix WCAG 2.1 Contrast

F0C8A2
CC6E11
171716
F28517
966C43
—
2.3
Fail
11.5
AAA
1.7
Fail
3.0
Fail
2.3
Fail
—
5.0
AA
1.4
Fail
1.3
Fail
11.5
AAA
5.0
AA
—
7.0
AA
3.9
AA Large
1.7
Fail
1.4
Fail
7.0
AA
—
1.8
Fail
3.0
Fail
1.3
Fail
3.9
AA Large
1.8
Fail
—
White BG
1.6Fail
3.6AA Large
17.9AAA
2.6Fail
4.6AA
Black BG
13.5AAA
5.8AA
1.2Fail
8.1AAA
4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDEAB
A3A228
171716
C3C232
84834D

Deuteranopia

E1E4AD
A9B02D
171716
C9D138
86894F

Tritanopia

EEB2B4
C7393D
171616
ED474B
945556

Achromatopsia

D0D0D0
808080
171717
999999
747474

Shades & Tints Shades & Tints

#F0C8A2

Dark
Light

#CC6E11

Dark
Light

#171716

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0c8a2;
  --color-2: #cc6e11;
  --color-3: #171716;
  --color-4: #f28517;
  --color-5: #966c43;
}

SCSS

$color-1: #f0c8a2;
$color-2: #cc6e11;
$color-3: #171716;
$color-4: #f28517;
$color-5: #966c43;

TAILWIND

colors: {
  'brand-1': '#f0c8a2',
  'brand-2': '#cc6e11',
  'brand-3': '#171716',
  'brand-4': '#f28517',
  'brand-5': '#966c43',
}

RGB Array

[240, 200, 162], [204, 110, 17], [23, 23, 22], [242, 133, 23], [150, 108, 67]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0C8A2, #CC6E11, #171716, #F28517, #966C43 is ideal for: 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: #f0c8a2; --color-2: #cc6e11; --color-3: #171716; --color-4: #f28517; --color-5: #966c43. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 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