#83848C + #9CB3B9 + #B4E2E5 + #DAE9CF + #FFF0B8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#83848C

Ash · Gray · Warm Gray

HEX

#83848C

RGB

rgb(131, 132, 140)

HSL

hsl(233, 4%, 53%)

HSB

hsb(233, 6%, 55%)

CMYK

cmyk(6%, 6%, 0%, 45%)

Oklch

oklch(61.5% 0.012 280.3)

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

#9CB3B9

Sky Blue · DarkGray · Lake Green

HEX

#9CB3B9

RGB

rgb(156, 179, 185)

HSL

hsl(192, 17%, 67%)

HSB

hsb(192, 16%, 73%)

CMYK

cmyk(16%, 3%, 0%, 27%)

Oklch

oklch(75.1% 0.027 215.2)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#B4E2E5

Sky Blue · LightBlue · Glacier Blue

HEX

#B4E2E5

RGB

rgb(180, 226, 229)

HSL

hsl(184, 49%, 80%)

HSB

hsb(184, 21%, 90%)

CMYK

cmyk(21%, 1%, 0%, 10%)

Oklch

oklch(88.1% 0.048 201.3)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#DAE9CF

Celadon · LightGray · Mint Green

HEX

#DAE9CF

RGB

rgb(218, 233, 207)

HSL

hsl(95, 37%, 86%)

HSB

hsb(95, 11%, 91%)

CMYK

cmyk(6%, 0%, 11%, 9%)

Oklch

oklch(91.6% 0.038 131.8)

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

#FFF0B8

Goose Yellow · Bisque · Lemon Cream

HEX

#FFF0B8

RGB

rgb(255, 240, 184)

HSL

hsl(47, 100%, 86%)

HSB

hsb(47, 28%, 100%)

CMYK

cmyk(0%, 6%, 28%, 0%)

Oklch

oklch(95.4% 0.073 94.9)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

83848C

8C8B82

Analogous

82888C

83848C

86828C

Triadic

83848C

8C8283

838C82

Split-Comp.

83848C

8C8682

888C82

Tetradic

83848C

8C8288

8C8B82

828C86

Contrast Matrix WCAG 2.1 Contrast

83848C	9CB3B9	B4E2E5	DAE9CF	FFF0B8
—	1.7 Fail	2.6 Fail	2.9 Fail	3.3 AA Large
1.7 Fail	—	1.6 Fail	1.7 Fail	1.9 Fail
2.6 Fail	1.6 Fail	—	1.1 Fail	1.2 Fail
2.9 Fail	1.7 Fail	1.1 Fail	—	1.1 Fail
3.3 AA Large	1.9 Fail	1.2 Fail	1.1 Fail	—

White BG

3.7AA Large

2.2Fail

1.4Fail

1.3Fail

1.1Fail

Black BG

5.6AA

9.6AAA

15.0AAA

16.5AAA

18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

83838A

A6A6B8

C8C8E4

E0E1D5

F9F8C6

Deuteranopia

83838A

A5A3B7

C5C2E4

E0DFD7

F9FBC9

Tritanopia

838988

9DB6B6

B6E4E4

DBDADB

FED0D3

Achromatopsia

858585

ADADAD

D5D5D5

E2E2E2

EEEEEE

Shades & Tints Shades & Tints

#83848C

Dark

Light

#9CB3B9

Dark

Light

#B4E2E5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #83848c;
  --color-2: #9cb3b9;
  --color-3: #b4e2e5;
  --color-4: #dae9cf;
  --color-5: #fff0b8;
}

SCSS

$color-1: #83848c;
$color-2: #9cb3b9;
$color-3: #b4e2e5;
$color-4: #dae9cf;
$color-5: #fff0b8;

TAILWIND

colors: {
  'brand-1': '#83848c',
  'brand-2': '#9cb3b9',
  'brand-3': '#b4e2e5',
  'brand-4': '#dae9cf',
  'brand-5': '#fff0b8',
}

RGB Array

[131, 132, 140], [156, 179, 185], [180, 226, 229], [218, 233, 207], [255, 240, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #83848C, #9CB3B9, #B4E2E5, #DAE9CF, #FFF0B8 is ideal for: health products, baby brands, fresh-style blogs. 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: #83848c; --color-2: #9cb3b9; --color-3: #b4e2e5; --color-4: #dae9cf; --color-5: #fff0b8. 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 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