← Back to Editor

#363C3C · #ABCFCB · #FCFEFE · #C3E6E6 · #D8EFEF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#363C3C

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#363C3C
RGB
rgb(54, 60, 60)
HSL
hsl(180, 5%, 22%)
HSB
hsb(180, 10%, 24%)
CMYK
cmyk(10%, 0%, 0%, 76%)
Oklch
oklch(35.1% 0.008 196.8)

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

#ABCFCB

Jade · LightSteelBlue · Lake Green

HEX
#ABCFCB
RGB
rgb(171, 207, 203)
HSL
hsl(173, 27%, 74%)
HSB
hsb(173, 17%, 81%)
CMYK
cmyk(17%, 0%, 2%, 19%)
Oklch
oklch(82.7% 0.039 188.2)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#FCFEFE

Sky Blue · White · Glacier Blue

HEX
#FCFEFE
RGB
rgb(252, 254, 254)
HSL
hsl(180, 50%, 99%)
HSB
hsb(180, 1%, 100%)
CMYK
cmyk(1%, 0%, 0%, 0%)
Oklch
oklch(99.6% 0.002 197.1)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#C3E6E6

Sky Blue · LightBlue · Glacier Blue

HEX
#C3E6E6
RGB
rgb(195, 230, 230)
HSL
hsl(180, 41%, 83%)
HSB
hsb(180, 15%, 90%)
CMYK
cmyk(15%, 0%, 0%, 10%)
Oklch
oklch(90.0% 0.037 196.5)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#D8EFEF

Sky Blue · Lavender · Glacier Blue

HEX
#D8EFEF
RGB
rgb(216, 239, 239)
HSL
hsl(180, 42%, 89%)
HSB
hsb(180, 10%, 94%)
CMYK
cmyk(10%, 0%, 0%, 6%)
Oklch
oklch(93.5% 0.024 196.7)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

363C3C
3B3535

Analogous

353B38
363C3C
35383B

Triadic

363C3C
3B353B
3B3B35

Split-Comp.

363C3C
3B3538
3B3835

Tetradic

363C3C
38353B
3B3535
383B35

Contrast Matrix WCAG 2.1 Contrast

363C3C
ABCFCB
FCFEFE
C3E6E6
D8EFEF
—
6.7
AA
11.1
AAA
8.4
AAA
9.4
AAA
6.7
AA
—
1.7
Fail
1.3
Fail
1.4
Fail
11.1
AAA
1.7
Fail
—
1.3
Fail
1.2
Fail
8.4
AAA
1.3
Fail
1.3
Fail
—
1.1
Fail
9.4
AAA
1.4
Fail
1.2
Fail
1.1
Fail
—
White BG
11.2AAA
1.7Fail
1.0Fail
1.3Fail
1.2Fail
Black BG
1.9Fail
12.5AAA
20.7AAA
15.8AAA
17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

39393C
BBBBCC
FDFDFE
D2D2E6
E2E2EF

Deuteranopia

38383C
B9B6CC
FDFDFE
D0CEE6
E1DFEF

Tritanopia

363C3C
ADCDCD
FCFEFE
C5E6E6
D9EFEF

Achromatopsia

3A3A3A
C4C4C4
FDFDFD
DCDCDC
E8E8E8

Shades & Tints Shades & Tints

#363C3C

Dark
Light

#ABCFCB

Dark
Light

#FCFEFE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #363c3c;
  --color-2: #abcfcb;
  --color-3: #fcfefe;
  --color-4: #c3e6e6;
  --color-5: #d8efef;
}

SCSS

$color-1: #363c3c;
$color-2: #abcfcb;
$color-3: #fcfefe;
$color-4: #c3e6e6;
$color-5: #d8efef;

TAILWIND

colors: {
  'brand-1': '#363c3c',
  'brand-2': '#abcfcb',
  'brand-3': '#fcfefe',
  'brand-4': '#c3e6e6',
  'brand-5': '#d8efef',
}

RGB Array

[54, 60, 60], [171, 207, 203], [252, 254, 254], [195, 230, 230], [216, 239, 239]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #363C3C, #ABCFCB, #FCFEFE, #C3E6E6, #D8EFEF is ideal for: health products, baby brands, fresh-style blogs, 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: #363c3c; --color-2: #abcfcb; --color-3: #fcfefe; --color-4: #c3e6e6; --color-5: #d8efef. 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 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