← Back to Editor

#272D40 · #454C59 · #BFB79F · #F2E1C2 · #A69D8D

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

#272D40

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#272D40
RGB
rgb(39, 45, 64)
HSL
hsl(226, 24%, 20%)
HSB
hsb(226, 39%, 25%)
CMYK
cmyk(39%, 30%, 0%, 75%)
Oklch
oklch(30.0% 0.036 270.6)

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

#454C59

Indigo · DarkSlateGray · Prussian Blue

HEX
#454C59
RGB
rgb(69, 76, 89)
HSL
hsl(219, 13%, 31%)
HSB
hsb(219, 22%, 35%)
CMYK
cmyk(22%, 15%, 0%, 65%)
Oklch
oklch(41.5% 0.024 262.9)

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

#BFB79F

Ginger · Tan · Sunflower

HEX
#BFB79F
RGB
rgb(191, 183, 159)
HSL
hsl(45, 20%, 69%)
HSB
hsb(45, 17%, 75%)
CMYK
cmyk(0%, 4%, 17%, 25%)
Oklch
oklch(78.0% 0.034 91.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#F2E1C2

Goose Yellow · Bisque · Peach Orange

HEX
#F2E1C2
RGB
rgb(242, 225, 194)
HSL
hsl(39, 65%, 85%)
HSB
hsb(39, 20%, 95%)
CMYK
cmyk(0%, 7%, 20%, 5%)
Oklch
oklch(91.5% 0.045 82.6)

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

#A69D8D

Ginger · DarkGray · Warm Sun

HEX
#A69D8D
RGB
rgb(166, 157, 141)
HSL
hsl(38, 12%, 60%)
HSB
hsb(38, 15%, 65%)
CMYK
cmyk(0%, 5%, 15%, 35%)
Oklch
oklch(69.9% 0.025 82.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

272D40
3F3A27

Analogous

27393F
272D40
2D273F

Triadic

272D40
3F272C
2C3F27

Split-Comp.

272D40
3F2D27
393F27

Tetradic

272D40
3F2739
3F3A27
273F2D

Contrast Matrix WCAG 2.1 Contrast

272D40
454C59
BFB79F
F2E1C2
A69D8D
—
1.6
Fail
6.8
AA
10.6
AAA
5.1
AA
1.6
Fail
—
4.3
AA Large
6.7
AA
3.2
AA Large
6.8
AA
4.3
AA Large
—
1.6
Fail
1.3
Fail
10.6
AAA
6.7
AA
1.6
Fail
—
2.1
Fail
5.1
AA
3.2
AA Large
1.3
Fail
2.1
Fail
—
White BG
13.7AAA
8.6AAA
2.0Fail
1.3Fail
2.7Fail
Black BG
1.5Fail
2.4Fail
10.5AAA
16.3AAA
7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2A3B
484856
BCBBA5
EBEACA
A2A291

Deuteranopia

29293A
484755
BCBDA6
ECEDCB
A3A392

Tritanopia

273837
455353
BFA9AA
F1CFD1
A69495

Achromatopsia

2D2D2D
4B4B4B
B7B7B7
E3E3E3
9E9E9E

Shades & Tints Shades & Tints

#272D40

Dark
Light

#454C59

Dark
Light

#BFB79F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #272d40;
  --color-2: #454c59;
  --color-3: #bfb79f;
  --color-4: #f2e1c2;
  --color-5: #a69d8d;
}

SCSS

$color-1: #272d40;
$color-2: #454c59;
$color-3: #bfb79f;
$color-4: #f2e1c2;
$color-5: #a69d8d;

TAILWIND

colors: {
  'brand-1': '#272d40',
  'brand-2': '#454c59',
  'brand-3': '#bfb79f',
  'brand-4': '#f2e1c2',
  'brand-5': '#a69d8d',
}

RGB Array

[39, 45, 64], [69, 76, 89], [191, 183, 159], [242, 225, 194], [166, 157, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #272D40, #454C59, #BFB79F, #F2E1C2, #A69D8D is ideal for: brand design, premium product pages, magazine layouts, 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: #272d40; --color-2: #454c59; --color-3: #bfb79f; --color-4: #f2e1c2; --color-5: #a69d8d. 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. 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