← Back to Editor

#F0F7F3 · #C8E6D2 · #9DD1CC · #9296A6 · #383031

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#F0F7F3

Celadon · SeaShell · Mint Green

HEX
#F0F7F3
RGB
rgb(240, 247, 243)
HSL
hsl(146, 30%, 95%)
HSB
hsb(146, 3%, 97%)
CMYK
cmyk(3%, 0%, 2%, 3%)
Oklch
oklch(97.0% 0.009 161.4)

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

#C8E6D2

Celadon · LightGray · Mint Green

HEX
#C8E6D2
RGB
rgb(200, 230, 210)
HSL
hsl(140, 37%, 84%)
HSB
hsb(140, 13%, 90%)
CMYK
cmyk(13%, 0%, 9%, 10%)
Oklch
oklch(89.8% 0.042 156.3)

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

#9DD1CC

Jade · LightSteelBlue · Lake Green

HEX
#9DD1CC
RGB
rgb(157, 209, 204)
HSL
hsl(174, 36%, 72%)
HSB
hsb(174, 25%, 82%)
CMYK
cmyk(25%, 0%, 2%, 18%)
Oklch
oklch(82.3% 0.054 188.8)

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

#9296A6

Azure · DarkGray · Cobalt Blue

HEX
#9296A6
RGB
rgb(146, 150, 166)
HSL
hsl(228, 10%, 61%)
HSB
hsb(228, 12%, 65%)
CMYK
cmyk(12%, 10%, 0%, 35%)
Oklch
oklch(67.5% 0.024 274.6)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#383031

Crimson · DarkSlateGray · Dark Stone

HEX
#383031
RGB
rgb(56, 48, 49)
HSL
hsl(353, 8%, 20%)
HSB
hsb(353, 14%, 22%)
CMYK
cmyk(0%, 14%, 13%, 78%)
Oklch
oklch(31.8% 0.012 9.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0F7F3
F6EEF3

Analogous

EFF6EE
F0F7F3
EEF6F6

Triadic

F0F7F3
F2EEF6
F6F2EE

Split-Comp.

F0F7F3
F6EEF6
F6EEEF

Tetradic

F0F7F3
EEEFF6
F6EEF3
F6F6EE

Contrast Matrix WCAG 2.1 Contrast

F0F7F3
C8E6D2
9DD1CC
9296A6
383031
—
1.2
Fail
1.6
Fail
2.7
Fail
11.8
AAA
1.2
Fail
—
1.3
Fail
2.2
Fail
9.6
AAA
1.6
Fail
1.3
Fail
—
1.7
Fail
7.6
AAA
2.7
Fail
2.2
Fail
1.7
Fail
—
4.4
AA Large
11.8
AAA
9.6
AAA
7.6
AAA
4.4
AA Large
—
White BG
1.1Fail
1.3Fail
1.7Fail
2.9Fail
12.8AAA
Black BG
19.3AAA
15.7AAA
12.4AAA
7.1AAA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3F4
D5D5D7
B4B4CD
9494A2
353431

Deuteranopia

F3F2F4
D3D1D8
B1ADCD
9493A1
353631

Tritanopia

F0F5F5
CADBDC
A0CECE
929F9E
383131

Achromatopsia

F4F4F4
DBDBDB
C1C1C1
979797
333333

Shades & Tints Shades & Tints

#F0F7F3

Dark
Light

#C8E6D2

Dark
Light

#9DD1CC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0f7f3;
  --color-2: #c8e6d2;
  --color-3: #9dd1cc;
  --color-4: #9296a6;
  --color-5: #383031;
}

SCSS

$color-1: #f0f7f3;
$color-2: #c8e6d2;
$color-3: #9dd1cc;
$color-4: #9296a6;
$color-5: #383031;

TAILWIND

colors: {
  'brand-1': '#f0f7f3',
  'brand-2': '#c8e6d2',
  'brand-3': '#9dd1cc',
  'brand-4': '#9296a6',
  'brand-5': '#383031',
}

RGB Array

[240, 247, 243], [200, 230, 210], [157, 209, 204], [146, 150, 166], [56, 48, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0F7F3, #C8E6D2, #9DD1CC, #9296A6, #383031 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, 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: #f0f7f3; --color-2: #c8e6d2; --color-3: #9dd1cc; --color-4: #9296a6; --color-5: #383031. 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 beauty, lifestyle, arts 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