← Back to Editor

#F8C6C2 · #BDBAAB · #6F8282 · #715E57 · #0F0D0E

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

#F8C6C2

Peach Pink · Pink · Cherry Blossom

HEX
#F8C6C2
RGB
rgb(248, 198, 194)
HSL
hsl(4, 79%, 87%)
HSB
hsb(4, 22%, 97%)
CMYK
cmyk(0%, 20%, 22%, 3%)
Oklch
oklch(86.9% 0.058 23.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#BDBAAB

Fresh Green · Silver · Sunflower

HEX
#BDBAAB
RGB
rgb(189, 186, 171)
HSL
hsl(50, 12%, 71%)
HSB
hsb(50, 10%, 74%)
CMYK
cmyk(0%, 2%, 10%, 26%)
Oklch
oklch(78.7% 0.021 97.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#6F8282

Slate Blue · SlateGray · Warm Gray

HEX
#6F8282
RGB
rgb(111, 130, 130)
HSL
hsl(180, 8%, 47%)
HSB
hsb(180, 15%, 51%)
CMYK
cmyk(15%, 0%, 0%, 49%)
Oklch
oklch(59.1% 0.022 196.6)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

#715E57

Tangerine · DimGray · Amber Brown

HEX
#715E57
RGB
rgb(113, 94, 87)
HSL
hsl(16, 13%, 39%)
HSB
hsb(16, 23%, 44%)
CMYK
cmyk(0%, 17%, 23%, 56%)
Oklch
oklch(49.8% 0.027 41.3)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#0F0D0E

Ink Black · Black · Jet Black

HEX
#0F0D0E
RGB
rgb(15, 13, 14)
HSL
hsl(330, 7%, 5%)
HSB
hsb(330, 13%, 6%)
CMYK
cmyk(0%, 13%, 7%, 94%)
Oklch
oklch(16.2% 0.004 345.8)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8C6C2
C4F5F8

Analogous

F8C4DA
F8C6C2
F8E1C4

Triadic

F8C6C2
C4F8C7
C7C4F8

Split-Comp.

F8C6C2
C4F8E1
C4DAF8

Tetradic

F8C6C2
DAF8C4
C4F5F8
E1C4F8

Contrast Matrix WCAG 2.1 Contrast

F8C6C2
BDBAAB
6F8282
715E57
0F0D0E
—
1.3
Fail
2.7
Fail
4.0
AA Large
12.8
AAA
1.3
Fail
—
2.1
Fail
3.1
AA Large
9.9
AAA
2.7
Fail
2.1
Fail
—
1.5
Fail
4.8
AA
4.0
AA Large
3.1
AA Large
1.5
Fail
—
3.2
AA Large
12.8
AAA
9.9
AAA
4.8
AA
3.2
AA Large
—
White BG
1.5Fail
1.9Fail
4.0AA Large
6.1AA
19.4AAA
Black BG
13.8AAA
10.8AAA
5.2AA
3.4AA Large
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E2C3
BCBCAF
777782
696959
0E0E0E

Deuteranopia

E5E9C3
BCBCB0
767582
6A6B59
0E0E0E

Tritanopia

F6C4C4
BDB1B2
708282
705A5A
0F0E0E

Achromatopsia

D4D4D4
B9B9B9
7C7C7C
636363
0E0E0E

Shades & Tints Shades & Tints

#F8C6C2

Dark
Light

#BDBAAB

Dark
Light

#6F8282

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8c6c2;
  --color-2: #bdbaab;
  --color-3: #6f8282;
  --color-4: #715e57;
  --color-5: #0f0d0e;
}

SCSS

$color-1: #f8c6c2;
$color-2: #bdbaab;
$color-3: #6f8282;
$color-4: #715e57;
$color-5: #0f0d0e;

TAILWIND

colors: {
  'brand-1': '#f8c6c2',
  'brand-2': '#bdbaab',
  'brand-3': '#6f8282',
  'brand-4': '#715e57',
  'brand-5': '#0f0d0e',
}

RGB Array

[248, 198, 194], [189, 186, 171], [111, 130, 130], [113, 94, 87], [15, 13, 14]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8C6C2, #BDBAAB, #6F8282, #715E57, #0F0D0E 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: #f8c6c2; --color-2: #bdbaab; --color-3: #6f8282; --color-4: #715e57; --color-5: #0f0d0e. 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