← Back to Editor

#FF6633 · #FF9966 · #FFC666 · #663333 · #660000

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

#FF6633

Tangerine · Tomato · Warm Sun

HEX
#FF6633
RGB
rgb(255, 102, 51)
HSL
hsl(15, 100%, 60%)
HSB
hsb(15, 80%, 100%)
CMYK
cmyk(0%, 60%, 80%, 0%)
Oklch
oklch(69.8% 0.197 38.0)

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

#FF9966

Apricot · SandyBrown · Warm Sun

HEX
#FF9966
RGB
rgb(255, 153, 102)
HSL
hsl(20, 100%, 70%)
HSB
hsb(20, 60%, 100%)
CMYK
cmyk(0%, 40%, 60%, 0%)
Oklch
oklch(77.9% 0.139 46.6)

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

#FFC666

Ginger · SandyBrown · Warm Sun

HEX
#FFC666
RGB
rgb(255, 198, 102)
HSL
hsl(38, 100%, 70%)
HSB
hsb(38, 60%, 100%)
CMYK
cmyk(0%, 22%, 60%, 0%)
Oklch
oklch(85.9% 0.130 78.6)

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

#663333

Crimson · DarkOliveGreen · Wine Red

HEX
#663333
RGB
rgb(102, 51, 51)
HSL
hsl(0, 33%, 30%)
HSB
hsb(0, 50%, 40%)
CMYK
cmyk(0%, 50%, 50%, 60%)
Oklch
oklch(38.7% 0.073 21.0)

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

#660000

Vermilion · Maroon · Deep Berry

HEX
#660000
RGB
rgb(102, 0, 0)
HSL
hsl(0, 100%, 20%)
HSB
hsb(0, 100%, 40%)
CMYK
cmyk(0%, 100%, 100%, 60%)
Oklch
oklch(32.0% 0.131 29.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF6633
33CCFF

Analogous

FF3366
FF6633
FFCC33

Triadic

FF6633
33FF66
6633FF

Split-Comp.

FF6633
33FFCC
3366FF

Tetradic

FF6633
66FF33
33CCFF
CC33FF

Contrast Matrix WCAG 2.1 Contrast

FF6633
FF9966
FFC666
663333
660000
—
1.4
Fail
1.9
Fail
3.5
AA Large
4.6
AA
1.4
Fail
—
1.4
Fail
4.8
AA
6.4
AA
1.9
Fail
1.4
Fail
—
6.5
AA
8.6
AAA
3.5
AA Large
4.8
AA
6.5
AA
—
1.3
Fail
4.6
AA
6.4
AA
8.6
AAA
1.3
Fail
—
White BG
2.9Fail
2.1Fail
1.6Fail
10.1AAA
13.4AAA
Black BG
7.2AAA
10.0AAA
13.5AAA
2.1Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBB3F
D3D272
E6E67D
504F33
3A3900

Deuteranopia

C6D142
D9E075
EAEE83
535733
404700

Tritanopia

F7494B
FA7C7E
FC9094
633333
610000

Achromatopsia

8E8E8E
B2B2B2
CCCCCC
424242
1E1E1E

Shades & Tints Shades & Tints

#FF6633

Dark
Light

#FF9966

Dark
Light

#FFC666

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff6633;
  --color-2: #ff9966;
  --color-3: #ffc666;
  --color-4: #663333;
  --color-5: #660000;
}

SCSS

$color-1: #ff6633;
$color-2: #ff9966;
$color-3: #ffc666;
$color-4: #663333;
$color-5: #660000;

TAILWIND

colors: {
  'brand-1': '#ff6633',
  'brand-2': '#ff9966',
  'brand-3': '#ffc666',
  'brand-4': '#663333',
  'brand-5': '#660000',
}

RGB Array

[255, 102, 51], [255, 153, 102], [255, 198, 102], [102, 51, 51], [102, 0, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF6633, #FF9966, #FFC666, #663333, #660000 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #ff6633; --color-2: #ff9966; --color-3: #ffc666; --color-4: #663333; --color-5: #660000. 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 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