← Back to Editor

#93DDE2 · #4C4242 · #727368 · #CDD7B6 · #EFF0E3

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

#93DDE2

Sky Blue · SkyBlue · Lake Green

HEX
#93DDE2
RGB
rgb(147, 221, 226)
HSL
hsl(184, 58%, 73%)
HSB
hsb(184, 35%, 89%)
CMYK
cmyk(35%, 2%, 0%, 11%)
Oklch
oklch(85.1% 0.074 201.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#4C4242

Dark Cyan · DarkSlateGray · Charcoal

HEX
#4C4242
RGB
rgb(76, 66, 66)
HSL
hsl(0, 7%, 28%)
HSB
hsb(0, 13%, 30%)
CMYK
cmyk(0%, 13%, 13%, 70%)
Oklch
oklch(38.9% 0.014 17.8)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#727368

Ink Gray · DimGray · Warm Gray

HEX
#727368
RGB
rgb(114, 115, 104)
HSL
hsl(65, 5%, 43%)
HSB
hsb(65, 10%, 45%)
CMYK
cmyk(1%, 0%, 10%, 55%)
Oklch
oklch(55.1% 0.017 111.2)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#CDD7B6

Willow Green · Silver · Apple Green

HEX
#CDD7B6
RGB
rgb(205, 215, 182)
HSL
hsl(78, 29%, 78%)
HSB
hsb(78, 15%, 84%)
CMYK
cmyk(5%, 0%, 15%, 16%)
Oklch
oklch(86.3% 0.046 121.1)

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

#EFF0E3

Fresh Green · Beige · Lemon Cream

HEX
#EFF0E3
RGB
rgb(239, 240, 227)
HSL
hsl(65, 30%, 92%)
HSB
hsb(65, 5%, 94%)
CMYK
cmyk(0%, 0%, 5%, 6%)
Oklch
oklch(95.1% 0.017 110.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

93DDE2
E29892

Analogous

92E2BF
93DDE2
92B5E2

Triadic

93DDE2
E292DD
DDE292

Split-Comp.

93DDE2
E292B5
E2BF92

Tetradic

93DDE2
BF92E2
E29892
B5E292

Contrast Matrix WCAG 2.1 Contrast

93DDE2
4C4242
727368
CDD7B6
EFF0E3
—
6.3
AA
3.1
AA Large
1.0
Fail
1.3
Fail
6.3
AA
—
2.0
Fail
6.5
AA
8.4
AAA
3.1
AA Large
2.0
Fail
—
3.2
AA Large
4.2
AA Large
1.0
Fail
6.5
AA
3.2
AA Large
—
1.3
Fail
1.3
Fail
8.4
AAA
4.2
AA Large
1.3
Fail
—
White BG
1.5Fail
9.7AAA
4.8AA
1.5Fail
1.2Fail
Black BG
13.7AAA
2.2Fail
4.4AA Large
14.0AAA
18.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B4E1
484842
72726B
D1D1BE
EFEFE6

Deuteranopia

AFA9E1
484942
72726B
D1D0C0
EFEFE7

Tritanopia

97E0E0
4C4242
726D6D
CEC4C6
EFE9E9

Achromatopsia

C7C7C7
454545
717171
D0D0D0
EEEEEE

Shades & Tints Shades & Tints

#93DDE2

Dark
Light

#4C4242

Dark
Light

#727368

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #93dde2;
  --color-2: #4c4242;
  --color-3: #727368;
  --color-4: #cdd7b6;
  --color-5: #eff0e3;
}

SCSS

$color-1: #93dde2;
$color-2: #4c4242;
$color-3: #727368;
$color-4: #cdd7b6;
$color-5: #eff0e3;

TAILWIND

colors: {
  'brand-1': '#93dde2',
  'brand-2': '#4c4242',
  'brand-3': '#727368',
  'brand-4': '#cdd7b6',
  'brand-5': '#eff0e3',
}

RGB Array

[147, 221, 226], [76, 66, 66], [114, 115, 104], [205, 215, 182], [239, 240, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #93DDE2, #4C4242, #727368, #CDD7B6, #EFF0E3 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: #93dde2; --color-2: #4c4242; --color-3: #727368; --color-4: #cdd7b6; --color-5: #eff0e3. 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