← Back to Editor

#DBDDB8 · #BBC7B9 · #93B4C5 · #858CA9 · #696281

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DBDDB8

Fresh Green · Wheat · Lemon Cream

HEX
#DBDDB8
RGB
rgb(219, 221, 184)
HSL
hsl(63, 35%, 79%)
HSB
hsb(63, 17%, 87%)
CMYK
cmyk(1%, 0%, 17%, 13%)
Oklch
oklch(88.6% 0.049 109.9)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#BBC7B9

Celadon · Silver · Apple Green

HEX
#BBC7B9
RGB
rgb(187, 199, 185)
HSL
hsl(111, 11%, 75%)
HSB
hsb(111, 7%, 78%)
CMYK
cmyk(6%, 0%, 7%, 22%)
Oklch
oklch(81.6% 0.023 141.2)

TraditionalCeladon」· PaintApple Green」· Creative Mint Breeze

#93B4C5

Sky Blue · DarkGray · Cobalt Blue

HEX
#93B4C5
RGB
rgb(147, 180, 197)
HSL
hsl(200, 30%, 67%)
HSB
hsb(200, 25%, 77%)
CMYK
cmyk(25%, 9%, 0%, 23%)
Oklch
oklch(75.1% 0.043 230.4)

TraditionalSky Blue」· PaintCobalt Blue」· Creative Twilight Haze

#858CA9

Azure · LightSlateGray · Navy Blue

HEX
#858CA9
RGB
rgb(133, 140, 169)
HSL
hsl(228, 17%, 59%)
HSB
hsb(228, 21%, 66%)
CMYK
cmyk(21%, 17%, 0%, 34%)
Oklch
oklch(64.5% 0.044 274.4)

TraditionalAzure」· PaintNavy Blue」· Creative Blush Sunrise

#696281

Deep Indigo · DimGray · Navy Blue

HEX
#696281
RGB
rgb(105, 98, 129)
HSL
hsl(254, 14%, 45%)
HSB
hsb(254, 24%, 51%)
CMYK
cmyk(19%, 24%, 0%, 49%)
Oklch
oklch(51.4% 0.049 295.0)

TraditionalDeep Indigo」· PaintNavy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DBDDB8
B9B7DC

Analogous

DCCBB7
DBDDB8
C8DCB7

Triadic

DBDDB8
B7DADC
DCB7DA

Split-Comp.

DBDDB8
B7C8DC
CBB7DC

Tetradic

DBDDB8
B7DCCB
B9B7DC
DCB7C8

Contrast Matrix WCAG 2.1 Contrast

DBDDB8
BBC7B9
93B4C5
858CA9
696281
1.3
Fail
1.6
Fail
2.4
Fail
4.1
AA Large
1.3
Fail
1.3
Fail
1.9
Fail
3.3
AA Large
1.6
Fail
1.3
Fail
1.5
Fail
2.6
Fail
2.4
Fail
1.9
Fail
1.5
Fail
1.7
Fail
4.1
AA Large
3.3
AA Large
2.6
Fail
1.7
Fail
White BG
1.4Fail
1.8Fail
2.2Fail
3.3AA Large
5.7AA
Black BG
15.0AAA
12.0AAA
9.6AAA
6.3AA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCC1
C0C0BC
A1A2C1
8888A2
666679

Deuteranopia

DCDCC3
C0BFBD
9F9DC0
8887A0
666778

Tritanopia

DBC8CA
BCBFC0
95BEBD
859C9B
697472

Achromatopsia

D8D8D8
C2C2C2
ACACAC
8D8D8D
686868

Shades & Tints Shades & Tints

#DBDDB8

Dark
Light

#BBC7B9

Dark
Light

#93B4C5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dbddb8;
  --color-2: #bbc7b9;
  --color-3: #93b4c5;
  --color-4: #858ca9;
  --color-5: #696281;
}

SCSS

$color-1: #dbddb8;
$color-2: #bbc7b9;
$color-3: #93b4c5;
$color-4: #858ca9;
$color-5: #696281;

TAILWIND

colors: {
  'brand-1': '#dbddb8',
  'brand-2': '#bbc7b9',
  'brand-3': '#93b4c5',
  'brand-4': '#858ca9',
  'brand-5': '#696281',
}

RGB Array

[219, 221, 184], [187, 199, 185], [147, 180, 197], [133, 140, 169], [105, 98, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DBDDB8, #BBC7B9, #93B4C5, #858CA9, #696281 is ideal for: brand design, premium product pages, magazine layouts. 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: #dbddb8; --color-2: #bbc7b9; --color-3: #93b4c5; --color-4: #858ca9; --color-5: #696281. 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 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