← Back to Editor

#BED9DA · #A4BFD0 · #789EC1 · #686666 · #82836C

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 Library

Color Details Color Details

#BED9DA

Sky Blue · LightBlue · Glacier Blue

HEX
#BED9DA
RGB
rgb(190, 217, 218)
HSL
hsl(182, 27%, 80%)
HSB
hsb(182, 13%, 85%)
CMYK
cmyk(13%, 0%, 0%, 15%)
Oklch
oklch(86.6% 0.029 199.4)

TraditionalSky Blue」· PaintGlacier Blue」· Creative Arctic Pool

#A4BFD0

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#A4BFD0
RGB
rgb(164, 191, 208)
HSL
hsl(203, 32%, 73%)
HSB
hsb(203, 21%, 82%)
CMYK
cmyk(21%, 8%, 0%, 18%)
Oklch
oklch(79.0% 0.038 235.6)

TraditionalSky Blue」· PaintCobalt Blue」· Creative Twilight Haze

#789EC1

Sky Blue · CadetBlue · Cobalt Blue

HEX
#789EC1
RGB
rgb(120, 158, 193)
HSL
hsl(209, 37%, 61%)
HSB
hsb(209, 38%, 76%)
CMYK
cmyk(38%, 18%, 0%, 24%)
Oklch
oklch(68.4% 0.067 246.7)

TraditionalSky Blue」· PaintCobalt Blue」· Creative Twilight Haze

#686666

Ink Gray · DimGray · Charcoal

HEX
#686666
RGB
rgb(104, 102, 102)
HSL
hsl(0, 1%, 40%)
HSB
hsb(0, 2%, 41%)
CMYK
cmyk(0%, 2%, 2%, 59%)
Oklch
oklch(51.2% 0.003 17.2)

TraditionalInk Gray」· PaintCharcoal」· Creative Midnight Shadow

#82836C

Autumn Sage · Gray · Honey Gold

HEX
#82836C
RGB
rgb(130, 131, 108)
HSL
hsl(63, 10%, 47%)
HSB
hsb(63, 18%, 51%)
CMYK
cmyk(1%, 0%, 18%, 49%)
Oklch
oklch(60.3% 0.034 109.4)

TraditionalAutumn Sage」· PaintHoney Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BED9DA
DABFBE

Analogous

BEDACD
BED9DA
BECBDA

Triadic

BED9DA
DABED9
D9DABE

Split-Comp.

BED9DA
DABECB
DACDBE

Tetradic

BED9DA
CDBEDA
DABFBE
CBDABE

Contrast Matrix WCAG 2.1 Contrast

BED9DA
A4BFD0
789EC1
686666
82836C
1.3
Fail
1.9
Fail
3.8
AA Large
2.6
Fail
1.3
Fail
1.5
Fail
3.0
Fail
2.0
Fail
1.9
Fail
1.5
Fail
2.0
Fail
1.4
Fail
3.8
AA Large
3.0
Fail
2.0
Fail
1.5
Fail
2.6
Fail
2.0
Fail
1.4
Fail
1.5
Fail
White BG
1.5Fail
1.9Fail
2.8Fail
5.7AA
3.9AA Large
Black BG
14.1AAA
10.9AAA
7.5AAA
3.7AA Large
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACADA
B0B0CC
8889B9
676766
828272

Deuteranopia

C8C6DA
AEACCB
8683B7
676766
828273

Tritanopia

BFDADA
A5C9C8
7AB2B0
686666
827677

Achromatopsia

D1D1D1
B9B9B9
979797
676767
808080

Shades & Tints Shades & Tints

#BED9DA

Dark
Light

#A4BFD0

Dark
Light

#789EC1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bed9da;
  --color-2: #a4bfd0;
  --color-3: #789ec1;
  --color-4: #686666;
  --color-5: #82836c;
}

SCSS

$color-1: #bed9da;
$color-2: #a4bfd0;
$color-3: #789ec1;
$color-4: #686666;
$color-5: #82836c;

TAILWIND

colors: {
  'brand-1': '#bed9da',
  'brand-2': '#a4bfd0',
  'brand-3': '#789ec1',
  'brand-4': '#686666',
  'brand-5': '#82836c',
}

RGB Array

[190, 217, 218], [164, 191, 208], [120, 158, 193], [104, 102, 102], [130, 131, 108]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BED9DA, #A4BFD0, #789EC1, #686666, #82836C 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: #bed9da; --color-2: #a4bfd0; --color-3: #789ec1; --color-4: #686666; --color-5: #82836c. 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