#6D827B + #BBB497 + #E8CEAC + #FEDEB7 + #FFE8BF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#6D827B

Mineral Blue · Gray · Warm Gray

HEX

#6D827B

RGB

rgb(109, 130, 123)

HSL

hsl(160, 9%, 47%)

HSB

hsb(160, 16%, 51%)

CMYK

cmyk(16%, 0%, 5%, 49%)

Oklch

oklch(58.8% 0.027 173.2)

Traditional「Mineral Blue」· Paint「Warm Gray」· Creative Urban Concrete

#BBB497

Ginger · Tan · Sunflower

HEX

#BBB497

RGB

rgb(187, 180, 151)

HSL

hsl(48, 21%, 66%)

HSB

hsb(48, 19%, 73%)

CMYK

cmyk(0%, 4%, 19%, 27%)

Oklch

oklch(76.8% 0.041 96.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E8CEAC

Goose Yellow · Wheat · Peach Orange

HEX

#E8CEAC

RGB

rgb(232, 206, 172)

HSL

hsl(34, 57%, 79%)

HSB

hsb(34, 26%, 91%)

CMYK

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

Oklch

oklch(86.5% 0.054 74.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FEDEB7

Goose Yellow · Wheat · Peach Orange

HEX

#FEDEB7

RGB

rgb(254, 222, 183)

HSL

hsl(33, 97%, 86%)

HSB

hsb(33, 28%, 100%)

CMYK

cmyk(0%, 13%, 28%, 0%)

Oklch

oklch(91.8% 0.062 72.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FFE8BF

Goose Yellow · Bisque · Peach Orange

HEX

#FFE8BF

RGB

rgb(255, 232, 191)

HSL

hsl(38, 100%, 87%)

HSB

hsb(38, 25%, 100%)

CMYK

cmyk(0%, 9%, 25%, 0%)

Oklch

oklch(93.9% 0.059 82.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6D827B

836D74

Analogous

6D8371

6D827B

6D7F83

Triadic

6D827B

7B6D83

837B6D

Split-Comp.

6D827B

836D7F

83716D

Tetradic

6D827B

716D83

836D74

7F836D

Contrast Matrix WCAG 2.1 Contrast

6D827B	BBB497	E8CEAC	FEDEB7	FFE8BF
—	2.0 Fail	2.7 Fail	3.2 AA Large	3.4 AA Large
2.0 Fail	—	1.4 Fail	1.6 Fail	1.7 Fail
2.7 Fail	1.4 Fail	—	1.2 Fail	1.3 Fail
3.2 AA Large	1.6 Fail	1.2 Fail	—	1.1 Fail
3.4 AA Large	1.7 Fail	1.3 Fail	1.1 Fail	—

White BG

4.1AA Large

2.1Fail

1.5Fail

1.3Fail

1.2Fail

Black BG

5.1AA

10.1AAA

13.9AAA

16.3AAA

17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

76767D

B8B89E

DDDDB4

F0F0C0

F5F5C9

Deuteranopia

75737D

B8B9A0

DEE0B6

F2F4C3

F6F8CB

Tritanopia

6E7E7E

BBA4A5

E7BBBC

FCC8CA

FED1D2

Achromatopsia

7B7B7B

B3B3B3

D2D2D2

E3E3E3

EAEAEA

Shades & Tints Shades & Tints

#6D827B

Dark

Light

#BBB497

Dark

Light

#E8CEAC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6d827b;
  --color-2: #bbb497;
  --color-3: #e8ceac;
  --color-4: #fedeb7;
  --color-5: #ffe8bf;
}

SCSS

$color-1: #6d827b;
$color-2: #bbb497;
$color-3: #e8ceac;
$color-4: #fedeb7;
$color-5: #ffe8bf;

TAILWIND

colors: {
  'brand-1': '#6d827b',
  'brand-2': '#bbb497',
  'brand-3': '#e8ceac',
  'brand-4': '#fedeb7',
  'brand-5': '#ffe8bf',
}

RGB Array

[109, 130, 123], [187, 180, 151], [232, 206, 172], [254, 222, 183], [255, 232, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6D827B, #BBB497, #E8CEAC, #FEDEB7, #FFE8BF 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: #6d827b; --color-2: #bbb497; --color-3: #e8ceac; --color-4: #fedeb7; --color-5: #ffe8bf. 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