← Back to Editor

#F1F8CA · #C0D8A8 · #A8C090 · #90A878 · #303018

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F1F8CA

Fresh Green · Beige · Lemon Cream

HEX
#F1F8CA
RGB
rgb(241, 248, 202)
HSL
hsl(69, 77%, 88%)
HSB
hsb(69, 19%, 97%)
CMYK
cmyk(3%, 0%, 19%, 3%)
Oklch
oklch(96.2% 0.060 114.6)

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

#C0D8A8

Celadon · Silver · Apple Green

HEX
#C0D8A8
RGB
rgb(192, 216, 168)
HSL
hsl(90, 38%, 75%)
HSB
hsb(90, 22%, 85%)
CMYK
cmyk(11%, 0%, 22%, 15%)
Oklch
oklch(85.2% 0.070 129.4)

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

#A8C090

Celadon · DarkSeaGreen · Apple Green

HEX
#A8C090
RGB
rgb(168, 192, 144)
HSL
hsl(90, 28%, 66%)
HSB
hsb(90, 25%, 75%)
CMYK
cmyk(13%, 0%, 25%, 25%)
Oklch
oklch(77.7% 0.071 129.5)

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

#90A878

Celadon · DarkSeaGreen · Olive Green

HEX
#90A878
RGB
rgb(144, 168, 120)
HSL
hsl(90, 22%, 56%)
HSB
hsb(90, 29%, 66%)
CMYK
cmyk(14%, 0%, 29%, 34%)
Oklch
oklch(70.1% 0.072 129.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#303018

Autumn Sage · DarkSlateGray · Amber Gold

HEX
#303018
RGB
rgb(48, 48, 24)
HSL
hsl(60, 33%, 14%)
HSB
hsb(60, 50%, 19%)
CMYK
cmyk(0%, 0%, 50%, 81%)
Oklch
oklch(30.2% 0.039 108.5)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1F8CA
D0C9F8

Analogous

F8E7C9
F1F8CA
D9F8C9

Triadic

F1F8CA
C9F1F8
F8C9F1

Split-Comp.

F1F8CA
C9D9F8
E7C9F8

Tetradic

F1F8CA
C9F8E7
D0C9F8
F8C9D9

Contrast Matrix WCAG 2.1 Contrast

F1F8CA
C0D8A8
A8C090
90A878
303018
—
1.4
Fail
1.8
Fail
2.4
Fail
12.2
AAA
1.4
Fail
—
1.3
Fail
1.7
Fail
8.7
AAA
1.8
Fail
1.3
Fail
—
1.3
Fail
6.8
AA
2.4
Fail
1.7
Fail
1.3
Fail
—
5.2
AA
12.2
AAA
8.7
AAA
6.8
AA
5.2
AA
—
White BG
1.1Fail
1.5Fail
2.0Fail
2.6Fail
13.4AAA
Black BG
19.0AAA
13.6AAA
10.6AAA
8.1AAA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F4F4D5
CACBB4
B2B39C
9A9B84
30301E

Deuteranopia

F4F3D8
C9C7B6
B1AF9E
999786
30301F

Tritanopia

F1DEE0
C1BDBF
A9A5A7
918D8F
302223

Achromatopsia

F1F1F1
CBCBCB
B3B3B3
9B9B9B
2D2D2D

Shades & Tints Shades & Tints

#F1F8CA

Dark
Light

#C0D8A8

Dark
Light

#A8C090

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1f8ca;
  --color-2: #c0d8a8;
  --color-3: #a8c090;
  --color-4: #90a878;
  --color-5: #303018;
}

SCSS

$color-1: #f1f8ca;
$color-2: #c0d8a8;
$color-3: #a8c090;
$color-4: #90a878;
$color-5: #303018;

TAILWIND

colors: {
  'brand-1': '#f1f8ca',
  'brand-2': '#c0d8a8',
  'brand-3': '#a8c090',
  'brand-4': '#90a878',
  'brand-5': '#303018',
}

RGB Array

[241, 248, 202], [192, 216, 168], [168, 192, 144], [144, 168, 120], [48, 48, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1F8CA, #C0D8A8, #A8C090, #90A878, #303018 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: #f1f8ca; --color-2: #c0d8a8; --color-3: #a8c090; --color-4: #90a878; --color-5: #303018. 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