← Back to Editor

#CC964B · #ABB823 · #FF1F35 · #80174B

A 4-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

#CC964B

Ginger · SandyBrown · Warm Sun

HEX
#CC964B
RGB
rgb(204, 150, 75)
HSL
hsl(35, 56%, 55%)
HSB
hsb(35, 63%, 80%)
CMYK
cmyk(0%, 26%, 63%, 20%)
Oklch
oklch(71.0% 0.113 73.2)

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

#ABB823

Autumn Sage · GoldenRod · Honey Gold

HEX
#ABB823
RGB
rgb(171, 184, 35)
HSL
hsl(65, 68%, 43%)
HSB
hsb(65, 81%, 72%)
CMYK
cmyk(7%, 0%, 81%, 28%)
Oklch
oklch(74.8% 0.160 114.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#FF1F35

Vermilion · Crimson · Passion Red

HEX
#FF1F35
RGB
rgb(255, 31, 53)
HSL
hsl(354, 100%, 56%)
HSB
hsb(354, 88%, 100%)
CMYK
cmyk(0%, 88%, 79%, 0%)
Oklch
oklch(63.9% 0.247 24.6)

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

#80174B

Dark Violet · Brown · Camellia

HEX
#80174B
RGB
rgb(128, 23, 75)
HSL
hsl(330, 70%, 30%)
HSB
hsb(330, 82%, 50%)
CMYK
cmyk(0%, 82%, 41%, 50%)
Oklch
oklch(40.4% 0.146 356.2)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC964B
4C82CD

Analogous

CD574C
CC964B
C2CD4C

Triadic

CC964B
4CCD97
974CCD

Split-Comp.

CC964B
4CC2CD
574CCD

Tetradic

CC964B
4CCD57
4C82CD
CD4CC2

Contrast Matrix WCAG 2.1 Contrast

CC964B
ABB823
FF1F35
80174B
—
1.2
Fail
1.5
Fail
3.7
AA Large
1.2
Fail
—
1.7
Fail
4.5
AA Large
1.5
Fail
1.7
Fail
—
2.6
Fail
3.7
AA Large
4.5
AA Large
2.6
Fail
—
White BG
2.6Fail
2.2Fail
3.8AA Large
9.8AAA
Black BG
8.0AAA
9.6AAA
5.5AA
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B45D
B1B147
9E9C30
53523E

Deuteranopia

B8BC62
B0AF50
ABBC2E
59613B

Tritanopia

C96B6F
AC646A
F42B2B
7B3432

Achromatopsia

9E9E9E
A3A3A3
646464
3C3C3C

Shades & Tints Shades & Tints

#CC964B

Dark
Light

#ABB823

Dark
Light

#FF1F35

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc964b;
  --color-2: #abb823;
  --color-3: #ff1f35;
  --color-4: #80174b;
}

SCSS

$color-1: #cc964b;
$color-2: #abb823;
$color-3: #ff1f35;
$color-4: #80174b;

TAILWIND

colors: {
  'brand-1': '#cc964b',
  'brand-2': '#abb823',
  'brand-3': '#ff1f35',
  'brand-4': '#80174b',
}

RGB Array

[204, 150, 75], [171, 184, 35], [255, 31, 53], [128, 23, 75]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #CC964B, #ABB823, #FF1F35, #80174B 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 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cc964b; --color-2: #abb823; --color-3: #ff1f35; --color-4: #80174b. 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 4-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