#765E5E + #7163D5 + #6996A2 + #BCD09D + #DEDEA1 · coffee - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#765E5E

Crimson · DimGray · Passion Red

HEX

#765E5E

RGB

rgb(118, 94, 94)

HSL

hsl(0, 11%, 42%)

HSB

hsb(0, 20%, 46%)

CMYK

cmyk(0%, 20%, 20%, 54%)

Oklch

oklch(50.6% 0.031 18.2)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#7163D5

Wisteria · SlateBlue · Cobalt Blue

HEX

#7163D5

RGB

rgb(113, 99, 213)

HSL

hsl(247, 58%, 61%)

HSB

hsb(247, 54%, 84%)

CMYK

cmyk(47%, 54%, 0%, 16%)

Oklch

oklch(57.1% 0.169 285.3)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#6996A2

Slate Blue · CadetBlue · Lake Green

HEX

#6996A2

RGB

rgb(105, 150, 162)

HSL

hsl(193, 23%, 52%)

HSB

hsb(193, 35%, 64%)

CMYK

cmyk(35%, 7%, 0%, 36%)

Oklch

oklch(64.5% 0.052 216.2)

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

#BCD09D

Willow Green · Silver · Apple Green

HEX

#BCD09D

RGB

rgb(188, 208, 157)

HSL

hsl(84, 35%, 72%)

HSB

hsb(84, 25%, 82%)

CMYK

cmyk(10%, 0%, 25%, 18%)

Oklch

oklch(83.0% 0.072 125.3)

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

#DEDEA1

Fresh Green · Khaki · Sunflower

HEX

#DEDEA1

RGB

rgb(222, 222, 161)

HSL

hsl(60, 48%, 75%)

HSB

hsb(60, 27%, 87%)

CMYK

cmyk(0%, 0%, 27%, 13%)

Oklch

oklch(88.6% 0.079 107.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

765E5E

5F7777

Analogous

775F6B

765E5E

776B5F

Triadic

765E5E

5F775F

5F5F77

Split-Comp.

765E5E

5F776B

5F6B77

Tetradic

765E5E

6B775F

5F7777

6B5F77

Contrast Matrix WCAG 2.1 Contrast

765E5E	7163D5	6996A2	BCD09D	DEDEA1
—	1.3 Fail	1.8 Fail	3.6 AA Large	4.3 AA Large
1.3 Fail	—	1.5 Fail	2.8 Fail	3.4 AA Large
1.8 Fail	1.5 Fail	—	2.0 Fail	2.3 Fail
3.6 AA Large	2.8 Fail	2.0 Fail	—	1.2 Fail
4.3 AA Large	3.4 AA Large	2.3 Fail	1.2 Fail	—

White BG

5.9AA

4.7AA

3.2AA Large

1.7Fail

1.4Fail

Black BG

3.5AA Large

4.4AA Large

6.5AA

12.6AAA

15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6B5E

6B6BB9

7C7D9F

C5C5A9

DEDEB0

Deuteranopia

6D6F5E

6C6DB3

7A779E

C4C2AC

DEDEB3

Tritanopia

755E5E

70A49F

6B9D9C

BDB3B5

DEBBBE

Achromatopsia

656565

747474

8A8A8A

C4C4C4

D7D7D7

Shades & Tints Shades & Tints

#765E5E

Dark

Light

#7163D5

Dark

Light

#6996A2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #765e5e;
  --color-2: #7163d5;
  --color-3: #6996a2;
  --color-4: #bcd09d;
  --color-5: #dedea1;
}

SCSS

$color-1: #765e5e;
$color-2: #7163d5;
$color-3: #6996a2;
$color-4: #bcd09d;
$color-5: #dedea1;

TAILWIND

colors: {
  'brand-1': '#765e5e',
  'brand-2': '#7163d5',
  'brand-3': '#6996a2',
  'brand-4': '#bcd09d',
  'brand-5': '#dedea1',
}

RGB Array

[118, 94, 94], [113, 99, 213], [105, 150, 162], [188, 208, 157], [222, 222, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #765E5E, #7163D5, #6996A2, #BCD09D, #DEDEA1 is ideal for: corporate websites, product showcases, portfolios. 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: #765e5e; --color-2: #7163d5; --color-3: #6996a2; --color-4: #bcd09d; --color-5: #dedea1. 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 coffee-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