← Back to Editor

#CCB446 · #A1976B · #A16C6B · #9E2E43 · #D43D5A

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 Library

Color Details Color Details

#CCB446

Ginger · GoldenRod · Sunflower

HEX
#CCB446
RGB
rgb(204, 180, 70)
HSL
hsl(49, 57%, 54%)
HSB
hsb(49, 66%, 80%)
CMYK
cmyk(0%, 12%, 66%, 20%)
Oklch
oklch(77.0% 0.131 96.8)

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

#A1976B

Ginger · Gray · Sunflower

HEX
#A1976B
RGB
rgb(161, 151, 107)
HSL
hsl(49, 22%, 53%)
HSB
hsb(49, 34%, 63%)
CMYK
cmyk(0%, 6%, 34%, 37%)
Oklch
oklch(67.4% 0.062 96.9)

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

#A16C6B

Crimson · Gray · Passion Red

HEX
#A16C6B
RGB
rgb(161, 108, 107)
HSL
hsl(1, 22%, 53%)
HSB
hsb(1, 34%, 63%)
CMYK
cmyk(0%, 33%, 34%, 37%)
Oklch
oklch(58.7% 0.068 20.5)

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

#9E2E43

Crimson · Brown · Wine Red

HEX
#9E2E43
RGB
rgb(158, 46, 67)
HSL
hsl(349, 55%, 40%)
HSB
hsb(349, 71%, 62%)
CMYK
cmyk(0%, 71%, 58%, 38%)
Oklch
oklch(47.7% 0.147 13.9)

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

#D43D5A

Vermilion · Crimson · Passion Red

HEX
#D43D5A
RGB
rgb(212, 61, 90)
HSL
hsl(348, 64%, 54%)
HSB
hsb(348, 71%, 83%)
CMYK
cmyk(0%, 71%, 58%, 17%)
Oklch
oklch(58.9% 0.187 14.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCB446
475FCD

Analogous

CD7147
CCB446
A2CD47

Triadic

CCB446
47CDB4
B447CD

Split-Comp.

CCB446
47A2CD
7147CD

Tetradic

CCB446
47CD71
475FCD
CD47A2

Contrast Matrix WCAG 2.1 Contrast

CCB446
A1976B
A16C6B
9E2E43
D43D5A
—
1.4
Fail
2.1
Fail
3.5
AA Large
2.2
Fail
1.4
Fail
—
1.5
Fail
2.4
Fail
1.6
Fail
2.1
Fail
1.5
Fail
—
1.7
Fail
1.1
Fail
3.5
AA Large
2.4
Fail
1.7
Fail
—
1.6
Fail
2.2
Fail
1.6
Fail
1.1
Fail
1.6
Fail
—
White BG
2.1Fail
2.9Fail
4.3AA Large
7.2AAA
4.6AA
Black BG
10.2AAA
7.2AAA
4.9AA
2.9Fail
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C161
9D9D76
8A8A6B
6E6C3E
939153

Deuteranopia

C3C567
9D9E78
8D916B
747C3D
9BA751

Tritanopia

CB767A
A17E80
9E6B6B
983A39
CC4D4C

Achromatopsia

AFAFAF
959595
7C7C7C
525252
6D6D6D

Shades & Tints Shades & Tints

#CCB446

Dark
Light

#A1976B

Dark
Light

#A16C6B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccb446;
  --color-2: #a1976b;
  --color-3: #a16c6b;
  --color-4: #9e2e43;
  --color-5: #d43d5a;
}

SCSS

$color-1: #ccb446;
$color-2: #a1976b;
$color-3: #a16c6b;
$color-4: #9e2e43;
$color-5: #d43d5a;

TAILWIND

colors: {
  'brand-1': '#ccb446',
  'brand-2': '#a1976b',
  'brand-3': '#a16c6b',
  'brand-4': '#9e2e43',
  'brand-5': '#d43d5a',
}

RGB Array

[204, 180, 70], [161, 151, 107], [161, 108, 107], [158, 46, 67], [212, 61, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCB446, #A1976B, #A16C6B, #9E2E43, #D43D5A is ideal for: corporate websites, product showcases, portfolios. 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: #ccb446; --color-2: #a1976b; --color-3: #a16c6b; --color-4: #9e2e43; --color-5: #d43d5a. 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 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