← Back to Editor

#696161 · #E86868 · #F5A164 · #D2D950 · #DBE8BF

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#696161

Ink Gray · DimGray · Charcoal

HEX
#696161
RGB
rgb(105, 97, 97)
HSL
hsl(0, 4%, 40%)
HSB
hsb(0, 8%, 41%)
CMYK
cmyk(0%, 8%, 8%, 59%)
Oklch
oklch(50.0% 0.010 17.5)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#E86868

Peach Pink · Salmon · Coral Red

HEX
#E86868
RGB
rgb(232, 104, 104)
HSL
hsl(0, 74%, 66%)
HSB
hsb(0, 55%, 91%)
CMYK
cmyk(0%, 55%, 55%, 9%)
Oklch
oklch(67.4% 0.160 22.3)

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

#F5A164

Apricot · SandyBrown · Warm Sun

HEX
#F5A164
RGB
rgb(245, 161, 100)
HSL
hsl(25, 88%, 68%)
HSB
hsb(25, 59%, 96%)
CMYK
cmyk(0%, 34%, 59%, 4%)
Oklch
oklch(78.0% 0.126 55.6)

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

#D2D950

Autumn Sage · GreenYellow · Sunflower

HEX
#D2D950
RGB
rgb(210, 217, 80)
HSL
hsl(63, 64%, 58%)
HSB
hsb(63, 63%, 85%)
CMYK
cmyk(3%, 0%, 63%, 15%)
Oklch
oklch(85.5% 0.157 112.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#DBE8BF

Willow Green · LightGray · Mint Green

HEX
#DBE8BF
RGB
rgb(219, 232, 191)
HSL
hsl(79, 47%, 83%)
HSB
hsb(79, 18%, 91%)
CMYK
cmyk(6%, 0%, 18%, 9%)
Oklch
oklch(91.1% 0.056 121.8)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

696161
626A6A

Analogous

6A6266
696161
6A6662

Triadic

696161
626A62
62626A

Split-Comp.

696161
626A66
62666A

Tetradic

696161
666A62
626A6A
66626A

Contrast Matrix WCAG 2.1 Contrast

696161
E86868
F5A164
D2D950
DBE8BF
—
1.9
Fail
2.9
Fail
4.0
AA Large
4.7
AA
1.9
Fail
—
1.5
Fail
2.1
Fail
2.5
Fail
2.9
Fail
1.5
Fail
—
1.4
Fail
1.6
Fail
4.0
AA Large
2.1
Fail
1.4
Fail
—
1.2
Fail
4.7
AA
2.5
Fail
1.6
Fail
1.2
Fail
—
White BG
6.0AA
3.2AA Large
2.1Fail
1.5Fail
1.3Fail
Black BG
3.5AA Large
6.6AA
10.2AAA
13.8AAA
16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

666561
B1AF68
D1D073
D5D571
E1E1C9

Deuteranopia

666761
B8C268
D6DC76
D5D479
E0DFCB

Tritanopia

696161
E26868
F17E81
D28B91
DCD1D2

Achromatopsia

636363
8E8E8E
B3B3B3
C7C7C7
DFDFDF

Shades & Tints Shades & Tints

#696161

Dark
Light

#E86868

Dark
Light

#F5A164

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #696161;
  --color-2: #e86868;
  --color-3: #f5a164;
  --color-4: #d2d950;
  --color-5: #dbe8bf;
}

SCSS

$color-1: #696161;
$color-2: #e86868;
$color-3: #f5a164;
$color-4: #d2d950;
$color-5: #dbe8bf;

TAILWIND

colors: {
  'brand-1': '#696161',
  'brand-2': '#e86868',
  'brand-3': '#f5a164',
  'brand-4': '#d2d950',
  'brand-5': '#dbe8bf',
}

RGB Array

[105, 97, 97], [232, 104, 104], [245, 161, 100], [210, 217, 80], [219, 232, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #696161, #E86868, #F5A164, #D2D950, #DBE8BF is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #696161; --color-2: #e86868; --color-3: #f5a164; --color-4: #d2d950; --color-5: #dbe8bf. 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. 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