#918081 + #F7A58F + #DCCAB8 + #B5DECF + #7CEDE2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#918081

Ash · Gray · Warm Gray

HEX

#918081

RGB

rgb(145, 128, 129)

HSL

hsl(356, 7%, 54%)

HSB

hsb(356, 12%, 57%)

CMYK

cmyk(0%, 12%, 11%, 43%)

Oklch

oklch(61.6% 0.021 13.7)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#F7A58F

Peach Pink · LightSalmon · Coral Red

HEX

#F7A58F

RGB

rgb(247, 165, 143)

HSL

hsl(13, 87%, 76%)

HSB

hsb(13, 42%, 97%)

CMYK

cmyk(0%, 33%, 42%, 3%)

Oklch

oklch(79.7% 0.103 35.7)

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

#DCCAB8

Goose Yellow · LightGray · Peach Orange

HEX

#DCCAB8

RGB

rgb(220, 202, 184)

HSL

hsl(30, 34%, 79%)

HSB

hsb(30, 16%, 86%)

CMYK

cmyk(0%, 8%, 16%, 14%)

Oklch

oklch(84.9% 0.032 67.4)

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

#B5DECF

Jade · LightBlue · Apple Green

HEX

#B5DECF

RGB

rgb(181, 222, 207)

HSL

hsl(158, 38%, 79%)

HSB

hsb(158, 18%, 87%)

CMYK

cmyk(18%, 0%, 7%, 13%)

Oklch

oklch(86.7% 0.048 170.9)

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

#7CEDE2

Jade · SkyBlue · Lake Green

HEX

#7CEDE2

RGB

rgb(124, 237, 226)

HSL

hsl(174, 76%, 71%)

HSB

hsb(174, 48%, 93%)

CMYK

cmyk(48%, 0%, 5%, 7%)

Oklch

oklch(87.6% 0.105 187.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

918081

819291

Analogous

92818B

918081

928981

Triadic

918081

839281

818392

Split-Comp.

918081

819289

818B92

Tetradic

918081

8B9281

819291

898192

Contrast Matrix WCAG 2.1 Contrast

918081	F7A58F	DCCAB8	B5DECF	7CEDE2
—	1.9 Fail	2.4 Fail	2.6 Fail	2.7 Fail
1.9 Fail	—	1.2 Fail	1.3 Fail	1.4 Fail
2.4 Fail	1.2 Fail	—	1.1 Fail	1.1 Fail
2.6 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
2.7 Fail	1.4 Fail	1.1 Fail	1.1 Fail	—

White BG

3.7AA Large

2.0Fail

1.6Fail

1.5Fail

1.4Fail

Black BG

5.6AA

10.7AAA

13.2AAA

14.3AAA

15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8981

D3D394

D4D4BC

C7C7D3

ADAEE5

Deuteranopia

8B8C81

D8DE96

D5D7BD

C4C1D3

A69EE5

Tritanopia

908181

F39999

DBC0C1

B7D5D6

82E7E7

Achromatopsia

858585

BBBBBB

CDCDCD

D0D0D0

CACACA

Shades & Tints Shades & Tints

#918081

Dark

Light

#F7A58F

Dark

Light

#DCCAB8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #918081;
  --color-2: #f7a58f;
  --color-3: #dccab8;
  --color-4: #b5decf;
  --color-5: #7cede2;
}

SCSS

$color-1: #918081;
$color-2: #f7a58f;
$color-3: #dccab8;
$color-4: #b5decf;
$color-5: #7cede2;

TAILWIND

colors: {
  'brand-1': '#918081',
  'brand-2': '#f7a58f',
  'brand-3': '#dccab8',
  'brand-4': '#b5decf',
  'brand-5': '#7cede2',
}

RGB Array

[145, 128, 129], [247, 165, 143], [220, 202, 184], [181, 222, 207], [124, 237, 226]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #918081, #F7A58F, #DCCAB8, #B5DECF, #7CEDE2 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: #918081; --color-2: #f7a58f; --color-3: #dccab8; --color-4: #b5decf; --color-5: #7cede2. 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