← Back to Editor

#261C25 · #6B4668 · #B86EB1 · #CCB787 · #D6D5D2

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 LibraryData Visualization

Color Details Color Details

#261C25

Rose Purple · Black · Dark Purple

HEX
#261C25
RGB
rgb(38, 28, 37)
HSL
hsl(306, 15%, 13%)
HSB
hsb(306, 26%, 15%)
CMYK
cmyk(0%, 26%, 3%, 85%)
Oklch
oklch(24.2% 0.022 329.6)

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

#6B4668

Rose Purple · DimGray · Eggplant

HEX
#6B4668
RGB
rgb(107, 70, 104)
HSL
hsl(305, 21%, 35%)
HSB
hsb(305, 35%, 42%)
CMYK
cmyk(0%, 35%, 3%, 58%)
Oklch
oklch(44.8% 0.071 329.5)

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

#B86EB1

Rose Purple · MediumOrchid · Violet

HEX
#B86EB1
RGB
rgb(184, 110, 177)
HSL
hsl(306, 34%, 58%)
HSB
hsb(306, 40%, 72%)
CMYK
cmyk(0%, 40%, 4%, 28%)
Oklch
oklch(64.2% 0.128 330.4)

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

#CCB787

Ginger · Tan · Sunflower

HEX
#CCB787
RGB
rgb(204, 183, 135)
HSL
hsl(42, 40%, 66%)
HSB
hsb(42, 34%, 80%)
CMYK
cmyk(0%, 10%, 34%, 20%)
Oklch
oklch(78.6% 0.068 87.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#D6D5D2

Silver Gray · LightGray · Pearl Gray

HEX
#D6D5D2
RGB
rgb(214, 213, 210)
HSL
hsl(45, 5%, 83%)
HSB
hsb(45, 2%, 84%)
CMYK
cmyk(0%, 0%, 2%, 16%)
Oklch
oklch(87.3% 0.004 91.5)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

261C25
1C261D

Analogous

221C26
261C25
261C20

Triadic

261C25
25261C
1C2526

Split-Comp.

261C25
20261C
1C2622

Tetradic

261C25
26221C
1C261D
1C2026

Contrast Matrix WCAG 2.1 Contrast

261C25
6B4668
B86EB1
CCB787
D6D5D2
—
2.1
Fail
4.6
AA
8.4
AAA
11.2
AAA
2.1
Fail
—
2.2
Fail
4.0
AA Large
5.3
AA
4.6
AA
2.2
Fail
—
1.8
Fail
2.4
Fail
8.4
AAA
4.0
AA Large
1.8
Fail
—
1.3
Fail
11.2
AAA
5.3
AA
2.4
Fail
1.3
Fail
—
White BG
16.5AAA
7.8AAA
3.6AA Large
2.0Fail
1.5Fail
Black BG
1.3Fail
2.7Fail
5.9AA
10.7AAA
14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

222223
5B5B60
9897A1
C3C393
D6D6D3

Deuteranopia

222322
5D605E
9CA29D
C4C695
D6D6D3

Tritanopia

262121
695958
B49491
CB9C9E
D6D3D3

Achromatopsia

202020
555555
8C8C8C
B8B8B8
D5D5D5

Shades & Tints Shades & Tints

#261C25

Dark
Light

#6B4668

Dark
Light

#B86EB1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #261c25;
  --color-2: #6b4668;
  --color-3: #b86eb1;
  --color-4: #ccb787;
  --color-5: #d6d5d2;
}

SCSS

$color-1: #261c25;
$color-2: #6b4668;
$color-3: #b86eb1;
$color-4: #ccb787;
$color-5: #d6d5d2;

TAILWIND

colors: {
  'brand-1': '#261c25',
  'brand-2': '#6b4668',
  'brand-3': '#b86eb1',
  'brand-4': '#ccb787',
  'brand-5': '#d6d5d2',
}

RGB Array

[38, 28, 37], [107, 70, 104], [184, 110, 177], [204, 183, 135], [214, 213, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #261C25, #6B4668, #B86EB1, #CCB787, #D6D5D2 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #261c25; --color-2: #6b4668; --color-3: #b86eb1; --color-4: #ccb787; --color-5: #d6d5d2. 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. 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. Restrained colors convey professionalism and trust. 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