#50817B + #6F9684 + #B0AB85 + #F5C38E + #FDD69D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#50817B

Mineral Blue · SlateGray · Mint Ice

HEX

#50817B

RGB

rgb(80, 129, 123)

HSL

hsl(173, 23%, 41%)

HSB

hsb(173, 38%, 51%)

CMYK

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

Oklch

oklch(56.7% 0.054 186.0)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#6F9684

Mineral Blue · SlateGray · Olive Green

HEX

#6F9684

RGB

rgb(111, 150, 132)

HSL

hsl(152, 16%, 51%)

HSB

hsb(152, 26%, 59%)

CMYK

cmyk(26%, 0%, 12%, 41%)

Oklch

oklch(63.9% 0.051 164.8)

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

#B0AB85

Fresh Green · Tan · Sunflower

HEX

#B0AB85

RGB

rgb(176, 171, 133)

HSL

hsl(53, 21%, 61%)

HSB

hsb(53, 24%, 69%)

CMYK

cmyk(0%, 3%, 24%, 31%)

Oklch

oklch(73.6% 0.052 101.3)

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

#F5C38E

Goose Yellow · BurlyWood · Peach Orange

HEX

#F5C38E

RGB

rgb(245, 195, 142)

HSL

hsl(31, 84%, 76%)

HSB

hsb(31, 42%, 96%)

CMYK

cmyk(0%, 20%, 42%, 4%)

Oklch

oklch(84.9% 0.089 67.8)

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

#FDD69D

Goose Yellow · Wheat · Peach Orange

HEX

#FDD69D

RGB

rgb(253, 214, 157)

HSL

hsl(36, 96%, 80%)

HSB

hsb(36, 38%, 99%)

CMYK

cmyk(0%, 15%, 38%, 1%)

Oklch

oklch(89.6% 0.085 76.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

50817B

815156

Analogous

518163

50817B

516E81

Triadic

50817B

7B5181

817B51

Split-Comp.

50817B

81516E

816351

Tetradic

50817B

635181

815156

6E8151

Contrast Matrix WCAG 2.1 Contrast

50817B	6F9684	B0AB85	F5C38E	FDD69D
—	1.3 Fail	1.9 Fail	2.7 Fail	3.2 AA Large
1.3 Fail	—	1.4 Fail	2.1 Fail	2.4 Fail
1.9 Fail	1.4 Fail	—	1.5 Fail	1.7 Fail
2.7 Fail	2.1 Fail	1.5 Fail	—	1.2 Fail
3.2 AA Large	2.4 Fail	1.7 Fail	1.2 Fail	—

White BG

4.4AA Large

3.3AA Large

2.3Fail

1.6Fail

1.4Fail

Black BG

4.8AA

6.4AA

9.0AAA

13.1AAA

15.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

65667C

808088

AEAE8E

DFDF9B

ECECAB

Deuteranopia

625F7D

7E7B89

AEAF90

E2E69E

EEF1AE

Tritanopia

527E7E

718C8D

B09597

F3A5A7

FBB6B8

Achromatopsia

727272

888888

A8A8A8

CCCCCC

DBDBDB

Shades & Tints Shades & Tints

#50817B

Dark

Light

#6F9684

Dark

Light

#B0AB85

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #50817b;
  --color-2: #6f9684;
  --color-3: #b0ab85;
  --color-4: #f5c38e;
  --color-5: #fdd69d;
}

SCSS

$color-1: #50817b;
$color-2: #6f9684;
$color-3: #b0ab85;
$color-4: #f5c38e;
$color-5: #fdd69d;

TAILWIND

colors: {
  'brand-1': '#50817b',
  'brand-2': '#6f9684',
  'brand-3': '#b0ab85',
  'brand-4': '#f5c38e',
  'brand-5': '#fdd69d',
}

RGB Array

[80, 129, 123], [111, 150, 132], [176, 171, 133], [245, 195, 142], [253, 214, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #50817B, #6F9684, #B0AB85, #F5C38E, #FDD69D 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: #50817b; --color-2: #6f9684; --color-3: #b0ab85; --color-4: #f5c38e; --color-5: #fdd69d. 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 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