← Back to Editor

#67849F · #8B9C99 · #AFB393 · #C3C8C3 · #D5DDF3

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#67849F

Slate Blue · LightSlateGray · Navy Blue

HEX
#67849F
RGB
rgb(103, 132, 159)
HSL
hsl(209, 23%, 51%)
HSB
hsb(209, 35%, 62%)
CMYK
cmyk(35%, 17%, 0%, 38%)
Oklch
oklch(60.1% 0.053 246.9)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#8B9C99

Mineral Blue · LightSlateGray · Silver Sand

HEX
#8B9C99
RGB
rgb(139, 156, 153)
HSL
hsl(169, 8%, 58%)
HSB
hsb(169, 11%, 61%)
CMYK
cmyk(11%, 0%, 2%, 39%)
Oklch
oklch(67.8% 0.020 184.0)

Traditional「Mineral Blue」· Paint「Silver Sand」· Creative Urban Concrete

#AFB393

Fresh Green · DarkGray · Sunflower

HEX
#AFB393
RGB
rgb(175, 179, 147)
HSL
hsl(67, 17%, 64%)
HSB
hsb(67, 18%, 70%)
CMYK
cmyk(2%, 0%, 18%, 30%)
Oklch
oklch(75.5% 0.044 113.3)

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

#C3C8C3

Silver Gray · Silver · Pearl Gray

HEX
#C3C8C3
RGB
rgb(195, 200, 195)
HSL
hsl(120, 4%, 77%)
HSB
hsb(120, 3%, 78%)
CMYK
cmyk(3%, 0%, 3%, 22%)
Oklch
oklch(82.7% 0.009 145.5)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#D5DDF3

Azure · Lavender · Sky Blue

HEX
#D5DDF3
RGB
rgb(213, 221, 243)
HSL
hsl(224, 56%, 89%)
HSB
hsb(224, 12%, 95%)
CMYK
cmyk(12%, 9%, 0%, 5%)
Oklch
oklch(89.8% 0.031 269.8)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

67849F
9F8165

Analogous

659F9E
67849F
65669F

Triadic

67849F
9F6583
839F65

Split-Comp.

67849F
9F6566
9F9E65

Tetradic

67849F
9E659F
9F8165
669F65

Contrast Matrix WCAG 2.1 Contrast

67849F
8B9C99
AFB393
C3C8C3
D5DDF3
—
1.4
Fail
1.8
Fail
2.3
Fail
2.9
Fail
1.4
Fail
—
1.3
Fail
1.7
Fail
2.1
Fail
1.8
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
2.3
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
2.9
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
White BG
3.9AA Large
2.9Fail
2.2Fail
1.7Fail
1.4Fail
Black BG
5.4AA
7.3AAA
9.7AAA
12.4AAA
15.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

747498
92939A
B1B19B
C5C5C4
D8D9EE

Deuteranopia

727097
91909A
B1B09D
C5C5C5
D8D7EC

Tritanopia

689392
8C9A9A
AFA1A2
C3C5C5
D5E9E9

Achromatopsia

7E7E7E
979797
AEAEAE
C6C6C6
DDDDDD

Shades & Tints Shades & Tints

#67849F

Dark
Light

#8B9C99

Dark
Light

#AFB393

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #67849f;
  --color-2: #8b9c99;
  --color-3: #afb393;
  --color-4: #c3c8c3;
  --color-5: #d5ddf3;
}

SCSS

$color-1: #67849f;
$color-2: #8b9c99;
$color-3: #afb393;
$color-4: #c3c8c3;
$color-5: #d5ddf3;

TAILWIND

colors: {
  'brand-1': '#67849f',
  'brand-2': '#8b9c99',
  'brand-3': '#afb393',
  'brand-4': '#c3c8c3',
  'brand-5': '#d5ddf3',
}

RGB Array

[103, 132, 159], [139, 156, 153], [175, 179, 147], [195, 200, 195], [213, 221, 243]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #67849F, #8B9C99, #AFB393, #C3C8C3, #D5DDF3 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. 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: #67849f; --color-2: #8b9c99; --color-3: #afb393; --color-4: #c3c8c3; --color-5: #d5ddf3. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 beauty, lifestyle, arts 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