← Back to Editor

#1F3036 · #61C3C3 · #B5D7D7 · #F4ECEC · #7FF0CE

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

#1F3036

Slate Blue · DarkSlateGray · Peacock Green

HEX
#1F3036
RGB
rgb(31, 48, 54)
HSL
hsl(196, 27%, 17%)
HSB
hsb(196, 43%, 21%)
CMYK
cmyk(43%, 11%, 0%, 79%)
Oklch
oklch(29.7% 0.025 221.9)

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

#61C3C3

Slate Blue · MediumAquaMarine · Lake Green

HEX
#61C3C3
RGB
rgb(97, 195, 195)
HSL
hsl(180, 45%, 57%)
HSB
hsb(180, 50%, 76%)
CMYK
cmyk(50%, 0%, 0%, 24%)
Oklch
oklch(75.8% 0.092 195.4)

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

#B5D7D7

Sky Blue · LightBlue · Glacier Blue

HEX
#B5D7D7
RGB
rgb(181, 215, 215)
HSL
hsl(180, 30%, 78%)
HSB
hsb(180, 16%, 84%)
CMYK
cmyk(16%, 0%, 0%, 16%)
Oklch
oklch(85.5% 0.036 196.5)

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

#F4ECEC

Peach Pink · Linen · Cherry Blossom

HEX
#F4ECEC
RGB
rgb(244, 236, 236)
HSL
hsl(0, 27%, 94%)
HSB
hsb(0, 3%, 96%)
CMYK
cmyk(0%, 3%, 3%, 4%)
Oklch
oklch(94.9% 0.009 17.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#7FF0CE

Jade · SkyBlue · Lake Green

HEX
#7FF0CE
RGB
rgb(127, 240, 206)
HSL
hsl(162, 79%, 72%)
HSB
hsb(162, 47%, 94%)
CMYK
cmyk(47%, 0%, 14%, 6%)
Oklch
oklch(87.9% 0.115 171.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1F3036
372620

Analogous

203732
1F3036
202537

Triadic

1F3036
372031
313720

Split-Comp.

1F3036
372025
373220

Tetradic

1F3036
322037
372620
253720

Contrast Matrix WCAG 2.1 Contrast

1F3036
61C3C3
B5D7D7
F4ECEC
7FF0CE
—
6.6
AA
8.9
AAA
11.8
AAA
9.9
AAA
6.6
AA
—
1.4
Fail
1.8
Fail
1.5
Fail
8.9
AAA
1.4
Fail
—
1.3
Fail
1.1
Fail
11.8
AAA
1.8
Fail
1.3
Fail
—
1.2
Fail
9.9
AAA
1.5
Fail
1.1
Fail
1.2
Fail
—
White BG
13.7AAA
2.1Fail
1.5Fail
1.2Fail
1.4Fail
Black BG
1.5Fail
10.1AAA
13.7AAA
18.1AAA
15.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

262735
8B8CC3
C4C4D7
F1F0EC
B0B1D6

Deuteranopia

252434
867EC3
C2BFD7
F1F2EC
A9A1D8

Tritanopia

203333
66C3C3
B7D7D7
F4ECEC
85DDDE

Achromatopsia

2C2C2C
A6A6A6
CDCDCD
EEEEEE
CACACA

Shades & Tints Shades & Tints

#1F3036

Dark
Light

#61C3C3

Dark
Light

#B5D7D7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1f3036;
  --color-2: #61c3c3;
  --color-3: #b5d7d7;
  --color-4: #f4ecec;
  --color-5: #7ff0ce;
}

SCSS

$color-1: #1f3036;
$color-2: #61c3c3;
$color-3: #b5d7d7;
$color-4: #f4ecec;
$color-5: #7ff0ce;

TAILWIND

colors: {
  'brand-1': '#1f3036',
  'brand-2': '#61c3c3',
  'brand-3': '#b5d7d7',
  'brand-4': '#f4ecec',
  'brand-5': '#7ff0ce',
}

RGB Array

[31, 48, 54], [97, 195, 195], [181, 215, 215], [244, 236, 236], [127, 240, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1F3036, #61C3C3, #B5D7D7, #F4ECEC, #7FF0CE is ideal for: 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: #1f3036; --color-2: #61c3c3; --color-3: #b5d7d7; --color-4: #f4ecec; --color-5: #7ff0ce. 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. 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