← Back to Editor

#CC353A · #ADCC6B · #230946 · #6A9674 · #FFA825

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#CC353A

Crimson · Crimson · Passion Red

HEX
#CC353A
RGB
rgb(204, 53, 58)
HSL
hsl(358, 60%, 50%)
HSB
hsb(358, 74%, 80%)
CMYK
cmyk(0%, 74%, 72%, 20%)
Oklch
oklch(56.2% 0.188 24.0)

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

#ADCC6B

Willow Green · DarkSeaGreen · Apple Green

HEX
#ADCC6B
RGB
rgb(173, 204, 107)
HSL
hsl(79, 49%, 61%)
HSB
hsb(79, 48%, 80%)
CMYK
cmyk(15%, 0%, 48%, 20%)
Oklch
oklch(80.1% 0.129 123.9)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#230946

Deep Indigo · MidnightBlue · Dark Purple

HEX
#230946
RGB
rgb(35, 9, 70)
HSL
hsl(266, 77%, 15%)
HSB
hsb(266, 87%, 27%)
CMYK
cmyk(50%, 87%, 0%, 73%)
Oklch
oklch(22.8% 0.104 296.3)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#6A9674

Celadon · Gray · Olive Green

HEX
#6A9674
RGB
rgb(106, 150, 116)
HSL
hsl(134, 17%, 50%)
HSB
hsb(134, 29%, 59%)
CMYK
cmyk(29%, 0%, 23%, 41%)
Oklch
oklch(63.1% 0.070 151.1)

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

#FFA825

Ginger · Orange · Warm Sun

HEX
#FFA825
RGB
rgb(255, 168, 37)
HSL
hsl(36, 100%, 57%)
HSB
hsb(36, 85%, 100%)
CMYK
cmyk(0%, 34%, 85%, 0%)
Oklch
oklch(79.9% 0.164 70.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC353A
33CCC7

Analogous

CC3385
CC353A
CC7A33

Triadic

CC353A
38CC33
3338CC

Split-Comp.

CC353A
33CC7A
3385CC

Tetradic

CC353A
85CC33
33CCC7
7A33CC

Contrast Matrix WCAG 2.1 Contrast

CC353A
ADCC6B
230946
6A9674
FFA825
—
2.8
Fail
3.5
AA Large
1.5
Fail
2.6
Fail
2.8
Fail
—
9.7
AAA
1.9
Fail
1.1
Fail
3.5
AA Large
9.7
AAA
—
5.2
AA
9.1
AAA
1.5
Fail
1.9
Fail
5.2
AA
—
1.7
Fail
2.6
Fail
1.1
Fail
9.1
AAA
1.7
Fail
—
White BG
5.1AA
1.8Fail
17.5AAA
3.4AA Large
1.9Fail
Black BG
4.1AA Large
11.6AAA
1.2Fail
6.2AA
10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8939
BABB82
181837
7D7D7C
D9D945

Deuteranopia

939F38
B9B688
191B34
7B777E
DEE54C

Tritanopia

C43838
AF9599
222C29
6C8384
FB5E63

Achromatopsia

636363
B8B8B8
181818
858585
B3B3B3

Shades & Tints Shades & Tints

#CC353A

Dark
Light

#ADCC6B

Dark
Light

#230946

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc353a;
  --color-2: #adcc6b;
  --color-3: #230946;
  --color-4: #6a9674;
  --color-5: #ffa825;
}

SCSS

$color-1: #cc353a;
$color-2: #adcc6b;
$color-3: #230946;
$color-4: #6a9674;
$color-5: #ffa825;

TAILWIND

colors: {
  'brand-1': '#cc353a',
  'brand-2': '#adcc6b',
  'brand-3': '#230946',
  'brand-4': '#6a9674',
  'brand-5': '#ffa825',
}

RGB Array

[204, 53, 58], [173, 204, 107], [35, 9, 70], [106, 150, 116], [255, 168, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CC353A, #ADCC6B, #230946, #6A9674, #FFA825 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: #cc353a; --color-2: #adcc6b; --color-3: #230946; --color-4: #6a9674; --color-5: #ffa825. 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