#748F8D + #91C4A1 + #B5D6A1 + #D1D487 + #DBDEB4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#748F8D

Mineral Blue · LightSlateGray · Lake Green

HEX

#748F8D

RGB

rgb(116, 143, 141)

HSL

hsl(176, 11%, 51%)

HSB

hsb(176, 19%, 56%)

CMYK

cmyk(19%, 0%, 1%, 44%)

Oklch

oklch(62.9% 0.031 190.8)

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

#91C4A1

Celadon · DarkSeaGreen · Apple Green

HEX

#91C4A1

RGB

rgb(145, 196, 161)

HSL

hsl(139, 30%, 67%)

HSB

hsb(139, 26%, 77%)

CMYK

cmyk(26%, 0%, 18%, 23%)

Oklch

oklch(77.5% 0.073 154.4)

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

#B5D6A1

Celadon · Silver · Apple Green

HEX

#B5D6A1

RGB

rgb(181, 214, 161)

HSL

hsl(97, 39%, 74%)

HSB

hsb(97, 25%, 84%)

CMYK

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

Oklch

oklch(83.8% 0.080 133.9)

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

#D1D487

Fresh Green · BurlyWood · Sunflower

HEX

#D1D487

RGB

rgb(209, 212, 135)

HSL

hsl(62, 47%, 68%)

HSB

hsb(62, 36%, 83%)

CMYK

cmyk(1%, 0%, 36%, 17%)

Oklch

oklch(85.0% 0.099 110.2)

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

#DBDEB4

Fresh Green · Wheat · Lemon Cream

HEX

#DBDEB4

RGB

rgb(219, 222, 180)

HSL

hsl(64, 39%, 79%)

HSB

hsb(64, 19%, 87%)

CMYK

cmyk(1%, 0%, 19%, 13%)

Oklch

oklch(88.8% 0.056 110.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

748F8D

907476

Analogous

749080

748F8D

748490

Triadic

748F8D

8E7490

908E74

Split-Comp.

748F8D

907484

908074

Tetradic

748F8D

807490

907476

849074

Contrast Matrix WCAG 2.1 Contrast

748F8D	91C4A1	B5D6A1	D1D487	DBDEB4
—	1.8 Fail	2.2 Fail	2.2 Fail	2.5 Fail
1.8 Fail	—	1.2 Fail	1.3 Fail	1.4 Fail
2.2 Fail	1.2 Fail	—	1.0 Fail	1.2 Fail
2.2 Fail	1.3 Fail	1.0 Fail	—	1.1 Fail
2.5 Fail	1.4 Fail	1.2 Fail	1.1 Fail	—

White BG

3.5AA Large

2.0Fail

1.6Fail

1.4Fail

Black BG

6.1AA

10.6AAA

13.1AAA

13.5AAA

15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

80808D

A7A8A9

C3C4AE

D2D29A

DCDCBE

Deuteranopia

7E7C8E

A4A0AC

C1BFB1

D2D29E

DCDCC1

Tritanopia

758E8E

94B0B2

B7B8BA

D1A8AC

DBC6C8

Achromatopsia

878787

B1B1B1

C6C6C6

CACACA

D8D8D8

Shades & Tints Shades & Tints

#748F8D

Dark

Light

#91C4A1

Dark

Light

#B5D6A1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #748f8d;
  --color-2: #91c4a1;
  --color-3: #b5d6a1;
  --color-4: #d1d487;
  --color-5: #dbdeb4;
}

SCSS

$color-1: #748f8d;
$color-2: #91c4a1;
$color-3: #b5d6a1;
$color-4: #d1d487;
$color-5: #dbdeb4;

TAILWIND

colors: {
  'brand-1': '#748f8d',
  'brand-2': '#91c4a1',
  'brand-3': '#b5d6a1',
  'brand-4': '#d1d487',
  'brand-5': '#dbdeb4',
}

RGB Array

[116, 143, 141], [145, 196, 161], [181, 214, 161], [209, 212, 135], [219, 222, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #748F8D, #91C4A1, #B5D6A1, #D1D487, #DBDEB4 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: #748f8d; --color-2: #91c4a1; --color-3: #b5d6a1; --color-4: #d1d487; --color-5: #dbdeb4. 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