#CA0C4A + #FAD804 + #90962A + #775951 + #301830 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CA0C4A

Dark Violet · Crimson · Camellia

HEX

#CA0C4A

RGB

rgb(202, 12, 74)

HSL

hsl(340, 89%, 42%)

HSB

hsb(340, 94%, 79%)

CMYK

cmyk(0%, 94%, 63%, 21%)

Oklch

oklch(53.8% 0.210 13.0)

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

#FAD804

Autumn Sage · Gold · Honey Gold

HEX

#FAD804

RGB

rgb(250, 216, 4)

HSL

hsl(52, 97%, 50%)

HSB

hsb(52, 98%, 98%)

CMYK

cmyk(0%, 14%, 98%, 2%)

Oklch

oklch(88.4% 0.182 97.6)

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

#90962A

Autumn Sage · Olive · Honey Gold

HEX

#90962A

RGB

rgb(144, 150, 42)

HSL

hsl(63, 56%, 38%)

HSB

hsb(63, 72%, 59%)

CMYK

cmyk(4%, 0%, 72%, 41%)

Oklch

oklch(64.8% 0.128 112.6)

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

#775951

Crimson · DimGray · Wine Red

HEX

#775951

RGB

rgb(119, 89, 81)

HSL

hsl(13, 19%, 39%)

HSB

hsb(13, 32%, 47%)

CMYK

cmyk(0%, 25%, 32%, 53%)

Oklch

oklch(49.3% 0.042 35.4)

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

#301830

Rose Purple · DarkSlateGray · Dark Purple

HEX

#301830

RGB

rgb(48, 24, 48)

HSL

hsl(300, 33%, 14%)

HSB

hsb(300, 50%, 19%)

CMYK

cmyk(0%, 50%, 0%, 81%)

Oklch

oklch(25.3% 0.055 327.0)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CA0C4A

0CCA8B

Analogous

CA0CAB

CA0C4A

CA2C0C

Triadic

CA0C4A

4BCA0C

0C4BCA

Split-Comp.

CA0C4A

0CCA2C

0CABCA

Tetradic

CA0C4A

ABCA0C

0CCA8B

2C0CCA

Contrast Matrix WCAG 2.1 Contrast

CA0C4A	FAD804	90962A	775951	301830
—	4.1 AA Large	1.8 Fail	1.1 Fail	2.8 Fail
4.1 AA Large	—	2.3 Fail	4.5 AA Large	11.5 AAA
1.8 Fail	2.3 Fail	—	2.0 Fail	5.1 AA
1.1 Fail	4.5 AA Large	2.0 Fail	—	2.6 Fail
2.8 Fail	11.5 AAA	5.1 AA	2.6 Fail	—

White BG

5.7AA

1.4Fail

3.2AA Large

6.3AA

16.2AAA

Black BG

3.7AA Large

14.9AAA

6.6AA

3.3AA Large

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

78763B

EBEB37

939344

6A6A53

26252A

Deuteranopia

839137

EDF044

92924A

6C6E53

272929

Tritanopia

C02F2D

F86069

90595D

765455

2F2625

Achromatopsia

4C4C4C

CACACA

888888

616161

222222

Shades & Tints Shades & Tints

#CA0C4A

Dark

Light

#FAD804

Dark

Light

#90962A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ca0c4a;
  --color-2: #fad804;
  --color-3: #90962a;
  --color-4: #775951;
  --color-5: #301830;
}

SCSS

$color-1: #ca0c4a;
$color-2: #fad804;
$color-3: #90962a;
$color-4: #775951;
$color-5: #301830;

TAILWIND

colors: {
  'brand-1': '#ca0c4a',
  'brand-2': '#fad804',
  'brand-3': '#90962a',
  'brand-4': '#775951',
  'brand-5': '#301830',
}

RGB Array

[202, 12, 74], [250, 216, 4], [144, 150, 42], [119, 89, 81], [48, 24, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CA0C4A, #FAD804, #90962A, #775951, #301830 is ideal for: tech websites, dark mode UIs, game UIs. 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: #ca0c4a; --color-2: #fad804; --color-3: #90962a; --color-4: #775951; --color-5: #301830. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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