← Back to Editor

#F79463 · #D97B6C · #BD7187 · #A36790 · #825487

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F79463

Apricot · SandyBrown · Warm Sun

HEX
#F79463
RGB
rgb(247, 148, 99)
HSL
hsl(20, 90%, 68%)
HSB
hsb(20, 60%, 97%)
CMYK
cmyk(0%, 40%, 60%, 3%)
Oklch
oklch(76.0% 0.136 46.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#D97B6C

Peach Pink · LightCoral · Coral Red

HEX
#D97B6C
RGB
rgb(217, 123, 108)
HSL
hsl(8, 59%, 64%)
HSB
hsb(8, 50%, 85%)
CMYK
cmyk(0%, 43%, 50%, 15%)
Oklch
oklch(68.3% 0.120 30.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#BD7187

Dark Violet · LightCoral · Rose Pink

HEX
#BD7187
RGB
rgb(189, 113, 135)
HSL
hsl(343, 37%, 59%)
HSB
hsb(343, 40%, 74%)
CMYK
cmyk(0%, 40%, 29%, 26%)
Oklch
oklch(63.7% 0.099 1.6)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#A36790

Rose Purple · Gray · Violet

HEX
#A36790
RGB
rgb(163, 103, 144)
HSL
hsl(319, 25%, 52%)
HSB
hsb(319, 37%, 64%)
CMYK
cmyk(0%, 37%, 12%, 36%)
Oklch
oklch(59.2% 0.094 339.4)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#825487

Dark Plum · DimGray · Violet

HEX
#825487
RGB
rgb(130, 84, 135)
HSL
hsl(294, 23%, 43%)
HSB
hsb(294, 38%, 53%)
CMYK
cmyk(4%, 38%, 0%, 47%)
Oklch
oklch(51.6% 0.095 323.4)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F79463
64C6F7

Analogous

F7647C
F79463
F7DE64

Triadic

F79463
64F795
9564F7

Split-Comp.

F79463
64F7DE
647CF7

Tetradic

F79463
7CF764
64C6F7
DE64F7

Contrast Matrix WCAG 2.1 Contrast

F79463
D97B6C
BD7187
A36790
825487
—
1.3
Fail
1.6
Fail
1.9
Fail
2.6
Fail
1.3
Fail
—
1.2
Fail
1.4
Fail
2.0
Fail
1.6
Fail
1.2
Fail
—
1.2
Fail
1.6
Fail
1.9
Fail
1.4
Fail
1.2
Fail
—
1.4
Fail
2.6
Fail
2.0
Fail
1.6
Fail
1.4
Fail
—
White BG
2.2Fail
3.0Fail
3.6AA Large
4.3AA Large
5.9AA
Black BG
9.4AAA
7.0AAA
5.9AA
4.9AA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCB6F
B0AF70
9C9B82
898886
6E6E7B

Deuteranopia

D2D972
B6BD71
A1A680
8D9184
717478

Tritanopia

F2787A
D47273
B97D7D
A07E7D
80716F

Achromatopsia

ACACAC
959595
8A8A8A
7E7E7E
686868

Shades & Tints Shades & Tints

#F79463

Dark
Light

#D97B6C

Dark
Light

#BD7187

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f79463;
  --color-2: #d97b6c;
  --color-3: #bd7187;
  --color-4: #a36790;
  --color-5: #825487;
}

SCSS

$color-1: #f79463;
$color-2: #d97b6c;
$color-3: #bd7187;
$color-4: #a36790;
$color-5: #825487;

TAILWIND

colors: {
  'brand-1': '#f79463',
  'brand-2': '#d97b6c',
  'brand-3': '#bd7187',
  'brand-4': '#a36790',
  'brand-5': '#825487',
}

RGB Array

[247, 148, 99], [217, 123, 108], [189, 113, 135], [163, 103, 144], [130, 84, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #F79463, #D97B6C, #BD7187, #A36790, #825487 is ideal for: corporate websites, product showcases, portfolios. 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: #f79463; --color-2: #d97b6c; --color-3: #bd7187; --color-4: #a36790; --color-5: #825487. 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. 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. 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