#48D3BE + #ABCAC0 + #D3E3C4 + #E9837B + #FE6754 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#48D3BE

Mineral Blue · MediumTurquoise · Lake Green

HEX

#48D3BE

RGB

rgb(72, 211, 190)

HSL

hsl(171, 61%, 55%)

HSB

hsb(171, 66%, 83%)

CMYK

cmyk(66%, 0%, 10%, 17%)

Oklch

oklch(78.7% 0.122 181.0)

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

#ABCAC0

Jade · Silver · Lake Green

HEX

#ABCAC0

RGB

rgb(171, 202, 192)

HSL

hsl(161, 23%, 73%)

HSB

hsb(161, 15%, 79%)

CMYK

cmyk(15%, 0%, 5%, 21%)

Oklch

oklch(81.3% 0.036 173.9)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#D3E3C4

Celadon · LightGray · Mint Green

HEX

#D3E3C4

RGB

rgb(211, 227, 196)

HSL

hsl(91, 36%, 83%)

HSB

hsb(91, 14%, 89%)

CMYK

cmyk(7%, 0%, 14%, 11%)

Oklch

oklch(89.6% 0.045 129.6)

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

#E9837B

Peach Pink · LightCoral · Coral Red

HEX

#E9837B

RGB

rgb(233, 131, 123)

HSL

hsl(4, 71%, 70%)

HSB

hsb(4, 47%, 91%)

CMYK

cmyk(0%, 44%, 47%, 9%)

Oklch

oklch(71.9% 0.127 25.4)

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

#FE6754

Peach Pink · Tomato · Coral Red

HEX

#FE6754

RGB

rgb(254, 103, 84)

HSL

hsl(7, 99%, 66%)

HSB

hsb(7, 67%, 100%)

CMYK

cmyk(0%, 59%, 67%, 0%)

Oklch

oklch(70.1% 0.188 29.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

48D3BE

D2465B

Analogous

46D277

48D3BE

46A1D2

Triadic

48D3BE

BD46D2

D2BD46

Split-Comp.

48D3BE

D246A1

D27746

Tetradic

48D3BE

7746D2

D2465B

A1D246

Contrast Matrix WCAG 2.1 Contrast

48D3BE	ABCAC0	D3E3C4	E9837B	FE6754
—	1.1 Fail	1.4 Fail	1.4 Fail	1.6 Fail
1.1 Fail	—	1.3 Fail	1.5 Fail	1.6 Fail
1.4 Fail	1.3 Fail	—	1.9 Fail	2.1 Fail
1.4 Fail	1.5 Fail	1.9 Fail	—	1.1 Fail
1.6 Fail	1.6 Fail	2.1 Fail	1.1 Fail	—

White BG

1.9Fail

1.8Fail

1.4Fail

2.6Fail

2.9Fail

Black BG

11.3AAA

11.9AAA

15.6AAA

8.0AAA

7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8485C3

B8B9C2

DADACC

BDBC7D

BDBB59

Deuteranopia

7C72C4

B7B4C3

D9D8CD

C3CA7D

C5D15A

Tritanopia

4FC7C8

ADC4C5

D4D1D3

E47E7F

F65C5D

Achromatopsia

A7A7A7

C0C0C0

DBDBDB

A1A1A1

929292

Shades & Tints Shades & Tints

#48D3BE

Dark

Light

#ABCAC0

Dark

Light

#D3E3C4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #48d3be;
  --color-2: #abcac0;
  --color-3: #d3e3c4;
  --color-4: #e9837b;
  --color-5: #fe6754;
}

SCSS

$color-1: #48d3be;
$color-2: #abcac0;
$color-3: #d3e3c4;
$color-4: #e9837b;
$color-5: #fe6754;

TAILWIND

colors: {
  'brand-1': '#48d3be',
  'brand-2': '#abcac0',
  'brand-3': '#d3e3c4',
  'brand-4': '#e9837b',
  'brand-5': '#fe6754',
}

RGB Array

[72, 211, 190], [171, 202, 192], [211, 227, 196], [233, 131, 123], [254, 103, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #48D3BE, #ABCAC0, #D3E3C4, #E9837B, #FE6754 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: #48d3be; --color-2: #abcac0; --color-3: #d3e3c4; --color-4: #e9837b; --color-5: #fe6754. 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