← Back to Editor

#9B6187 · #DD2330 · #E15F25 · #F5E494 · #748B71

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

#9B6187

Rose Purple · Gray · Camellia

HEX
#9B6187
RGB
rgb(155, 97, 135)
HSL
hsl(321, 23%, 49%)
HSB
hsb(321, 37%, 61%)
CMYK
cmyk(0%, 37%, 13%, 39%)
Oklch
oklch(56.8% 0.091 340.8)

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

#DD2330

Vermilion · Crimson · Passion Red

HEX
#DD2330
RGB
rgb(221, 35, 48)
HSL
hsl(356, 73%, 50%)
HSB
hsb(356, 84%, 87%)
CMYK
cmyk(0%, 84%, 78%, 13%)
Oklch
oklch(57.8% 0.217 24.7)

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

#E15F25

Tangerine · Chocolate · Warm Sun

HEX
#E15F25
RGB
rgb(225, 95, 37)
HSL
hsl(19, 76%, 51%)
HSB
hsb(19, 84%, 88%)
CMYK
cmyk(0%, 58%, 84%, 12%)
Oklch
oklch(64.2% 0.176 41.6)

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

#F5E494

Goose Yellow · Khaki · Lemon Cream

HEX
#F5E494
RGB
rgb(245, 228, 148)
HSL
hsl(49, 83%, 77%)
HSB
hsb(49, 40%, 96%)
CMYK
cmyk(0%, 7%, 40%, 4%)
Oklch
oklch(91.5% 0.102 97.7)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#748B71

Celadon · Gray · Olive Green

HEX
#748B71
RGB
rgb(116, 139, 113)
HSL
hsl(113, 10%, 49%)
HSB
hsb(113, 19%, 55%)
CMYK
cmyk(17%, 0%, 19%, 45%)
Oklch
oklch(61.1% 0.047 141.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9B6187
609A74

Analogous

91609A
9B6187
9A6069

Triadic

9B6187
869A60
60869A

Split-Comp.

9B6187
699A60
609A91

Tetradic

9B6187
9A9160
609A74
60699A

Contrast Matrix WCAG 2.1 Contrast

9B6187
DD2330
E15F25
F5E494
748B71
—
1.0
Fail
1.3
Fail
3.7
AA Large
1.3
Fail
1.0
Fail
—
1.3
Fail
3.8
AA Large
1.3
Fail
1.3
Fail
1.3
Fail
—
2.8
Fail
1.0
Fail
3.7
AA Large
3.8
AA Large
2.8
Fail
—
2.9
Fail
1.3
Fail
1.3
Fail
1.0
Fail
2.9
Fail
—
White BG
4.7AA
4.8AA
3.6AA Large
1.3Fail
3.7AA Large
Black BG
4.5AA Large
4.4AA Large
5.9AA
16.4AAA
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

82817E
8C8B2D
A9A833
EEEDA7
7E7E77

Deuteranopia

858A7C
97A52C
B0BA36
EFF0AC
7D7B79

Tritanopia

987775
D42A2A
DB3E41
F4B7BA
757C7D

Achromatopsia

777777
5C5C5C
7F7F7F
E0E0E0
818181

Shades & Tints Shades & Tints

#9B6187

Dark
Light

#DD2330

Dark
Light

#E15F25

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9b6187;
  --color-2: #dd2330;
  --color-3: #e15f25;
  --color-4: #f5e494;
  --color-5: #748b71;
}

SCSS

$color-1: #9b6187;
$color-2: #dd2330;
$color-3: #e15f25;
$color-4: #f5e494;
$color-5: #748b71;

TAILWIND

colors: {
  'brand-1': '#9b6187',
  'brand-2': '#dd2330',
  'brand-3': '#e15f25',
  'brand-4': '#f5e494',
  'brand-5': '#748b71',
}

RGB Array

[155, 97, 135], [221, 35, 48], [225, 95, 37], [245, 228, 148], [116, 139, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9B6187, #DD2330, #E15F25, #F5E494, #748B71 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: #9b6187; --color-2: #dd2330; --color-3: #e15f25; --color-4: #f5e494; --color-5: #748b71. 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