← Back to Editor

#230617 · #826A9E · #B4C1D4 · #BFD9D4 · #D9D9C7

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

#230617

Rose Purple · Black · Raspberry

HEX
#230617
RGB
rgb(35, 6, 23)
HSL
hsl(325, 71%, 8%)
HSB
hsb(325, 83%, 14%)
CMYK
cmyk(0%, 83%, 34%, 86%)
Oklch
oklch(18.4% 0.056 347.3)

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

#826A9E

Deep Indigo · SlateGray · Violet

HEX
#826A9E
RGB
rgb(130, 106, 158)
HSL
hsl(268, 21%, 52%)
HSB
hsb(268, 33%, 62%)
CMYK
cmyk(18%, 33%, 0%, 38%)
Oklch
oklch(56.8% 0.083 305.1)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#B4C1D4

Azure · LightSteelBlue · Cobalt Blue

HEX
#B4C1D4
RGB
rgb(180, 193, 212)
HSL
hsl(216, 27%, 77%)
HSB
hsb(216, 15%, 83%)
CMYK
cmyk(15%, 9%, 0%, 17%)
Oklch
oklch(80.7% 0.030 257.8)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#BFD9D4

Jade · LightGray · Glacier Blue

HEX
#BFD9D4
RGB
rgb(191, 217, 212)
HSL
hsl(168, 25%, 80%)
HSB
hsb(168, 12%, 85%)
CMYK
cmyk(12%, 0%, 2%, 15%)
Oklch
oklch(86.5% 0.029 182.8)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#D9D9C7

Fresh Green · LightGray · Lemon Cream

HEX
#D9D9C7
RGB
rgb(217, 217, 199)
HSL
hsl(60, 19%, 82%)
HSB
hsb(60, 8%, 85%)
CMYK
cmyk(0%, 0%, 8%, 15%)
Oklch
oklch(88.0% 0.024 106.9)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

230617
062312

Analogous

200623
230617
230608

Triadic

230617
172306
061723

Split-Comp.

230617
082306
062320

Tetradic

230617
232006
062312
060823

Contrast Matrix WCAG 2.1 Contrast

230617
826A9E
B4C1D4
BFD9D4
D9D9C7
—
4.1
AA Large
10.4
AAA
12.7
AAA
13.2
AAA
4.1
AA Large
—
2.6
Fail
3.1
AA Large
3.3
AA Large
10.4
AAA
2.6
Fail
—
1.2
Fail
1.3
Fail
12.7
AAA
3.1
AA Large
1.2
Fail
—
1.0
Fail
13.2
AAA
3.3
AA Large
1.3
Fail
1.0
Fail
—
White BG
18.9AAA
4.7AA
1.8Fail
1.5Fail
1.4Fail
Black BG
1.1Fail
4.5AA
11.5AAA
14.1AAA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

161613
787791
BABACF
CACAD5
D9D9CB

Deuteranopia

181A12
797B8E
B9B8CE
C9C7D5
D9D9CC

Tritanopia

22100F
818785
B5CCCB
C0D6D6
D9CFD0

Achromatopsia

111111
777777
BFBFBF
D1D1D1
D7D7D7

Shades & Tints Shades & Tints

#230617

Dark
Light

#826A9E

Dark
Light

#B4C1D4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #230617;
  --color-2: #826a9e;
  --color-3: #b4c1d4;
  --color-4: #bfd9d4;
  --color-5: #d9d9c7;
}

SCSS

$color-1: #230617;
$color-2: #826a9e;
$color-3: #b4c1d4;
$color-4: #bfd9d4;
$color-5: #d9d9c7;

TAILWIND

colors: {
  'brand-1': '#230617',
  'brand-2': '#826a9e',
  'brand-3': '#b4c1d4',
  'brand-4': '#bfd9d4',
  'brand-5': '#d9d9c7',
}

RGB Array

[35, 6, 23], [130, 106, 158], [180, 193, 212], [191, 217, 212], [217, 217, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #230617, #826A9E, #B4C1D4, #BFD9D4, #D9D9C7 is ideal for: 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: #230617; --color-2: #826a9e; --color-3: #b4c1d4; --color-4: #bfd9d4; --color-5: #d9d9c7. 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. 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