← Back to Editor

#F4FFF9 · #FFFFDB · #C6DDC7 · #3DABB7 · #0C0D0E

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

#F4FFF9

Emerald · Snow · Mint Green

HEX
#F4FFF9
RGB
rgb(244, 255, 249)
HSL
hsl(147, 100%, 98%)
HSB
hsb(147, 4%, 100%)
CMYK
cmyk(4%, 0%, 2%, 0%)
Oklch
oklch(99.0% 0.014 162.5)

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

#FFFFDB

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFFDB
RGB
rgb(255, 255, 219)
HSL
hsl(60, 100%, 93%)
HSB
hsb(60, 14%, 100%)
CMYK
cmyk(0%, 0%, 14%, 0%)
Oklch
oklch(99.1% 0.047 107.2)

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

#C6DDC7

Celadon · LightGray · Mint Green

HEX
#C6DDC7
RGB
rgb(198, 221, 199)
HSL
hsl(123, 25%, 82%)
HSB
hsb(123, 10%, 87%)
CMYK
cmyk(10%, 0%, 10%, 13%)
Oklch
oklch(87.4% 0.039 146.4)

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

#3DABB7

Slate Blue · LightSeaGreen · Mint Ice

HEX
#3DABB7
RGB
rgb(61, 171, 183)
HSL
hsl(186, 50%, 48%)
HSB
hsb(186, 67%, 72%)
CMYK
cmyk(67%, 7%, 0%, 28%)
Oklch
oklch(68.4% 0.099 205.4)

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

#0C0D0E

Indigo · Black · Jet Black

HEX
#0C0D0E
RGB
rgb(12, 13, 14)
HSL
hsl(210, 8%, 5%)
HSB
hsb(210, 14%, 5%)
CMYK
cmyk(14%, 7%, 0%, 95%)
Oklch
oklch(15.8% 0.003 248.0)

Traditional「Indigo」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4FFF9
FFF5FA

Analogous

F5FFF5
F4FFF9
F5FFFE

Triadic

F4FFF9
F9F5FF
FFF9F5

Split-Comp.

F4FFF9
FEF5FF
FFF5F5

Tetradic

F4FFF9
F5F5FF
FFF5FA
FFFEF5

Contrast Matrix WCAG 2.1 Contrast

F4FFF9
FFFFDB
C6DDC7
3DABB7
0C0D0E
—
1.0
Fail
1.4
Fail
2.7
Fail
19.0
AAA
1.0
Fail
—
1.4
Fail
2.7
Fail
19.1
AAA
1.4
Fail
1.4
Fail
—
1.9
Fail
13.5
AAA
2.7
Fail
2.7
Fail
1.9
Fail
—
7.1
AAA
19.0
AAA
19.1
AAA
13.5
AAA
7.1
AAA
—
White BG
1.0Fail
1.0Fail
1.4Fail
2.7Fail
19.5AAA
Black BG
20.5AAA
20.6AAA
14.6AAA
7.7AAA
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9FA
FFFFE4
D0D0CC
6D6EB4
0C0C0E

Deuteranopia

F8F7FB
FFFFE6
CFCDCE
665EB3
0C0C0E

Tritanopia

F5FCFC
FFEBEC
C7D1D1
43B2B1
0C0E0E

Achromatopsia

FBFBFB
FBFBFB
D4D4D4
8B8B8B
0D0D0D

Shades & Tints Shades & Tints

#F4FFF9

Dark
Light

#FFFFDB

Dark
Light

#C6DDC7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4fff9;
  --color-2: #ffffdb;
  --color-3: #c6ddc7;
  --color-4: #3dabb7;
  --color-5: #0c0d0e;
}

SCSS

$color-1: #f4fff9;
$color-2: #ffffdb;
$color-3: #c6ddc7;
$color-4: #3dabb7;
$color-5: #0c0d0e;

TAILWIND

colors: {
  'brand-1': '#f4fff9',
  'brand-2': '#ffffdb',
  'brand-3': '#c6ddc7',
  'brand-4': '#3dabb7',
  'brand-5': '#0c0d0e',
}

RGB Array

[244, 255, 249], [255, 255, 219], [198, 221, 199], [61, 171, 183], [12, 13, 14]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4FFF9, #FFFFDB, #C6DDC7, #3DABB7, #0C0D0E 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: #f4fff9; --color-2: #ffffdb; --color-3: #c6ddc7; --color-4: #3dabb7; --color-5: #0c0d0e. 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