← Back to Editor

#F6F3EC · #F4E3C3 · #A3B5C0 · #3D465D · #0C0A34

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

#F6F3EC

Goose Yellow · Linen · Lemon Cream

HEX
#F6F3EC
RGB
rgb(246, 243, 236)
HSL
hsl(42, 36%, 95%)
HSB
hsb(42, 4%, 96%)
CMYK
cmyk(0%, 1%, 4%, 4%)
Oklch
oklch(96.5% 0.010 87.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#F4E3C3

Goose Yellow · Bisque · Peach Orange

HEX
#F4E3C3
RGB
rgb(244, 227, 195)
HSL
hsl(39, 69%, 86%)
HSB
hsb(39, 20%, 96%)
CMYK
cmyk(0%, 7%, 20%, 4%)
Oklch
oklch(92.1% 0.046 83.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#A3B5C0

Sky Blue · DarkGray · Cobalt Blue

HEX
#A3B5C0
RGB
rgb(163, 181, 192)
HSL
hsl(203, 19%, 70%)
HSB
hsb(203, 15%, 75%)
CMYK
cmyk(15%, 6%, 0%, 25%)
Oklch
oklch(76.3% 0.025 234.5)

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

#3D465D

Indigo · DarkSlateGray · Prussian Blue

HEX
#3D465D
RGB
rgb(61, 70, 93)
HSL
hsl(223, 21%, 30%)
HSB
hsb(223, 34%, 36%)
CMYK
cmyk(34%, 25%, 0%, 64%)
Oklch
oklch(39.6% 0.041 267.9)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#0C0A34

Deep Indigo · Black · Deep Sea Blue

HEX
#0C0A34
RGB
rgb(12, 10, 52)
HSL
hsl(243, 68%, 12%)
HSB
hsb(243, 81%, 20%)
CMYK
cmyk(77%, 81%, 0%, 80%)
Oklch
oklch(18.3% 0.079 277.2)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6F3EC
EEF0F7

Analogous

F7EFEE
F6F3EC
F5F7EE

Triadic

F6F3EC
EEF7F4
F4EEF7

Split-Comp.

F6F3EC
EEF5F7
EFEEF7

Tetradic

F6F3EC
EEF7EF
EEF0F7
F7EEF5

Contrast Matrix WCAG 2.1 Contrast

F6F3EC
F4E3C3
A3B5C0
3D465D
0C0A34
—
1.1
Fail
1.9
Fail
8.5
AAA
17.1
AAA
1.1
Fail
—
1.7
Fail
7.4
AAA
15.0
AAA
1.9
Fail
1.7
Fail
—
4.4
AA Large
9.0
AAA
8.5
AAA
7.4
AAA
4.4
AA Large
—
2.0
Fail
17.1
AAA
15.0
AAA
9.0
AAA
2.0
Fail
—
White BG
1.1Fail
1.3Fail
2.1Fail
9.4AAA
18.9AAA
Black BG
19.0AAA
16.6AAA
9.9AAA
2.2Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5EE
EDECCB
ABABBD
414157
0B0B2A

Deuteranopia

F5F5EE
EEEFCD
AAA8BD
404056
0B0B27

Tritanopia

F6EFEF
F3D1D2
A4BBBB
3D5352
0C2220

Achromatopsia

F3F3F3
E4E4E4
B1B1B1
464646
0F0F0F

Shades & Tints Shades & Tints

#F6F3EC

Dark
Light

#F4E3C3

Dark
Light

#A3B5C0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6f3ec;
  --color-2: #f4e3c3;
  --color-3: #a3b5c0;
  --color-4: #3d465d;
  --color-5: #0c0a34;
}

SCSS

$color-1: #f6f3ec;
$color-2: #f4e3c3;
$color-3: #a3b5c0;
$color-4: #3d465d;
$color-5: #0c0a34;

TAILWIND

colors: {
  'brand-1': '#f6f3ec',
  'brand-2': '#f4e3c3',
  'brand-3': '#a3b5c0',
  'brand-4': '#3d465d',
  'brand-5': '#0c0a34',
}

RGB Array

[246, 243, 236], [244, 227, 195], [163, 181, 192], [61, 70, 93], [12, 10, 52]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F6F3EC, #F4E3C3, #A3B5C0, #3D465D, #0C0A34 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: #f6f3ec; --color-2: #f4e3c3; --color-3: #a3b5c0; --color-4: #3d465d; --color-5: #0c0a34. 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