← Back to Editor

#F5FFF2 · #D0EBBE · #81D4BB · #6B747D · #393D40

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

#F5FFF2

Emerald · Snow · Mint Green

HEX
#F5FFF2
RGB
rgb(245, 255, 242)
HSL
hsl(106, 100%, 97%)
HSB
hsb(106, 5%, 100%)
CMYK
cmyk(4%, 0%, 5%, 0%)
Oklch
oklch(98.9% 0.020 138.4)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#D0EBBE

Emerald · LightGray · Mint Green

HEX
#D0EBBE
RGB
rgb(208, 235, 190)
HSL
hsl(96, 53%, 83%)
HSB
hsb(96, 19%, 92%)
CMYK
cmyk(11%, 0%, 19%, 8%)
Oklch
oklch(90.9% 0.066 132.9)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#81D4BB

Jade · MediumAquaMarine · Lake Green

HEX
#81D4BB
RGB
rgb(129, 212, 187)
HSL
hsl(162, 49%, 67%)
HSB
hsb(162, 39%, 83%)
CMYK
cmyk(39%, 0%, 12%, 17%)
Oklch
oklch(81.0% 0.089 172.7)

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

#6B747D

Indigo · DimGray · Warm Gray

HEX
#6B747D
RGB
rgb(107, 116, 125)
HSL
hsl(210, 8%, 45%)
HSB
hsb(210, 14%, 49%)
CMYK
cmyk(14%, 7%, 0%, 51%)
Oklch
oklch(55.4% 0.018 248.1)

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

#393D40

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#393D40
RGB
rgb(57, 61, 64)
HSL
hsl(206, 6%, 24%)
HSB
hsb(206, 11%, 25%)
CMYK
cmyk(11%, 5%, 0%, 75%)
Oklch
oklch(35.7% 0.008 240.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5FFF2
FBF0FF

Analogous

FBFFF0
F5FFF2
F0FFF4

Triadic

F5FFF2
F0F3FF
FFF0F3

Split-Comp.

F5FFF2
F4F0FF
FFF0FB

Tetradic

F5FFF2
F0FBFF
FBF0FF
FFF4F0

Contrast Matrix WCAG 2.1 Contrast

F5FFF2
D0EBBE
81D4BB
6B747D
393D40
—
1.3
Fail
1.7
Fail
4.6
AA
10.7
AAA
1.3
Fail
—
1.4
Fail
3.7
AA Large
8.5
AAA
1.7
Fail
1.4
Fail
—
2.7
Fail
6.3
AA
4.6
AA
3.7
AA Large
2.7
Fail
—
2.3
Fail
10.7
AAA
8.5
AAA
6.3
AA
2.3
Fail
—
White BG
1.0Fail
1.3Fail
1.7Fail
4.8AA
11.0AAA
Black BG
20.5AAA
16.3AAA
12.1AAA
4.4AA Large
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9F5
DCDCC9
A5A6C1
6F6F7B
3B3B3F

Deuteranopia

F9F8F6
DAD8CC
A09AC3
6E6E7A
3B3A3F

Tritanopia

F6F8F8
D1D1D3
85C6C7
6B7979
393F3F

Achromatopsia

FBFBFB
DEDEDE
B8B8B8
727272
3C3C3C

Shades & Tints Shades & Tints

#F5FFF2

Dark
Light

#D0EBBE

Dark
Light

#81D4BB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5fff2;
  --color-2: #d0ebbe;
  --color-3: #81d4bb;
  --color-4: #6b747d;
  --color-5: #393d40;
}

SCSS

$color-1: #f5fff2;
$color-2: #d0ebbe;
$color-3: #81d4bb;
$color-4: #6b747d;
$color-5: #393d40;

TAILWIND

colors: {
  'brand-1': '#f5fff2',
  'brand-2': '#d0ebbe',
  'brand-3': '#81d4bb',
  'brand-4': '#6b747d',
  'brand-5': '#393d40',
}

RGB Array

[245, 255, 242], [208, 235, 190], [129, 212, 187], [107, 116, 125], [57, 61, 64]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5FFF2, #D0EBBE, #81D4BB, #6B747D, #393D40 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: #f5fff2; --color-2: #d0ebbe; --color-3: #81d4bb; --color-4: #6b747d; --color-5: #393d40. 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