← Back to Editor

#67666B · #886B67 · #A86F66 · #F88863 · #D9B070

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#67666B

Ink Gray · DimGray · Warm Gray

HEX
#67666B
RGB
rgb(103, 102, 107)
HSL
hsl(252, 2%, 41%)
HSB
hsb(252, 5%, 42%)
CMYK
cmyk(4%, 5%, 0%, 58%)
Oklch
oklch(51.3% 0.008 295.3)

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

#886B67

Crimson · DimGray · Passion Red

HEX
#886B67
RGB
rgb(136, 107, 103)
HSL
hsl(7, 14%, 47%)
HSB
hsb(7, 24%, 53%)
CMYK
cmyk(0%, 21%, 24%, 47%)
Oklch
oklch(55.5% 0.038 27.4)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#A86F66

Crimson · Gray · Passion Red

HEX
#A86F66
RGB
rgb(168, 111, 102)
HSL
hsl(8, 27%, 53%)
HSB
hsb(8, 39%, 66%)
CMYK
cmyk(0%, 34%, 39%, 34%)
Oklch
oklch(59.9% 0.075 29.3)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#F88863

Apricot · Salmon · Warm Sun

HEX
#F88863
RGB
rgb(248, 136, 99)
HSL
hsl(15, 91%, 68%)
HSB
hsb(15, 60%, 97%)
CMYK
cmyk(0%, 45%, 60%, 3%)
Oklch
oklch(74.2% 0.146 38.9)

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

#D9B070

Ginger · BurlyWood · Warm Sun

HEX
#D9B070
RGB
rgb(217, 176, 112)
HSL
hsl(37, 58%, 65%)
HSB
hsb(37, 48%, 85%)
CMYK
cmyk(0%, 19%, 48%, 15%)
Oklch
oklch(78.0% 0.095 77.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

67666B
6A6B66

Analogous

66686B
67666B
69666B

Triadic

67666B
6B6766
666B67

Split-Comp.

67666B
6B6966
686B66

Tetradic

67666B
6B6668
6A6B66
666B69

Contrast Matrix WCAG 2.1 Contrast

67666B
886B67
A86F66
F88863
D9B070
—
1.2
Fail
1.4
Fail
2.4
Fail
2.8
Fail
1.2
Fail
—
1.2
Fail
2.0
Fail
2.4
Fail
1.4
Fail
1.2
Fail
—
1.7
Fail
2.0
Fail
2.4
Fail
2.0
Fail
1.7
Fail
—
1.2
Fail
2.8
Fail
2.4
Fail
2.0
Fail
1.2
Fail
—
White BG
5.7AA
4.8AA
4.1AA Large
2.4Fail
2.0Fail
Black BG
3.7AA Large
4.3AA Large
5.1AA
8.7AAA
10.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

67676A
7B7B68
8F8F68
C8C66C
C7C77F

Deuteranopia

676769
7D7F68
939769
CED66E
CACD83

Tritanopia

676969
876969
A56A6A
F27375
D78C8E

Achromatopsia

676767
737373
7F7F7F
A5A5A5
B5B5B5

Shades & Tints Shades & Tints

#67666B

Dark
Light

#886B67

Dark
Light

#A86F66

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #67666b;
  --color-2: #886b67;
  --color-3: #a86f66;
  --color-4: #f88863;
  --color-5: #d9b070;
}

SCSS

$color-1: #67666b;
$color-2: #886b67;
$color-3: #a86f66;
$color-4: #f88863;
$color-5: #d9b070;

TAILWIND

colors: {
  'brand-1': '#67666b',
  'brand-2': '#886b67',
  'brand-3': '#a86f66',
  'brand-4': '#f88863',
  'brand-5': '#d9b070',
}

RGB Array

[103, 102, 107], [136, 107, 103], [168, 111, 102], [248, 136, 99], [217, 176, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #67666B, #886B67, #A86F66, #F88863, #D9B070 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: #67666b; --color-2: #886b67; --color-3: #a86f66; --color-4: #f88863; --color-5: #d9b070. 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 cool-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