← Back to Editor

#252821 · #38433B · #698461 · #74B8A3 · #92BEA5

dark

A 5-color dark palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#252821

Grass Green · DarkSlateGray · Dark Green

HEX
#252821
RGB
rgb(37, 40, 33)
HSL
hsl(86, 10%, 14%)
HSB
hsb(86, 17%, 16%)
CMYK
cmyk(7%, 0%, 18%, 84%)
Oklch
oklch(27.1% 0.013 126.2)

Traditional「Grass Green」· Paint「Dark Green」· Creative Blush Sunrise

#38433B

Celadon · DarkSlateGray · Dark Stone

HEX
#38433B
RGB
rgb(56, 67, 59)
HSL
hsl(136, 9%, 24%)
HSB
hsb(136, 16%, 26%)
CMYK
cmyk(16%, 0%, 12%, 74%)
Oklch
oklch(37.0% 0.020 153.8)

Traditional「Celadon」· Paint「Dark Stone」· Creative Midnight Shadow

#698461

Celadon · DimGray · Olive Green

HEX
#698461
RGB
rgb(105, 132, 97)
HSL
hsl(106, 15%, 45%)
HSB
hsb(106, 27%, 52%)
CMYK
cmyk(20%, 0%, 27%, 48%)
Oklch
oklch(58.2% 0.061 138.6)

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

#74B8A3

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#74B8A3
RGB
rgb(116, 184, 163)
HSL
hsl(161, 32%, 59%)
HSB
hsb(161, 37%, 72%)
CMYK
cmyk(37%, 0%, 11%, 28%)
Oklch
oklch(73.1% 0.076 172.5)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#92BEA5

Celadon · DarkSeaGreen · Apple Green

HEX
#92BEA5
RGB
rgb(146, 190, 165)
HSL
hsl(146, 25%, 66%)
HSB
hsb(146, 23%, 75%)
CMYK
cmyk(23%, 0%, 13%, 25%)
Oklch
oklch(76.3% 0.059 159.7)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

252821
232027

Analogous

272720
252821
212720

Triadic

252821
202427
272024

Split-Comp.

252821
202127
272027

Tetradic

252821
202727
232027
272021

Contrast Matrix WCAG 2.1 Contrast

252821
38433B
698461
74B8A3
92BEA5
—
1.4
Fail
3.6
AA Large
6.5
AA
7.2
AAA
1.4
Fail
—
2.5
Fail
4.5
AA Large
5.0
AA
3.6
AA Large
2.5
Fail
—
1.8
Fail
2.0
Fail
6.5
AA
4.5
AA Large
1.8
Fail
—
1.1
Fail
7.2
AAA
5.0
AA
2.0
Fail
1.1
Fail
—
White BG
15.0AAA
10.3AAA
4.1AA Large
2.3Fail
2.1Fail
Black BG
1.4Fail
2.0Fail
5.1AA
9.1AAA
10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

262623
3D3D3D
757569
9192A8
A5A5AB

Deuteranopia

262623
3C3B3D
73716C
8E88A9
A39FAD

Tritanopia

252424
393E3F
6A7072
77ACAD
94B0B1

Achromatopsia

262626
3F3F3F
787878
A1A1A1
AEAEAE

Shades & Tints Shades & Tints

#252821

Dark
Light

#38433B

Dark
Light

#698461

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #252821;
  --color-2: #38433b;
  --color-3: #698461;
  --color-4: #74b8a3;
  --color-5: #92bea5;
}

SCSS

$color-1: #252821;
$color-2: #38433b;
$color-3: #698461;
$color-4: #74b8a3;
$color-5: #92bea5;

TAILWIND

colors: {
  'brand-1': '#252821',
  'brand-2': '#38433b',
  'brand-3': '#698461',
  'brand-4': '#74b8a3',
  'brand-5': '#92bea5',
}

RGB Array

[37, 40, 33], [56, 67, 59], [105, 132, 97], [116, 184, 163], [146, 190, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #252821, #38433B, #698461, #74B8A3, #92BEA5 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: #252821; --color-2: #38433b; --color-3: #698461; --color-4: #74b8a3; --color-5: #92bea5. 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 dark-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