← Back to Editor

#C77D7C · #952D5E · #303C70 · #1D1B33 · #E37A04

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#C77D7C

Peach Pink · LightCoral · Coral Red

HEX
#C77D7C
RGB
rgb(199, 125, 124)
HSL
hsl(1, 40%, 63%)
HSB
hsb(1, 38%, 78%)
CMYK
cmyk(0%, 37%, 38%, 22%)
Oklch
oklch(66.7% 0.093 20.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#952D5E

Dark Violet · Brown · Camellia

HEX
#952D5E
RGB
rgb(149, 45, 94)
HSL
hsl(332, 54%, 38%)
HSB
hsb(332, 70%, 58%)
CMYK
cmyk(0%, 70%, 37%, 42%)
Oklch
oklch(46.9% 0.146 355.3)

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

#303C70

Indigo · DarkSlateBlue · Prussian Blue

HEX
#303C70
RGB
rgb(48, 60, 112)
HSL
hsl(229, 40%, 31%)
HSB
hsb(229, 57%, 44%)
CMYK
cmyk(57%, 46%, 0%, 56%)
Oklch
oklch(37.3% 0.090 271.6)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#1D1B33

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#1D1B33
RGB
rgb(29, 27, 51)
HSL
hsl(245, 31%, 15%)
HSB
hsb(245, 47%, 20%)
CMYK
cmyk(43%, 47%, 0%, 80%)
Oklch
oklch(23.7% 0.045 286.2)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#E37A04

Ochre · Chocolate · Amber Brown

HEX
#E37A04
RGB
rgb(227, 122, 4)
HSL
hsl(32, 97%, 45%)
HSB
hsb(32, 98%, 89%)
CMYK
cmyk(0%, 46%, 98%, 11%)
Oklch
oklch(68.4% 0.165 57.0)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C77D7C
7BC5C6

Analogous

C67B9F
C77D7C
C6A27B

Triadic

C77D7C
7BC67C
7C7BC6

Split-Comp.

C77D7C
7BC6A2
7B9FC6

Tetradic

C77D7C
9FC67B
7BC5C6
A27BC6

Contrast Matrix WCAG 2.1 Contrast

C77D7C
952D5E
303C70
1D1B33
E37A04
—
2.4
Fail
3.3
AA Large
5.3
AA
1.1
Fail
2.4
Fail
—
1.4
Fail
2.2
Fail
2.5
Fail
3.3
AA Large
1.4
Fail
—
1.6
Fail
3.5
AA Large
5.3
AA
2.2
Fail
1.6
Fail
—
5.6
AA
1.1
Fail
2.5
Fail
3.5
AA Large
5.6
AA
—
White BG
3.2AA Large
7.5AAA
10.5AAA
16.7AAA
3.0Fail
Black BG
6.7AA
2.8Fail
2.0Fail
1.3Fail
7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A67C
686752
353563
1C1C2D
B6B521

Deuteranopia

ABB17C
6E764F
353460
1C1C2C
BCC327

Tritanopia

C37C7C
904947
315957
1D2928
DE373C

Achromatopsia

939393
525252
3E3E3E
1E1E1E
8C8C8C

Shades & Tints Shades & Tints

#C77D7C

Dark
Light

#952D5E

Dark
Light

#303C70

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c77d7c;
  --color-2: #952d5e;
  --color-3: #303c70;
  --color-4: #1d1b33;
  --color-5: #e37a04;
}

SCSS

$color-1: #c77d7c;
$color-2: #952d5e;
$color-3: #303c70;
$color-4: #1d1b33;
$color-5: #e37a04;

TAILWIND

colors: {
  'brand-1': '#c77d7c',
  'brand-2': '#952d5e',
  'brand-3': '#303c70',
  'brand-4': '#1d1b33',
  'brand-5': '#e37a04',
}

RGB Array

[199, 125, 124], [149, 45, 94], [48, 60, 112], [29, 27, 51], [227, 122, 4]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C77D7C, #952D5E, #303C70, #1D1B33, #E37A04 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #c77d7c; --color-2: #952d5e; --color-3: #303c70; --color-4: #1d1b33; --color-5: #e37a04. 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. 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 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