#615B81 + #7FC2A3 + #A0DDB4 + #E0EDB7 + #F8CDAB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#615B81

Deep Indigo · DimGray · Navy Blue

HEX

#615B81

RGB

rgb(97, 91, 129)

HSL

hsl(249, 17%, 43%)

HSB

hsb(249, 29%, 51%)

CMYK

cmyk(25%, 29%, 0%, 49%)

Oklch

oklch(49.2% 0.060 291.2)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#7FC2A3

Jade · DarkSeaGreen · Apple Green

HEX

#7FC2A3

RGB

rgb(127, 194, 163)

HSL

hsl(152, 35%, 63%)

HSB

hsb(152, 35%, 76%)

CMYK

cmyk(35%, 0%, 16%, 24%)

Oklch

oklch(76.0% 0.082 163.7)

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

#A0DDB4

Celadon · LightGreen · Apple Green

HEX

#A0DDB4

RGB

rgb(160, 221, 180)

HSL

hsl(140, 47%, 75%)

HSB

hsb(140, 28%, 87%)

CMYK

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

Oklch

oklch(84.5% 0.085 154.8)

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

#E0EDB7

Willow Green · Wheat · Mint Green

HEX

#E0EDB7

RGB

rgb(224, 237, 183)

HSL

hsl(74, 60%, 82%)

HSB

hsb(74, 23%, 93%)

CMYK

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

Oklch

oklch(92.3% 0.072 118.8)

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

#F8CDAB

Apricot · Wheat · Peach Orange

HEX

#F8CDAB

RGB

rgb(248, 205, 171)

HSL

hsl(26, 85%, 82%)

HSB

hsb(26, 31%, 97%)

CMYK

cmyk(0%, 17%, 31%, 3%)

Oklch

oklch(87.7% 0.066 60.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

615B81

7B805B

Analogous

5B6880

615B81

735B80

Triadic

615B81

80615B

5B8061

Split-Comp.

615B81

80735B

68805B

Tetradic

615B81

805B68

7B805B

5B8073

Contrast Matrix WCAG 2.1 Contrast

615B81	7FC2A3	A0DDB4	E0EDB7	F8CDAB
—	3.1 AA Large	4.1 AA Large	5.1 AA	4.3 AA Large
3.1 AA Large	—	1.3 Fail	1.7 Fail	1.4 Fail
4.1 AA Large	1.3 Fail	—	1.3 Fail	1.1 Fail
5.1 AA	1.7 Fail	1.3 Fail	—	1.2 Fail
4.3 AA Large	1.4 Fail	1.1 Fail	1.2 Fail	—

White BG

6.3AA

2.1Fail

1.6Fail

1.2Fail

1.5Fail

Black BG

3.3AA Large

10.1AAA

13.5AAA

17.0AAA

14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5E78

9C9DAB

BABBBE

E6E6C4

E5E5B3

Deuteranopia

5F5F76

9893AC

B7B2C0

E5E4C7

E8EBB5

Tritanopia

61716F

82B0B2

A3C6C7

E1CED1

F6BABB

Achromatopsia

616161

AAAAAA

C6C6C6

E3E3E3

D6D6D6

Shades & Tints Shades & Tints

#615B81

Dark

Light

#7FC2A3

Dark

Light

#A0DDB4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #615b81;
  --color-2: #7fc2a3;
  --color-3: #a0ddb4;
  --color-4: #e0edb7;
  --color-5: #f8cdab;
}

SCSS

$color-1: #615b81;
$color-2: #7fc2a3;
$color-3: #a0ddb4;
$color-4: #e0edb7;
$color-5: #f8cdab;

TAILWIND

colors: {
  'brand-1': '#615b81',
  'brand-2': '#7fc2a3',
  'brand-3': '#a0ddb4',
  'brand-4': '#e0edb7',
  'brand-5': '#f8cdab',
}

RGB Array

[97, 91, 129], [127, 194, 163], [160, 221, 180], [224, 237, 183], [248, 205, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #615B81, #7FC2A3, #A0DDB4, #E0EDB7, #F8CDAB 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: #615b81; --color-2: #7fc2a3; --color-3: #a0ddb4; --color-4: #e0edb7; --color-5: #f8cdab. 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