← Back to Editor

#F1EAF3 · #266C64 · #648C81 · #ACA98B · #04140F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F1EAF3

Lilac · Lavender · Lavender

HEX
#F1EAF3
RGB
rgb(241, 234, 243)
HSL
hsl(287, 27%, 94%)
HSB
hsb(287, 4%, 95%)
CMYK
cmyk(1%, 4%, 0%, 5%)
Oklch
oklch(94.5% 0.014 318.7)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

#266C64

Mineral Blue · SeaGreen · Mint Ice

HEX
#266C64
RGB
rgb(38, 108, 100)
HSL
hsl(173, 48%, 29%)
HSB
hsb(173, 65%, 42%)
CMYK
cmyk(65%, 0%, 7%, 58%)
Oklch
oklch(48.5% 0.070 184.7)

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

#648C81

Mineral Blue · SlateGray · Mint Ice

HEX
#648C81
RGB
rgb(100, 140, 129)
HSL
hsl(163, 17%, 47%)
HSB
hsb(163, 29%, 55%)
CMYK
cmyk(29%, 0%, 8%, 45%)
Oklch
oklch(60.7% 0.047 175.7)

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

#ACA98B

Fresh Green · DarkGray · Sunflower

HEX
#ACA98B
RGB
rgb(172, 169, 139)
HSL
hsl(55, 17%, 61%)
HSB
hsb(55, 19%, 67%)
CMYK
cmyk(0%, 2%, 19%, 33%)
Oklch
oklch(72.9% 0.042 102.7)

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

#04140F

Mineral Blue · Black · Peacock Green

HEX
#04140F
RGB
rgb(4, 20, 15)
HSL
hsl(161, 67%, 5%)
HSB
hsb(161, 80%, 8%)
CMYK
cmyk(80%, 0%, 25%, 92%)
Oklch
oklch(17.4% 0.026 171.9)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1EAF3
EDF4EC

Analogous

EEECF4
F1EAF3
F4ECF1

Triadic

F1EAF3
F4F2EC
ECF4F2

Split-Comp.

F1EAF3
F1F4EC
ECF4EE

Tetradic

F1EAF3
F4EEEC
EDF4EC
ECF1F4

Contrast Matrix WCAG 2.1 Contrast

F1EAF3
266C64
648C81
ACA98B
04140F
—
5.2
AA
3.2
AA Large
2.0
Fail
16.0
AAA
5.2
AA
—
1.6
Fail
2.6
Fail
3.1
AA Large
3.2
AA Large
1.6
Fail
—
1.6
Fail
5.0
AA
2.0
Fail
2.6
Fail
1.6
Fail
—
7.9
AAA
16.0
AAA
3.1
AA Large
5.0
AA
7.9
AAA
—
White BG
1.2Fail
6.2AA
3.7AA Large
2.4Fail
18.9AAA
Black BG
17.8AAA
3.4AA Large
5.6AA
8.8AAA
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEEF1
444566
757684
ABAB92
0B0B10

Deuteranopia

EEEFF0
403B66
737084
ABAB94
0A0911

Tritanopia

F1EFEF
2A6768
668686
AC9899
051111

Achromatopsia

EDEDED
565656
7F7F7F
A6A6A6
0F0F0F

Shades & Tints Shades & Tints

#F1EAF3

Dark
Light

#266C64

Dark
Light

#648C81

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1eaf3;
  --color-2: #266c64;
  --color-3: #648c81;
  --color-4: #aca98b;
  --color-5: #04140f;
}

SCSS

$color-1: #f1eaf3;
$color-2: #266c64;
$color-3: #648c81;
$color-4: #aca98b;
$color-5: #04140f;

TAILWIND

colors: {
  'brand-1': '#f1eaf3',
  'brand-2': '#266c64',
  'brand-3': '#648c81',
  'brand-4': '#aca98b',
  'brand-5': '#04140f',
}

RGB Array

[241, 234, 243], [38, 108, 100], [100, 140, 129], [172, 169, 139], [4, 20, 15]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1EAF3, #266C64, #648C81, #ACA98B, #04140F 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: #f1eaf3; --color-2: #266c64; --color-3: #648c81; --color-4: #aca98b; --color-5: #04140f. 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