← Back to Editor

#242827 · #78A07B · #BC6367 · #898270 · #517954

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

#242827

Ink Black · DarkSlateGray · Dark Stone

HEX
#242827
RGB
rgb(36, 40, 39)
HSL
hsl(165, 5%, 15%)
HSB
hsb(165, 10%, 16%)
CMYK
cmyk(10%, 0%, 2%, 84%)
Oklch
oklch(27.2% 0.006 179.2)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

#78A07B

Celadon · Gray · Olive Green

HEX
#78A07B
RGB
rgb(120, 160, 123)
HSL
hsl(125, 17%, 55%)
HSB
hsb(125, 25%, 63%)
CMYK
cmyk(25%, 0%, 23%, 37%)
Oklch
oklch(66.6% 0.070 146.7)

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

#BC6367

Crimson · LightCoral · Passion Red

HEX
#BC6367
RGB
rgb(188, 99, 103)
HSL
hsl(357, 40%, 56%)
HSB
hsb(357, 47%, 74%)
CMYK
cmyk(0%, 47%, 45%, 26%)
Oklch
oklch(60.4% 0.114 18.2)

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

#898270

Ochre · Gray · Honey Gold

HEX
#898270
RGB
rgb(137, 130, 112)
HSL
hsl(43, 10%, 49%)
HSB
hsb(43, 18%, 54%)
CMYK
cmyk(0%, 5%, 18%, 46%)
Oklch
oklch(60.8% 0.028 89.3)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#517954

Celadon · DimGray · Forest Green

HEX
#517954
RGB
rgb(81, 121, 84)
HSL
hsl(125, 20%, 40%)
HSB
hsb(125, 33%, 47%)
CMYK
cmyk(33%, 0%, 31%, 53%)
Oklch
oklch(53.6% 0.073 146.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

242827
282425

Analogous

242825
242827
242728

Triadic

242827
272428
282724

Split-Comp.

242827
282427
282524

Tetradic

242827
252428
282425
272824

Contrast Matrix WCAG 2.1 Contrast

242827
78A07B
BC6367
898270
517954
—
5.1
AA
3.6
AA Large
3.9
AA Large
3.0
Fail
5.1
AA
—
1.4
Fail
1.3
Fail
1.7
Fail
3.6
AA Large
1.4
Fail
—
1.1
Fail
1.2
Fail
3.9
AA Large
1.3
Fail
1.1
Fail
—
1.3
Fail
3.0
Fail
1.7
Fail
1.2
Fail
1.3
Fail
—
White BG
14.9AAA
3.0Fail
4.1AA Large
3.8AA Large
5.0AA
Black BG
1.4Fail
7.1AAA
5.1AA
5.5AA
4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

262627
898A84
959566
868674
62635D

Deuteranopia

262527
878486
9BA166
868775
605D5F

Tritanopia

242727
7A8B8D
B86565
897879
536466

Achromatopsia

272727
909090
7E7E7E
828282
696969

Shades & Tints Shades & Tints

#242827

Dark
Light

#78A07B

Dark
Light

#BC6367

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #242827;
  --color-2: #78a07b;
  --color-3: #bc6367;
  --color-4: #898270;
  --color-5: #517954;
}

SCSS

$color-1: #242827;
$color-2: #78a07b;
$color-3: #bc6367;
$color-4: #898270;
$color-5: #517954;

TAILWIND

colors: {
  'brand-1': '#242827',
  'brand-2': '#78a07b',
  'brand-3': '#bc6367',
  'brand-4': '#898270',
  'brand-5': '#517954',
}

RGB Array

[36, 40, 39], [120, 160, 123], [188, 99, 103], [137, 130, 112], [81, 121, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #242827, #78A07B, #BC6367, #898270, #517954 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: #242827; --color-2: #78a07b; --color-3: #bc6367; --color-4: #898270; --color-5: #517954. 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