← Back to Editor

#F3EFE0 · #1D3034 · #B2BF10 · #1C7165 · #D0441E

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

#F3EFE0

Goose Yellow · Beige · Lemon Cream

HEX
#F3EFE0
RGB
rgb(243, 239, 224)
HSL
hsl(47, 44%, 92%)
HSB
hsb(47, 8%, 95%)
CMYK
cmyk(0%, 2%, 8%, 5%)
Oklch
oklch(95.1% 0.020 94.5)

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

#1D3034

Slate Blue · DarkSlateGray · Peacock Green

HEX
#1D3034
RGB
rgb(29, 48, 52)
HSL
hsl(190, 28%, 16%)
HSB
hsb(190, 44%, 20%)
CMYK
cmyk(44%, 8%, 0%, 80%)
Oklch
oklch(29.5% 0.026 212.3)

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

#B2BF10

Autumn Sage · GoldenRod · Honey Gold

HEX
#B2BF10
RGB
rgb(178, 191, 16)
HSL
hsl(64, 85%, 41%)
HSB
hsb(64, 92%, 75%)
CMYK
cmyk(7%, 0%, 92%, 25%)
Oklch
oklch(76.8% 0.171 114.6)

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

#1C7165

Mineral Blue · SeaGreen · Mint Ice

HEX
#1C7165
RGB
rgb(28, 113, 101)
HSL
hsl(172, 60%, 28%)
HSB
hsb(172, 75%, 44%)
CMYK
cmyk(75%, 0%, 11%, 56%)
Oklch
oklch(49.6% 0.080 181.3)

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

#D0441E

Vermilion · Chocolate · Passion Red

HEX
#D0441E
RGB
rgb(208, 68, 30)
HSL
hsl(13, 75%, 47%)
HSB
hsb(13, 86%, 82%)
CMYK
cmyk(0%, 67%, 86%, 18%)
Oklch
oklch(58.1% 0.183 35.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3EFE0
E2E6F4

Analogous

F4E7E2
F3EFE0
EEF4E2

Triadic

F3EFE0
E2F4F0
F0E2F4

Split-Comp.

F3EFE0
E2EEF4
E7E2F4

Tetradic

F3EFE0
E2F4E7
E2E6F4
F4E2EE

Contrast Matrix WCAG 2.1 Contrast

F3EFE0
1D3034
B2BF10
1C7165
D0441E
—
12.0
AAA
1.8
Fail
5.1
AA
4.0
AA Large
12.0
AAA
—
6.8
AA
2.4
Fail
3.0
Fail
1.8
Fail
6.8
AA
—
2.9
Fail
2.3
Fail
5.1
AA
2.4
Fail
2.9
Fail
—
1.3
Fail
4.0
AA Large
3.0
Fail
2.3
Fail
1.3
Fail
—
White BG
1.2Fail
13.8AAA
2.0Fail
5.8AA
4.6AA
Black BG
18.2AAA
1.5Fail
10.4AAA
3.6AA Large
4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F1E4
252533
B8B83A
414268
939227

Deuteranopia

F2F2E5
242333
B7B645
3C3669
9CA629

Tritanopia

F3E6E7
1E3232
B35C63
206A6B
C92E30

Achromatopsia

EEEEEE
2B2B2B
A7A7A7
565656
6A6A6A

Shades & Tints Shades & Tints

#F3EFE0

Dark
Light

#1D3034

Dark
Light

#B2BF10

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3efe0;
  --color-2: #1d3034;
  --color-3: #b2bf10;
  --color-4: #1c7165;
  --color-5: #d0441e;
}

SCSS

$color-1: #f3efe0;
$color-2: #1d3034;
$color-3: #b2bf10;
$color-4: #1c7165;
$color-5: #d0441e;

TAILWIND

colors: {
  'brand-1': '#f3efe0',
  'brand-2': '#1d3034',
  'brand-3': '#b2bf10',
  'brand-4': '#1c7165',
  'brand-5': '#d0441e',
}

RGB Array

[243, 239, 224], [29, 48, 52], [178, 191, 16], [28, 113, 101], [208, 68, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3EFE0, #1D3034, #B2BF10, #1C7165, #D0441E 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: #f3efe0; --color-2: #1d3034; --color-3: #b2bf10; --color-4: #1c7165; --color-5: #d0441e. 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