← Back to Editor

#303238 · #805060 · #A5A7AC · #CADED2 · #F3F0E1

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

#303238

Indigo · DarkSlateGray · Dark Stone

HEX
#303238
RGB
rgb(48, 50, 56)
HSL
hsl(225, 8%, 20%)
HSB
hsb(225, 14%, 22%)
CMYK
cmyk(14%, 11%, 0%, 78%)
Oklch
oklch(31.8% 0.011 271.1)

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

#805060

Dark Violet · DimGray · Camellia

HEX
#805060
RGB
rgb(128, 80, 96)
HSL
hsl(340, 23%, 41%)
HSB
hsb(340, 38%, 50%)
CMYK
cmyk(0%, 38%, 25%, 50%)
Oklch
oklch(49.0% 0.068 358.4)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#A5A7AC

Ash · DarkGray · Silver Sand

HEX
#A5A7AC
RGB
rgb(165, 167, 172)
HSL
hsl(223, 4%, 66%)
HSB
hsb(223, 4%, 67%)
CMYK
cmyk(4%, 3%, 0%, 33%)
Oklch
oklch(72.8% 0.008 268.5)

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

#CADED2

Celadon · LightGray · Mint Green

HEX
#CADED2
RGB
rgb(202, 222, 210)
HSL
hsl(144, 23%, 83%)
HSB
hsb(144, 9%, 87%)
CMYK
cmyk(9%, 0%, 5%, 13%)
Oklch
oklch(88.2% 0.027 159.5)

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

#F3F0E1

Fresh Green · Beige · Lemon Cream

HEX
#F3F0E1
RGB
rgb(243, 240, 225)
HSL
hsl(50, 43%, 92%)
HSB
hsb(50, 7%, 95%)
CMYK
cmyk(0%, 1%, 7%, 5%)
Oklch
oklch(95.3% 0.020 97.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

303238
37352F

Analogous

2F3537
303238
312F37

Triadic

303238
372F31
31372F

Split-Comp.

303238
37312F
35372F

Tetradic

303238
372F35
37352F
2F3731

Contrast Matrix WCAG 2.1 Contrast

303238
805060
A5A7AC
CADED2
F3F0E1
—
2.0
Fail
5.3
AA
9.1
AAA
11.2
AAA
2.0
Fail
—
2.7
Fail
4.6
AA
5.7
AA
5.3
AA
2.7
Fail
—
1.7
Fail
2.1
Fail
9.1
AAA
4.6
AA
1.7
Fail
—
1.2
Fail
11.2
AAA
5.7
AA
2.1
Fail
1.2
Fail
—
White BG
12.8AAA
6.5AA
2.4Fail
1.4Fail
1.1Fail
Black BG
1.6Fail
3.2AA Large
8.7AAA
14.9AAA
18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

313137
6B6B5C
A6A6AB
D3D3D5
F2F2E5

Deuteranopia

313136
6E725B
A6A6AB
D2D0D6
F2F2E6

Tritanopia

303535
7E5958
A5AAAA
CBD7D8
F3E7E8

Achromatopsia

323232
606060
A7A7A7
D7D7D7
EFEFEF

Shades & Tints Shades & Tints

#303238

Dark
Light

#805060

Dark
Light

#A5A7AC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #303238;
  --color-2: #805060;
  --color-3: #a5a7ac;
  --color-4: #caded2;
  --color-5: #f3f0e1;
}

SCSS

$color-1: #303238;
$color-2: #805060;
$color-3: #a5a7ac;
$color-4: #caded2;
$color-5: #f3f0e1;

TAILWIND

colors: {
  'brand-1': '#303238',
  'brand-2': '#805060',
  'brand-3': '#a5a7ac',
  'brand-4': '#caded2',
  'brand-5': '#f3f0e1',
}

RGB Array

[48, 50, 56], [128, 80, 96], [165, 167, 172], [202, 222, 210], [243, 240, 225]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #303238, #805060, #A5A7AC, #CADED2, #F3F0E1 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: #303238; --color-2: #805060; --color-3: #a5a7ac; --color-4: #caded2; --color-5: #f3f0e1. 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