← Back to Editor

#F1FAB8 · #C9E99B · #9DC9AC · #3F4233 · #F23649

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F1FAB8

Fresh Green · Bisque · Lemon Cream

HEX
#F1FAB8
RGB
rgb(241, 250, 184)
HSL
hsl(68, 87%, 85%)
HSB
hsb(68, 26%, 98%)
CMYK
cmyk(4%, 0%, 26%, 2%)
Oklch
oklch(96.3% 0.085 114.3)

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

#C9E99B

Willow Green · Khaki · Apple Green

HEX
#C9E99B
RGB
rgb(201, 233, 155)
HSL
hsl(85, 64%, 76%)
HSB
hsb(85, 33%, 91%)
CMYK
cmyk(14%, 0%, 33%, 9%)
Oklch
oklch(89.2% 0.107 126.6)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#9DC9AC

Celadon · DarkGray · Apple Green

HEX
#9DC9AC
RGB
rgb(157, 201, 172)
HSL
hsl(140, 29%, 70%)
HSB
hsb(140, 22%, 79%)
CMYK
cmyk(22%, 0%, 14%, 21%)
Oklch
oklch(79.6% 0.062 155.9)

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

#3F4233

Grass Green · DarkSlateGray · Forest Green

HEX
#3F4233
RGB
rgb(63, 66, 51)
HSL
hsl(72, 13%, 23%)
HSB
hsb(72, 23%, 26%)
CMYK
cmyk(5%, 0%, 23%, 74%)
Oklch
oklch(37.1% 0.025 116.8)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#F23649

Vermilion · Crimson · Passion Red

HEX
#F23649
RGB
rgb(242, 54, 73)
HSL
hsl(354, 88%, 58%)
HSB
hsb(354, 78%, 95%)
CMYK
cmyk(0%, 78%, 70%, 5%)
Oklch
oklch(63.1% 0.221 21.5)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1FAB8
C0B7FA

Analogous

FAE2B7
F1FAB8
D0FAB7

Triadic

F1FAB8
B7F1FA
FAB7F1

Split-Comp.

F1FAB8
B7D0FA
E2B7FA

Tetradic

F1FAB8
B7FAE2
C0B7FA
FAB7D0

Contrast Matrix WCAG 2.1 Contrast

F1FAB8
C9E99B
9DC9AC
3F4233
F23649
—
1.2
Fail
1.7
Fail
9.4
AAA
3.5
AA Large
1.2
Fail
—
1.4
Fail
7.7
AAA
2.9
Fail
1.7
Fail
1.4
Fail
—
5.6
AA
2.1
Fail
9.4
AAA
7.7
AAA
5.6
AA
—
2.6
Fail
3.5
AA Large
2.9
Fail
2.1
Fail
2.6
Fail
—
White BG
1.1Fail
1.3Fail
1.8Fail
10.3AAA
3.9AA Large
Black BG
19.1AAA
15.6AAA
11.4AAA
2.0Fail
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5C8
D7D7AE
B0B0B3
404037
A19F44

Deuteranopia

F4F4CC
D5D3B2
AEAAB5
404038
ACBA43

Tritanopia

F1D5D7
CBBDC0
9FB9BA
3F393A
E94140

Achromatopsia

F0F0F0
D7D7D7
B9B9B9
3F3F3F
707070

Shades & Tints Shades & Tints

#F1FAB8

Dark
Light

#C9E99B

Dark
Light

#9DC9AC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1fab8;
  --color-2: #c9e99b;
  --color-3: #9dc9ac;
  --color-4: #3f4233;
  --color-5: #f23649;
}

SCSS

$color-1: #f1fab8;
$color-2: #c9e99b;
$color-3: #9dc9ac;
$color-4: #3f4233;
$color-5: #f23649;

TAILWIND

colors: {
  'brand-1': '#f1fab8',
  'brand-2': '#c9e99b',
  'brand-3': '#9dc9ac',
  'brand-4': '#3f4233',
  'brand-5': '#f23649',
}

RGB Array

[241, 250, 184], [201, 233, 155], [157, 201, 172], [63, 66, 51], [242, 54, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1FAB8, #C9E99B, #9DC9AC, #3F4233, #F23649 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: #f1fab8; --color-2: #c9e99b; --color-3: #9dc9ac; --color-4: #3f4233; --color-5: #f23649. 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