#28D5B5 + #45AAA8 + #62707C + #6D5246 + #F98F6F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#28D5B5

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#28D5B5

RGB

rgb(40, 213, 181)

HSL

hsl(169, 68%, 50%)

HSB

hsb(169, 81%, 84%)

CMYK

cmyk(81%, 0%, 15%, 16%)

Oklch

oklch(78.3% 0.140 176.0)

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

#45AAA8

Mineral Blue · CadetBlue · Mint Ice

HEX

#45AAA8

RGB

rgb(69, 170, 168)

HSL

hsl(179, 42%, 47%)

HSB

hsb(179, 59%, 67%)

CMYK

cmyk(59%, 0%, 1%, 33%)

Oklch

oklch(67.9% 0.093 193.4)

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

#62707C

Slate Blue · DimGray · Navy Blue

HEX

#62707C

RGB

rgb(98, 112, 124)

HSL

hsl(208, 12%, 44%)

HSB

hsb(208, 21%, 49%)

CMYK

cmyk(21%, 10%, 0%, 51%)

Oklch

oklch(53.8% 0.025 244.1)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#6D5246

Tangerine · DarkOliveGreen · Amber Brown

HEX

#6D5246

RGB

rgb(109, 82, 70)

HSL

hsl(18, 22%, 35%)

HSB

hsb(18, 36%, 43%)

CMYK

cmyk(0%, 25%, 36%, 57%)

Oklch

oklch(46.3% 0.041 45.1)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#F98F6F

Peach Pink · Salmon · Coral Red

HEX

#F98F6F

RGB

rgb(249, 143, 111)

HSL

hsl(14, 92%, 71%)

HSB

hsb(14, 55%, 98%)

CMYK

cmyk(0%, 43%, 55%, 2%)

Oklch

oklch(75.6% 0.137 37.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

28D5B5

D62949

Analogous

29D660

28D5B5

299FD6

Triadic

28D5B5

B629D6

D6B629

Split-Comp.

28D5B5

D6299F

D66029

Tetradic

28D5B5

6029D6

D62949

9FD629

Contrast Matrix WCAG 2.1 Contrast

28D5B5	45AAA8	62707C	6D5246	F98F6F
—	1.5 Fail	2.7 Fail	3.8 AA Large	1.2 Fail
1.5 Fail	—	1.8 Fail	2.6 Fail	1.2 Fail
2.7 Fail	1.8 Fail	—	1.4 Fail	2.2 Fail
3.8 AA Large	2.6 Fail	1.4 Fail	—	3.1 AA Large
1.2 Fail	1.2 Fail	2.2 Fail	3.1 AA Large	—

White BG

1.9Fail

2.8Fail

5.1AA

7.1AAA

2.3Fail

Black BG

11.3AAA

7.6AAA

4.1AA Large

2.9Fail

9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7374BD

7172A8

686879

616149

CBCA77

Deuteranopia

695CBF

6B63A9

676678

63654A

D1D979

Tritanopia

31C3C4

4AA9A9

637776

6C4B4C

F47D7E

Achromatopsia

9E9E9E

8C8C8C

6D6D6D

595959

ABABAB

Shades & Tints Shades & Tints

#28D5B5

Dark

Light

#45AAA8

Dark

Light

#62707C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #28d5b5;
  --color-2: #45aaa8;
  --color-3: #62707c;
  --color-4: #6d5246;
  --color-5: #f98f6f;
}

SCSS

$color-1: #28d5b5;
$color-2: #45aaa8;
$color-3: #62707c;
$color-4: #6d5246;
$color-5: #f98f6f;

TAILWIND

colors: {
  'brand-1': '#28d5b5',
  'brand-2': '#45aaa8',
  'brand-3': '#62707c',
  'brand-4': '#6d5246',
  'brand-5': '#f98f6f',
}

RGB Array

[40, 213, 181], [69, 170, 168], [98, 112, 124], [109, 82, 70], [249, 143, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #28D5B5, #45AAA8, #62707C, #6D5246, #F98F6F 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: #28d5b5; --color-2: #45aaa8; --color-3: #62707c; --color-4: #6d5246; --color-5: #f98f6f. 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