← Back to Editor

#635353 · #5F6B6B · #898C69 · #BF6969 · #E00BA8

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 Library

Color Details Color Details

#635353

Crimson · DimGray · Charcoal

HEX
#635353
RGB
rgb(99, 83, 83)
HSL
hsl(0, 9%, 36%)
HSB
hsb(0, 16%, 39%)
CMYK
cmyk(0%, 16%, 16%, 61%)
Oklch
oklch(45.8% 0.021 18.0)

Traditional「Crimson」· Paint「Charcoal」· Creative Midnight Shadow

#5F6B6B

Ink Gray · DimGray · Charcoal

HEX
#5F6B6B
RGB
rgb(95, 107, 107)
HSL
hsl(180, 6%, 40%)
HSB
hsb(180, 11%, 42%)
CMYK
cmyk(11%, 0%, 0%, 58%)
Oklch
oklch(51.8% 0.015 196.7)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#898C69

Autumn Sage · Gray · Honey Gold

HEX
#898C69
RGB
rgb(137, 140, 105)
HSL
hsl(65, 14%, 48%)
HSB
hsb(65, 25%, 55%)
CMYK
cmyk(2%, 0%, 25%, 45%)
Oklch
oklch(62.8% 0.050 111.8)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#BF6969

Crimson · LightCoral · Passion Red

HEX
#BF6969
RGB
rgb(191, 105, 105)
HSL
hsl(0, 40%, 58%)
HSB
hsb(0, 45%, 75%)
CMYK
cmyk(0%, 45%, 45%, 25%)
Oklch
oklch(61.9% 0.110 20.7)

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

#E00BA8

Rose Purple · DeepPink · Violet

HEX
#E00BA8
RGB
rgb(224, 11, 168)
HSL
hsl(316, 91%, 46%)
HSB
hsb(316, 95%, 88%)
CMYK
cmyk(0%, 95%, 25%, 12%)
Oklch
oklch(60.8% 0.257 343.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

635353
546464

Analogous

64545C
635353
645C54

Triadic

635353
546454
545464

Split-Comp.

635353
54645C
545C64

Tetradic

635353
5C6454
546464
5C5464

Contrast Matrix WCAG 2.1 Contrast

635353
5F6B6B
898C69
BF6969
E00BA8
—
1.3
Fail
2.1
Fail
1.9
Fail
1.7
Fail
1.3
Fail
—
1.6
Fail
1.4
Fail
1.3
Fail
2.1
Fail
1.6
Fail
—
1.1
Fail
1.3
Fail
1.9
Fail
1.4
Fail
1.1
Fail
—
1.1
Fail
1.7
Fail
1.3
Fail
1.3
Fail
1.1
Fail
—
White BG
7.3AAA
5.5AA
3.5AA Large
3.9AA Large
4.4AA Large
Black BG
2.9Fail
3.8AA Large
6.0AA
5.4AA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5C5C53
64646B
8A8A71
9A9969
848282

Deuteranopia

5D5E53
64636B
8A8A74
9FA569
90A079

Tritanopia

625353
606B6B
89787A
BB6969
D5645D

Achromatopsia

585858
676767
878787
838383
5D5D5D

Shades & Tints Shades & Tints

#635353

Dark
Light

#5F6B6B

Dark
Light

#898C69

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #635353;
  --color-2: #5f6b6b;
  --color-3: #898c69;
  --color-4: #bf6969;
  --color-5: #e00ba8;
}

SCSS

$color-1: #635353;
$color-2: #5f6b6b;
$color-3: #898c69;
$color-4: #bf6969;
$color-5: #e00ba8;

TAILWIND

colors: {
  'brand-1': '#635353',
  'brand-2': '#5f6b6b',
  'brand-3': '#898c69',
  'brand-4': '#bf6969',
  'brand-5': '#e00ba8',
}

RGB Array

[99, 83, 83], [95, 107, 107], [137, 140, 105], [191, 105, 105], [224, 11, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #635353, #5F6B6B, #898C69, #BF6969, #E00BA8 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: #635353; --color-2: #5f6b6b; --color-3: #898c69; --color-4: #bf6969; --color-5: #e00ba8. 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