← Back to Editor

#F2D1A2 · #7E9179 · #454F4F · #2A2D2E · #1D1C1F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#F2D1A2

Goose Yellow · Wheat · Peach Orange

HEX
#F2D1A2
RGB
rgb(242, 209, 162)
HSL
hsl(35, 75%, 79%)
HSB
hsb(35, 33%, 95%)
CMYK
cmyk(0%, 14%, 33%, 5%)
Oklch
oklch(87.7% 0.072 76.3)

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

#7E9179

Celadon · Gray · Olive Green

HEX
#7E9179
RGB
rgb(126, 145, 121)
HSL
hsl(107, 10%, 52%)
HSB
hsb(107, 17%, 57%)
CMYK
cmyk(13%, 0%, 17%, 43%)
Oklch
oklch(63.5% 0.041 139.2)

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

#454F4F

Dark Cyan · DarkSlateGray · Charcoal

HEX
#454F4F
RGB
rgb(69, 79, 79)
HSL
hsl(180, 7%, 29%)
HSB
hsb(180, 13%, 31%)
CMYK
cmyk(13%, 0%, 0%, 69%)
Oklch
oklch(41.9% 0.013 196.7)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#2A2D2E

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2A2D2E
RGB
rgb(42, 45, 46)
HSL
hsl(195, 5%, 17%)
HSB
hsb(195, 9%, 18%)
CMYK
cmyk(9%, 2%, 0%, 82%)
Oklch
oklch(29.5% 0.005 219.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#1D1C1F

Ink Black · Black · Dark Stone

HEX
#1D1C1F
RGB
rgb(29, 28, 31)
HSL
hsl(260, 5%, 12%)
HSB
hsb(260, 10%, 12%)
CMYK
cmyk(6%, 10%, 0%, 88%)
Oklch
oklch(22.9% 0.006 301.1)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2D1A2
A1C3F2

Analogous

F2A8A1
F2D1A2
EBF2A1

Triadic

F2D1A2
A1F2D0
D0A1F2

Split-Comp.

F2D1A2
A1EBF2
A8A1F2

Tetradic

F2D1A2
A1F2A8
A1C3F2
F2A1EB

Contrast Matrix WCAG 2.1 Contrast

F2D1A2
7E9179
454F4F
2A2D2E
1D1C1F
—
2.3
Fail
5.8
AA
9.5
AAA
11.6
AAA
2.3
Fail
—
2.5
Fail
4.1
AA Large
5.0
AA
5.8
AA
2.5
Fail
—
1.6
Fail
2.0
Fail
9.5
AAA
4.1
AA Large
1.6
Fail
—
1.2
Fail
11.6
AAA
5.0
AA
2.0
Fail
1.2
Fail
—
White BG
1.5Fail
3.4AA Large
8.5AAA
13.9AAA
17.0AAA
Black BG
14.4AAA
6.2AA
2.5Fail
1.5Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E3AD
86867F
49494F
2B2B2E
1D1D1E

Deuteranopia

E6E8B0
858480
49484F
2B2B2E
1D1D1E

Tritanopia

F0B6B8
7F8384
464F4F
2A2E2E
1D1E1E

Achromatopsia

D6D6D6
898989
4C4C4C
2C2C2C
1D1D1D

Shades & Tints Shades & Tints

#F2D1A2

Dark
Light

#7E9179

Dark
Light

#454F4F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2d1a2;
  --color-2: #7e9179;
  --color-3: #454f4f;
  --color-4: #2a2d2e;
  --color-5: #1d1c1f;
}

SCSS

$color-1: #f2d1a2;
$color-2: #7e9179;
$color-3: #454f4f;
$color-4: #2a2d2e;
$color-5: #1d1c1f;

TAILWIND

colors: {
  'brand-1': '#f2d1a2',
  'brand-2': '#7e9179',
  'brand-3': '#454f4f',
  'brand-4': '#2a2d2e',
  'brand-5': '#1d1c1f',
}

RGB Array

[242, 209, 162], [126, 145, 121], [69, 79, 79], [42, 45, 46], [29, 28, 31]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2D1A2, #7E9179, #454F4F, #2A2D2E, #1D1C1F is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f2d1a2; --color-2: #7e9179; --color-3: #454f4f; --color-4: #2a2d2e; --color-5: #1d1c1f. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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