#99868C + #F4F4AE + #BCEFAD + #98CBAA + #6CA8A6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#99868C

Dark Violet · Gray · Silver Sand

HEX

#99868C

RGB

rgb(153, 134, 140)

HSL

hsl(341, 9%, 56%)

HSB

hsb(341, 12%, 60%)

CMYK

cmyk(0%, 12%, 8%, 40%)

Oklch

oklch(63.9% 0.024 356.8)

Traditional「Dark Violet」· Paint「Silver Sand」· Creative Urban Concrete

#F4F4AE

Fresh Green · Wheat · Lemon Cream

HEX

#F4F4AE

RGB

rgb(244, 244, 174)

HSL

hsl(60, 76%, 82%)

HSB

hsb(60, 29%, 96%)

CMYK

cmyk(0%, 0%, 29%, 4%)

Oklch

oklch(95.1% 0.089 108.0)

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

#BCEFAD

Emerald · Silver · Mint Green

HEX

#BCEFAD

RGB

rgb(188, 239, 173)

HSL

hsl(106, 67%, 81%)

HSB

hsb(106, 28%, 94%)

CMYK

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

Oklch

oklch(90.0% 0.103 138.7)

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

#98CBAA

Celadon · DarkSeaGreen · Apple Green

HEX

#98CBAA

RGB

rgb(152, 203, 170)

HSL

hsl(141, 33%, 70%)

HSB

hsb(141, 25%, 80%)

CMYK

cmyk(25%, 0%, 16%, 20%)

Oklch

oklch(79.7% 0.071 156.1)

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

#6CA8A6

Mineral Blue · CadetBlue · Lake Green

HEX

#6CA8A6

RGB

rgb(108, 168, 166)

HSL

hsl(178, 26%, 54%)

HSB

hsb(178, 36%, 66%)

CMYK

cmyk(36%, 0%, 1%, 34%)

Oklch

oklch(69.0% 0.062 193.1)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

99868C

859993

Analogous

998595

99868C

998885

Triadic

99868C

8B9985

858B99

Split-Comp.

99868C

859988

859599

Tetradic

99868C

959985

859993

888599

Contrast Matrix WCAG 2.1 Contrast

99868C	F4F4AE	BCEFAD	98CBAA	6CA8A6
—	3.0 Fail	2.6 Fail	1.9 Fail	1.3 Fail
3.0 Fail	—	1.1 Fail	1.6 Fail	2.4 Fail
2.6 Fail	1.1 Fail	—	1.4 Fail	2.1 Fail
1.9 Fail	1.6 Fail	1.4 Fail	—	1.5 Fail
1.3 Fail	2.4 Fail	2.1 Fail	1.5 Fail	—

White BG

3.4AA Large

1.1Fail

1.3Fail

1.8Fail

2.7Fail

Black BG

6.1AA

18.4AAA

16.1AAA

11.5AAA

7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

91918B

F4F4BF

D2D3BD

AEAFB2

8687A6

Deuteranopia

92938A

F4F4C3

CFCBC1

ABA7B4

837EA7

Tritanopia

988989

F4CCCF

BFCACC

9BB8BA

6FA7A7

Achromatopsia

8C8C8C

ECECEC

D8D8D8

B8B8B8

969696

Shades & Tints Shades & Tints

#99868C

Dark

Light

#F4F4AE

Dark

Light

#BCEFAD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #99868c;
  --color-2: #f4f4ae;
  --color-3: #bcefad;
  --color-4: #98cbaa;
  --color-5: #6ca8a6;
}

SCSS

$color-1: #99868c;
$color-2: #f4f4ae;
$color-3: #bcefad;
$color-4: #98cbaa;
$color-5: #6ca8a6;

TAILWIND

colors: {
  'brand-1': '#99868c',
  'brand-2': '#f4f4ae',
  'brand-3': '#bcefad',
  'brand-4': '#98cbaa',
  'brand-5': '#6ca8a6',
}

RGB Array

[153, 134, 140], [244, 244, 174], [188, 239, 173], [152, 203, 170], [108, 168, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #99868C, #F4F4AE, #BCEFAD, #98CBAA, #6CA8A6 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: #99868c; --color-2: #f4f4ae; --color-3: #bcefad; --color-4: #98cbaa; --color-5: #6ca8a6. 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