← Back to Editor

#CCC089 · #FFC105 · #FF8133 · #F6083C · #4F524E

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 App

Color Details Color Details

#CCC089

Ginger · Tan · Sunflower

HEX
#CCC089
RGB
rgb(204, 192, 137)
HSL
hsl(49, 40%, 67%)
HSB
hsb(49, 33%, 80%)
CMYK
cmyk(0%, 6%, 33%, 20%)
Oklch
oklch(80.5% 0.074 97.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#FFC105

Ginger · Gold · Sunflower

HEX
#FFC105
RGB
rgb(255, 193, 5)
HSL
hsl(45, 100%, 51%)
HSB
hsb(45, 98%, 100%)
CMYK
cmyk(0%, 24%, 98%, 0%)
Oklch
oklch(84.4% 0.172 85.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#FF8133

Tangerine · Coral · Warm Sun

HEX
#FF8133
RGB
rgb(255, 129, 51)
HSL
hsl(23, 100%, 60%)
HSB
hsb(23, 80%, 100%)
CMYK
cmyk(0%, 49%, 80%, 0%)
Oklch
oklch(73.5% 0.176 48.3)

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

#F6083C

Vermilion · Crimson · Passion Red

HEX
#F6083C
RGB
rgb(246, 8, 60)
HSL
hsl(347, 94%, 50%)
HSB
hsb(347, 97%, 96%)
CMYK
cmyk(0%, 97%, 76%, 4%)
Oklch
oklch(61.6% 0.246 21.4)

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

#4F524E

Ink Gray · DarkSlateGray · Charcoal

HEX
#4F524E
RGB
rgb(79, 82, 78)
HSL
hsl(105, 3%, 31%)
HSB
hsb(105, 5%, 32%)
CMYK
cmyk(4%, 0%, 5%, 68%)
Oklch
oklch(43.5% 0.008 137.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCC089
8996CD

Analogous

CD9F89
CCC089
B7CD89

Triadic

CCC089
89CDC0
C089CD

Split-Comp.

CCC089
89B7CD
9F89CD

Tetradic

CCC089
89CD9F
8996CD
CD89B7

Contrast Matrix WCAG 2.1 Contrast

CCC089
FFC105
FF8133
F6083C
4F524E
—
1.1
Fail
1.4
Fail
2.3
Fail
4.3
AA Large
1.1
Fail
—
1.5
Fail
2.6
Fail
4.9
AA
1.4
Fail
1.5
Fail
—
1.7
Fail
3.2
AA Large
2.3
Fail
2.6
Fail
1.7
Fail
—
1.9
Fail
4.3
AA Large
4.9
AA
3.2
AA Large
1.9
Fail
—
White BG
1.8Fail
1.6Fail
2.5Fail
4.2AA Large
7.9AAA
Black BG
11.5AAA
12.9AAA
8.4AAA
5.0AA
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C796
E4E432
C8C746
8F8D2F
50504F

Deuteranopia

C8C89A
E8EC3D
D0D94A
9DAF2C
50504F

Tritanopia

CBA1A3
FC565E
F95558
EA2523
4F5050

Achromatopsia

BDBDBD
BEBEBE
9E9E9E
555555
515151

Shades & Tints Shades & Tints

#CCC089

Dark
Light

#FFC105

Dark
Light

#FF8133

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccc089;
  --color-2: #ffc105;
  --color-3: #ff8133;
  --color-4: #f6083c;
  --color-5: #4f524e;
}

SCSS

$color-1: #ccc089;
$color-2: #ffc105;
$color-3: #ff8133;
$color-4: #f6083c;
$color-5: #4f524e;

TAILWIND

colors: {
  'brand-1': '#ccc089',
  'brand-2': '#ffc105',
  'brand-3': '#ff8133',
  'brand-4': '#f6083c',
  'brand-5': '#4f524e',
}

RGB Array

[204, 192, 137], [255, 193, 5], [255, 129, 51], [246, 8, 60], [79, 82, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCC089, #FFC105, #FF8133, #F6083C, #4F524E is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #ccc089; --color-2: #ffc105; --color-3: #ff8133; --color-4: #f6083c; --color-5: #4f524e. 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. 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