← Back to Editor

#110918 · #202336 · #2C4448 · #2A6956 · #52A964

pastel

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustrationData Visualization

Color Details Color Details

#110918

Dark Plum · Black · Dark Purple

HEX
#110918
RGB
rgb(17, 9, 24)
HSL
hsl(272, 45%, 6%)
HSB
hsb(272, 63%, 9%)
CMYK
cmyk(29%, 63%, 0%, 91%)
Oklch
oklch(16.0% 0.033 307.7)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#202336

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#202336
RGB
rgb(32, 35, 54)
HSL
hsl(232, 26%, 17%)
HSB
hsb(232, 41%, 21%)
CMYK
cmyk(41%, 35%, 0%, 79%)
Oklch
oklch(26.2% 0.036 276.7)

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

#2C4448

Slate Blue · DarkSlateGray · Peacock Green

HEX
#2C4448
RGB
rgb(44, 68, 72)
HSL
hsl(189, 24%, 23%)
HSB
hsb(189, 39%, 28%)
CMYK
cmyk(39%, 6%, 0%, 72%)
Oklch
oklch(36.9% 0.030 209.0)

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

#2A6956

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#2A6956
RGB
rgb(42, 105, 86)
HSL
hsl(162, 43%, 29%)
HSB
hsb(162, 60%, 41%)
CMYK
cmyk(60%, 0%, 18%, 59%)
Oklch
oklch(47.4% 0.072 170.5)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#52A964

Celadon · MediumSeaGreen · Olive Green

HEX
#52A964
RGB
rgb(82, 169, 100)
HSL
hsl(132, 35%, 49%)
HSB
hsb(132, 51%, 66%)
CMYK
cmyk(51%, 0%, 41%, 34%)
Oklch
oklch(66.3% 0.132 148.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

110918
0F1608

Analogous

090816
110918
160816

Triadic

110918
161008
081610

Split-Comp.

110918
161608
081609

Tetradic

110918
160908
0F1608
081616

Contrast Matrix WCAG 2.1 Contrast

110918
202336
2C4448
2A6956
52A964
—
1.3
Fail
1.9
Fail
3.0
AA Large
6.7
AA
1.3
Fail
—
1.5
Fail
2.4
Fail
5.3
AA
1.9
Fail
1.5
Fail
—
1.6
Fail
3.6
AA Large
3.0
AA Large
2.4
Fail
1.6
Fail
—
2.2
Fail
6.7
AA
5.3
AA
3.6
AA Large
2.2
Fail
—
White BG
19.5AAA
15.5AAA
10.4AAA
6.5AA
2.9Fail
Black BG
1.1Fail
1.4Fail
2.0Fail
3.3AA Large
7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0E0D14
212131
363747
45465B
787875

Deuteranopia

0E0F13
212130
353347
423D5C
736C79

Tritanopia

111211
202E2D
2D4646
2D5E5F
568285

Achromatopsia

0D0D0D
242424
3D3D3D
545454
878787

Shades & Tints Shades & Tints

#110918

Dark
Light

#202336

Dark
Light

#2C4448

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #110918;
  --color-2: #202336;
  --color-3: #2c4448;
  --color-4: #2a6956;
  --color-5: #52a964;
}

SCSS

$color-1: #110918;
$color-2: #202336;
$color-3: #2c4448;
$color-4: #2a6956;
$color-5: #52a964;

TAILWIND

colors: {
  'brand-1': '#110918',
  'brand-2': '#202336',
  'brand-3': '#2c4448',
  'brand-4': '#2a6956',
  'brand-5': '#52a964',
}

RGB Array

[17, 9, 24], [32, 35, 54], [44, 68, 72], [42, 105, 86], [82, 169, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #110918, #202336, #2C4448, #2A6956, #52A964 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: #110918; --color-2: #202336; --color-3: #2c4448; --color-4: #2a6956; --color-5: #52a964. 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 pastel-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