#6BB38E + #D6B954 + #E2CB84 + #F8F0CC + #CFE1BA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#6BB38E

Celadon · CadetBlue · Olive Green

HEX

#6BB38E

RGB

rgb(107, 179, 142)

HSL

hsl(149, 32%, 56%)

HSB

hsb(149, 40%, 70%)

CMYK

cmyk(40%, 0%, 21%, 30%)

Oklch

oklch(70.9% 0.091 160.4)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#D6B954

Ginger · SandyBrown · Sunflower

HEX

#D6B954

RGB

rgb(214, 185, 84)

HSL

hsl(47, 61%, 58%)

HSB

hsb(47, 61%, 84%)

CMYK

cmyk(0%, 14%, 61%, 16%)

Oklch

oklch(79.1% 0.124 93.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#E2CB84

Ginger · BurlyWood · Sunflower

HEX

#E2CB84

RGB

rgb(226, 203, 132)

HSL

hsl(45, 62%, 70%)

HSB

hsb(45, 42%, 89%)

CMYK

cmyk(0%, 10%, 42%, 11%)

Oklch

oklch(84.5% 0.094 92.2)

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

#F8F0CC

Goose Yellow · Bisque · Lemon Cream

HEX

#F8F0CC

RGB

rgb(248, 240, 204)

HSL

hsl(49, 76%, 89%)

HSB

hsb(49, 18%, 97%)

CMYK

cmyk(0%, 3%, 18%, 3%)

Oklch

oklch(95.2% 0.048 96.8)

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

#CFE1BA

Willow Green · LightGray · Mint Green

HEX

#CFE1BA

RGB

rgb(207, 225, 186)

HSL

hsl(88, 39%, 81%)

HSB

hsb(88, 17%, 88%)

CMYK

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

Oklch

oklch(88.6% 0.056 127.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6BB38E

B36B90

Analogous

6CB36B

6BB38E

6BB3B2

Triadic

6BB38E

8E6BB3

B38E6B

Split-Comp.

6BB38E

B26BB3

B36B6C

Tetradic

6BB38E

6B6CB3

B36B90

B3B26B

Contrast Matrix WCAG 2.1 Contrast

6BB38E	D6B954	E2CB84	F8F0CC	CFE1BA
—	1.3 Fail	1.5 Fail	2.2 Fail	1.8 Fail
1.3 Fail	—	1.2 Fail	1.7 Fail	1.4 Fail
1.5 Fail	1.2 Fail	—	1.4 Fail	1.2 Fail
2.2 Fail	1.7 Fail	1.4 Fail	—	1.2 Fail
1.8 Fail	1.4 Fail	1.2 Fail	1.2 Fail	—

White BG

2.5Fail

1.9Fail

1.6Fail

1.1Fail

1.4Fail

Black BG

8.5AAA

10.9AAA

13.1AAA

18.3AAA

15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8B97

C9C96C

D8D895

F5F4D5

D7D7C3

Deuteranopia

868199

CBCD72

D9DB99

F5F6D7

D6D4C6

Tritanopia

6F9EA0

D58084

E1A3A6

F8DCDD

D0CBCD

Achromatopsia

999999

B6B6B6

CACACA

EEEEEE

D7D7D7

Shades & Tints Shades & Tints

#6BB38E

Dark

Light

#D6B954

Dark

Light

#E2CB84

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6bb38e;
  --color-2: #d6b954;
  --color-3: #e2cb84;
  --color-4: #f8f0cc;
  --color-5: #cfe1ba;
}

SCSS

$color-1: #6bb38e;
$color-2: #d6b954;
$color-3: #e2cb84;
$color-4: #f8f0cc;
$color-5: #cfe1ba;

TAILWIND

colors: {
  'brand-1': '#6bb38e',
  'brand-2': '#d6b954',
  'brand-3': '#e2cb84',
  'brand-4': '#f8f0cc',
  'brand-5': '#cfe1ba',
}

RGB Array

[107, 179, 142], [214, 185, 84], [226, 203, 132], [248, 240, 204], [207, 225, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6BB38E, #D6B954, #E2CB84, #F8F0CC, #CFE1BA 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: #6bb38e; --color-2: #d6b954; --color-3: #e2cb84; --color-4: #f8f0cc; --color-5: #cfe1ba. 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