#568E83 + #6A967E + #F5E09E + #EE5D6C + #DE4353 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#568E83

Mineral Blue · SlateGray · Mint Ice

HEX

#568E83

RGB

rgb(86, 142, 131)

HSL

hsl(168, 25%, 45%)

HSB

hsb(168, 39%, 56%)

CMYK

cmyk(39%, 0%, 8%, 44%)

Oklch

oklch(60.5% 0.062 180.2)

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

#6A967E

Celadon · SlateGray · Olive Green

HEX

#6A967E

RGB

rgb(106, 150, 126)

HSL

hsl(147, 17%, 50%)

HSB

hsb(147, 29%, 59%)

CMYK

cmyk(29%, 0%, 16%, 41%)

Oklch

oklch(63.4% 0.060 160.2)

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

#F5E09E

Goose Yellow · Khaki · Lemon Cream

HEX

#F5E09E

RGB

rgb(245, 224, 158)

HSL

hsl(46, 81%, 79%)

HSB

hsb(46, 36%, 96%)

CMYK

cmyk(0%, 9%, 36%, 4%)

Oklch

oklch(90.9% 0.087 92.5)

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

#EE5D6C

Peach Pink · Salmon · Coral Red

HEX

#EE5D6C

RGB

rgb(238, 93, 108)

HSL

hsl(354, 81%, 65%)

HSB

hsb(354, 61%, 93%)

CMYK

cmyk(0%, 61%, 55%, 7%)

Oklch

oklch(66.9% 0.179 17.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#DE4353

Vermilion · Tomato · Passion Red

HEX

#DE4353

RGB

rgb(222, 67, 83)

HSL

hsl(354, 70%, 57%)

HSB

hsb(354, 70%, 87%)

CMYK

cmyk(0%, 70%, 63%, 13%)

Oklch

oklch(61.0% 0.191 19.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

568E83

8F5662

Analogous

568F67

568E83

567E8F

Triadic

568E83

84568F

8F8456

Split-Comp.

568E83

8F567E

8F6756

Tetradic

568E83

67568F

8F5662

7E8F56

Contrast Matrix WCAG 2.1 Contrast

568E83	6A967E	F5E09E	EE5D6C	DE4353
—	1.1 Fail	2.9 Fail	1.1 Fail	1.1 Fail
1.1 Fail	—	2.6 Fail	1.0 Fail	1.2 Fail
2.9 Fail	2.6 Fail	—	2.5 Fail	3.2 AA Large
1.1 Fail	1.0 Fail	2.5 Fail	—	1.3 Fail
1.1 Fail	1.2 Fail	3.2 AA Large	1.3 Fail	—

White BG

3.8AA Large

3.3AA Large

1.3Fail

3.3AA Large

4.2AA Large

Black BG

5.6AA

6.3AA

16.0AAA

6.4AA

5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6F86

7D7D84

ECECAE

AFAE68

9B994F

Deuteranopia

6B6786

7B7785

EDEFB2

B8C368

A4AF4E

Tritanopia

598888

6C8889

F4BBBD

E76665

D64C4B

Achromatopsia

7C7C7C

868686

DFDFDF

8A8A8A

737373

Shades & Tints Shades & Tints

#568E83

Dark

Light

#6A967E

Dark

Light

#F5E09E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #568e83;
  --color-2: #6a967e;
  --color-3: #f5e09e;
  --color-4: #ee5d6c;
  --color-5: #de4353;
}

SCSS

$color-1: #568e83;
$color-2: #6a967e;
$color-3: #f5e09e;
$color-4: #ee5d6c;
$color-5: #de4353;

TAILWIND

colors: {
  'brand-1': '#568e83',
  'brand-2': '#6a967e',
  'brand-3': '#f5e09e',
  'brand-4': '#ee5d6c',
  'brand-5': '#de4353',
}

RGB Array

[86, 142, 131], [106, 150, 126], [245, 224, 158], [238, 93, 108], [222, 67, 83]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #568E83, #6A967E, #F5E09E, #EE5D6C, #DE4353 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: #568e83; --color-2: #6a967e; --color-3: #f5e09e; --color-4: #ee5d6c; --color-5: #de4353. 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