← Back to Editor

#1B4961 · #F3EBD4 · #768187 · #A7997C · #809586

dark

A 5-color dark 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

#1B4961

Lake Blue · DarkSlateGray · Prussian Blue

HEX
#1B4961
RGB
rgb(27, 73, 97)
HSL
hsl(201, 56%, 24%)
HSB
hsb(201, 72%, 38%)
CMYK
cmyk(72%, 25%, 0%, 62%)
Oklch
oklch(38.5% 0.064 234.8)

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

#F3EBD4

Goose Yellow · Beige · Lemon Cream

HEX
#F3EBD4
RGB
rgb(243, 235, 212)
HSL
hsl(45, 56%, 89%)
HSB
hsb(45, 13%, 95%)
CMYK
cmyk(0%, 3%, 13%, 5%)
Oklch
oklch(94.0% 0.032 91.0)

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

#768187

Ink Gray · SlateGray · Warm Gray

HEX
#768187
RGB
rgb(118, 129, 135)
HSL
hsl(201, 7%, 50%)
HSB
hsb(201, 13%, 53%)
CMYK
cmyk(13%, 4%, 0%, 47%)
Oklch
oklch(59.6% 0.016 231.4)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#A7997C

Ginger · Gray · Sunflower

HEX
#A7997C
RGB
rgb(167, 153, 124)
HSL
hsl(40, 20%, 57%)
HSB
hsb(40, 26%, 65%)
CMYK
cmyk(0%, 8%, 26%, 35%)
Oklch
oklch(68.7% 0.044 85.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#809586

Celadon · Gray · Warm Gray

HEX
#809586
RGB
rgb(128, 149, 134)
HSL
hsl(137, 9%, 54%)
HSB
hsb(137, 14%, 58%)
CMYK
cmyk(14%, 0%, 10%, 42%)
Oklch
oklch(64.9% 0.033 154.3)

Traditional「Celadon」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1B4961
5F331B

Analogous

1B5F55
1B4961
1B255F

Triadic

1B4961
5F1B47
475F1B

Split-Comp.

1B4961
5F1B25
5F551B

Tetradic

1B4961
551B5F
5F331B
255F1B

Contrast Matrix WCAG 2.1 Contrast

1B4961
F3EBD4
768187
A7997C
809586
—
8.1
AAA
2.4
Fail
3.4
AA Large
3.0
AA Large
8.1
AAA
—
3.4
AA Large
2.4
Fail
2.7
Fail
2.4
Fail
3.4
AA Large
—
1.4
Fail
1.2
Fail
3.4
AA Large
2.4
Fail
1.4
Fail
—
1.1
Fail
3.0
AA Large
2.7
Fail
1.2
Fail
1.1
Fail
—
White BG
9.7AAA
1.2Fail
4.0AA Large
2.8Fail
3.2AA Large
Black BG
2.2Fail
17.6AAA
5.3AA
7.5AAA
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F5B
F0EFDA
7B7B86
A1A183
89898A

Deuteranopia

2C295A
F0F1DB
7A7985
A2A385
88868B

Tritanopia

1D5756
F3DEDF
778484
A6898A
818C8D

Achromatopsia

3E3E3E
EBEBEB
7E7E7E
9A9A9A
8D8D8D

Shades & Tints Shades & Tints

#1B4961

Dark
Light

#F3EBD4

Dark
Light

#768187

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1b4961;
  --color-2: #f3ebd4;
  --color-3: #768187;
  --color-4: #a7997c;
  --color-5: #809586;
}

SCSS

$color-1: #1b4961;
$color-2: #f3ebd4;
$color-3: #768187;
$color-4: #a7997c;
$color-5: #809586;

TAILWIND

colors: {
  'brand-1': '#1b4961',
  'brand-2': '#f3ebd4',
  'brand-3': '#768187',
  'brand-4': '#a7997c',
  'brand-5': '#809586',
}

RGB Array

[27, 73, 97], [243, 235, 212], [118, 129, 135], [167, 153, 124], [128, 149, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #1B4961, #F3EBD4, #768187, #A7997C, #809586 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: #1b4961; --color-2: #f3ebd4; --color-3: #768187; --color-4: #a7997c; --color-5: #809586. 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 dark-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