← Back to Editor

#101221 · #153236 · #1F5252 · #7DA16F · #D7DB9E

A 5-color palette 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

#101221

Indigo · Black · Deep Sea Blue

HEX
#101221
RGB
rgb(16, 18, 33)
HSL
hsl(233, 35%, 10%)
HSB
hsb(233, 52%, 13%)
CMYK
cmyk(52%, 45%, 0%, 87%)
Oklch
oklch(18.8% 0.031 277.2)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#153236

Slate Blue · DarkSlateGray · Peacock Green

HEX
#153236
RGB
rgb(21, 50, 54)
HSL
hsl(187, 44%, 15%)
HSB
hsb(187, 61%, 21%)
CMYK
cmyk(61%, 7%, 0%, 79%)
Oklch
oklch(29.7% 0.035 207.2)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#1F5252

Slate Blue · DarkSlateGray · Peacock Green

HEX
#1F5252
RGB
rgb(31, 82, 82)
HSL
hsl(180, 45%, 22%)
HSB
hsb(180, 62%, 32%)
CMYK
cmyk(62%, 0%, 0%, 68%)
Oklch
oklch(40.5% 0.054 195.2)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#7DA16F

Celadon · Gray · Olive Green

HEX
#7DA16F
RGB
rgb(125, 161, 111)
HSL
hsl(103, 21%, 53%)
HSB
hsb(103, 31%, 63%)
CMYK
cmyk(22%, 0%, 31%, 37%)
Oklch
oklch(66.9% 0.082 137.1)

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

#D7DB9E

Fresh Green · Khaki · Sunflower

HEX
#D7DB9E
RGB
rgb(215, 219, 158)
HSL
hsl(64, 46%, 74%)
HSB
hsb(64, 28%, 86%)
CMYK
cmyk(2%, 0%, 28%, 14%)
Oklch
oklch(87.4% 0.080 111.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

101221
222011

Analogous

111C22
101221
171122

Triadic

101221
221113
132211

Split-Comp.

101221
221711
1C2211

Tetradic

101221
22111C
222011
112217

Contrast Matrix WCAG 2.1 Contrast

101221
153236
1F5252
7DA16F
D7DB9E
—
1.4
Fail
2.1
Fail
6.4
AA
12.8
AAA
1.4
Fail
—
1.5
Fail
4.7
AA
9.4
AAA
2.1
Fail
1.5
Fail
—
3.0
AA Large
6.1
AA
6.4
AA
4.7
AA
3.0
AA Large
—
2.0
Fail
12.8
AAA
9.4
AAA
6.1
AA
2.0
Fail
—
White BG
18.6AAA
13.6AAA
8.8AAA
2.9Fail
1.4Fail
Black BG
1.1Fail
1.5Fail
2.4Fail
7.2AAA
14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

11111D
222235
353652
8D8D7B
D9D9AD

Deuteranopia

11111C
201E35
322E52
8B887E
D9D8B0

Tritanopia

101B1A
163434
225252
7F8587
D7B8BB

Achromatopsia

131313
2A2A2A
434343
919191
D3D3D3

Shades & Tints Shades & Tints

#101221

Dark
Light

#153236

Dark
Light

#1F5252

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #101221;
  --color-2: #153236;
  --color-3: #1f5252;
  --color-4: #7da16f;
  --color-5: #d7db9e;
}

SCSS

$color-1: #101221;
$color-2: #153236;
$color-3: #1f5252;
$color-4: #7da16f;
$color-5: #d7db9e;

TAILWIND

colors: {
  'brand-1': '#101221',
  'brand-2': '#153236',
  'brand-3': '#1f5252',
  'brand-4': '#7da16f',
  'brand-5': '#d7db9e',
}

RGB Array

[16, 18, 33], [21, 50, 54], [31, 82, 82], [125, 161, 111], [215, 219, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #101221, #153236, #1F5252, #7DA16F, #D7DB9E is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #101221; --color-2: #153236; --color-3: #1f5252; --color-4: #7da16f; --color-5: #d7db9e. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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. 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