← Back to Editor

#733F50 · #D44E69 · #E66B53 · #EBB263 · #557F69

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

#733F50

Dark Violet · DimGray · Camellia

HEX
#733F50
RGB
rgb(115, 63, 80)
HSL
hsl(340, 29%, 35%)
HSB
hsb(340, 45%, 45%)
CMYK
cmyk(0%, 45%, 30%, 55%)
Oklch
oklch(43.7% 0.075 359.7)

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

#D44E69

Vermilion · Tomato · Passion Red

HEX
#D44E69
RGB
rgb(212, 78, 105)
HSL
hsl(348, 61%, 57%)
HSB
hsb(348, 63%, 83%)
CMYK
cmyk(0%, 63%, 50%, 17%)
Oklch
oklch(61.1% 0.169 11.5)

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

#E66B53

Peach Pink · Tomato · Coral Red

HEX
#E66B53
RGB
rgb(230, 107, 83)
HSL
hsl(10, 75%, 61%)
HSB
hsb(10, 64%, 90%)
CMYK
cmyk(0%, 53%, 64%, 10%)
Oklch
oklch(67.1% 0.158 32.6)

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

#EBB263

Ginger · SandyBrown · Warm Sun

HEX
#EBB263
RGB
rgb(235, 178, 99)
HSL
hsl(35, 77%, 65%)
HSB
hsb(35, 58%, 92%)
CMYK
cmyk(0%, 24%, 58%, 8%)
Oklch
oklch(80.0% 0.117 73.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#557F69

Celadon · DimGray · Olive Green

HEX
#557F69
RGB
rgb(85, 127, 105)
HSL
hsl(149, 20%, 42%)
HSB
hsb(149, 33%, 50%)
CMYK
cmyk(33%, 0%, 17%, 50%)
Oklch
oklch(55.9% 0.058 160.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

733F50
3F7362

Analogous

733F6B
733F50
73483F

Triadic

733F50
51733F
3F5173

Split-Comp.

733F50
3F7348
3F6B73

Tetradic

733F50
6B733F
3F7362
483F73

Contrast Matrix WCAG 2.1 Contrast

733F50
D44E69
E66B53
EBB263
557F69
—
2.0
Fail
2.6
Fail
4.3
AA Large
1.8
Fail
2.0
Fail
—
1.3
Fail
2.2
Fail
1.1
Fail
2.6
Fail
1.3
Fail
—
1.7
Fail
1.4
Fail
4.3
AA Large
2.2
Fail
1.7
Fail
—
2.4
Fail
1.8
Fail
1.1
Fail
1.4
Fail
2.4
Fail
—
White BG
8.2AAA
4.1AA Large
3.2AA Large
1.9Fail
4.5AA
Black BG
2.6Fail
5.1AA
6.6AA
11.1AAA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5C5C4C
9A9962
B1B059
D2D276
67686E

Deuteranopia

60634B
A2AC61
B8C15A
D6DA7B
656270

Tritanopia

704948
CD5D5C
E05D5E
E88589
577373

Achromatopsia

505050
797979
8D8D8D
BABABA
707070

Shades & Tints Shades & Tints

#733F50

Dark
Light

#D44E69

Dark
Light

#E66B53

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #733f50;
  --color-2: #d44e69;
  --color-3: #e66b53;
  --color-4: #ebb263;
  --color-5: #557f69;
}

SCSS

$color-1: #733f50;
$color-2: #d44e69;
$color-3: #e66b53;
$color-4: #ebb263;
$color-5: #557f69;

TAILWIND

colors: {
  'brand-1': '#733f50',
  'brand-2': '#d44e69',
  'brand-3': '#e66b53',
  'brand-4': '#ebb263',
  'brand-5': '#557f69',
}

RGB Array

[115, 63, 80], [212, 78, 105], [230, 107, 83], [235, 178, 99], [85, 127, 105]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #733F50, #D44E69, #E66B53, #EBB263, #557F69 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: #733f50; --color-2: #d44e69; --color-3: #e66b53; --color-4: #ebb263; --color-5: #557f69. 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