← Back to Editor

#232526 · #949599 · #BABABA · #E6E6E6 · #F2F7FF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#232526

Ink Black · DarkSlateGray · Dark Stone

HEX
#232526
RGB
rgb(35, 37, 38)
HSL
hsl(200, 4%, 14%)
HSB
hsb(200, 8%, 15%)
CMYK
cmyk(8%, 3%, 0%, 85%)
Oklch
oklch(26.3% 0.003 228.9)

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

#949599

Ash · LightSlateGray · Silver Sand

HEX
#949599
RGB
rgb(148, 149, 153)
HSL
hsl(228, 2%, 59%)
HSB
hsb(228, 3%, 60%)
CMYK
cmyk(3%, 3%, 0%, 40%)
Oklch
oklch(67.0% 0.006 274.9)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#BABABA

Silver Gray · Silver · Pearl Gray

HEX
#BABABA
RGB
rgb(186, 186, 186)
HSL
hsl(0, 0%, 73%)
HSB
hsb(0, 0%, 73%)
CMYK
cmyk(0%, 0%, 0%, 27%)
Oklch
oklch(78.9% 0.000 89.9)

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

#E6E6E6

Plain White · Lavender · Cloud White

HEX
#E6E6E6
RGB
rgb(230, 230, 230)
HSL
hsl(0, 0%, 90%)
HSB
hsb(0, 0%, 90%)
CMYK
cmyk(0%, 0%, 0%, 10%)
Oklch
oklch(92.5% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#F2F7FF

Azure · Snow · Sky Blue

HEX
#F2F7FF
RGB
rgb(242, 247, 255)
HSL
hsl(217, 100%, 97%)
HSB
hsb(217, 5%, 100%)
CMYK
cmyk(5%, 3%, 0%, 0%)
Oklch
oklch(97.5% 0.012 259.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

232526
252322

Analogous

222525
232526
222325

Triadic

232526
252224
242522

Split-Comp.

232526
252223
252522

Tetradic

232526
252225
252322
232522

Contrast Matrix WCAG 2.1 Contrast

232526
949599
BABABA
E6E6E6
F2F7FF
—
5.1
AA
7.9
AAA
12.3
AAA
14.3
AAA
5.1
AA
—
1.5
Fail
2.4
Fail
2.8
Fail
7.9
AAA
1.5
Fail
—
1.6
Fail
1.8
Fail
12.3
AAA
2.4
Fail
1.6
Fail
—
1.2
Fail
14.3
AAA
2.8
Fail
1.8
Fail
1.2
Fail
—
White BG
15.4AAA
3.0Fail
1.9Fail
1.2Fail
1.1Fail
Black BG
1.4Fail
7.0AAA
10.8AAA
16.8AAA
19.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

242426
949498
BABABA
E6E6E6
F4F4FD

Deuteranopia

242426
949498
BABABA
E6E6E6
F4F3FD

Tritanopia

232626
949797
BABABA
E6E6E6
F2FCFB

Achromatopsia

252525
959595
BABABA
E6E6E6
F6F6F6

Shades & Tints Shades & Tints

#232526

Dark
Light

#949599

Dark
Light

#BABABA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #232526;
  --color-2: #949599;
  --color-3: #bababa;
  --color-4: #e6e6e6;
  --color-5: #f2f7ff;
}

SCSS

$color-1: #232526;
$color-2: #949599;
$color-3: #bababa;
$color-4: #e6e6e6;
$color-5: #f2f7ff;

TAILWIND

colors: {
  'brand-1': '#232526',
  'brand-2': '#949599',
  'brand-3': '#bababa',
  'brand-4': '#e6e6e6',
  'brand-5': '#f2f7ff',
}

RGB Array

[35, 37, 38], [148, 149, 153], [186, 186, 186], [230, 230, 230], [242, 247, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #232526, #949599, #BABABA, #E6E6E6, #F2F7FF is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, 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: #232526; --color-2: #949599; --color-3: #bababa; --color-4: #e6e6e6; --color-5: #f2f7ff. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 beauty, lifestyle, arts 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