#B3EDDF + #DDE2D5 + #FEB6AA + #F7A870 + #7C6D77 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B3EDDF

Jade · LightBlue · Glacier Blue

HEX

#B3EDDF

RGB

rgb(179, 237, 223)

HSL

hsl(166, 62%, 82%)

HSB

hsb(166, 24%, 93%)

CMYK

cmyk(24%, 0%, 6%, 7%)

Oklch

oklch(90.3% 0.062 178.3)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#DDE2D5

Willow Green · LightGray · Mint Green

HEX

#DDE2D5

RGB

rgb(221, 226, 213)

HSL

hsl(83, 18%, 86%)

HSB

hsb(83, 6%, 89%)

CMYK

cmyk(2%, 0%, 6%, 11%)

Oklch

oklch(90.5% 0.018 124.0)

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

#FEB6AA

Peach Pink · LightPink · Cherry Blossom

HEX

#FEB6AA

RGB

rgb(254, 182, 170)

HSL

hsl(9, 98%, 83%)

HSB

hsb(9, 33%, 100%)

CMYK

cmyk(0%, 28%, 33%, 0%)

Oklch

oklch(84.1% 0.086 29.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F7A870

Apricot · LightSalmon · Warm Sun

HEX

#F7A870

RGB

rgb(247, 168, 112)

HSL

hsl(25, 89%, 70%)

HSB

hsb(25, 55%, 97%)

CMYK

cmyk(0%, 32%, 55%, 3%)

Oklch

oklch(79.7% 0.118 55.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#7C6D77

Ink Gray · Gray · Warm Gray

HEX

#7C6D77

RGB

rgb(124, 109, 119)

HSL

hsl(320, 6%, 46%)

HSB

hsb(320, 12%, 49%)

CMYK

cmyk(0%, 12%, 4%, 51%)

Oklch

oklch(55.2% 0.024 338.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3EDDF

EEB5C2

Analogous

B5EEC4

B3EDDF

B5DEEE

Triadic

B3EDDF

E0B5EE

EEE0B5

Split-Comp.

B3EDDF

EEB5DE

EEC4B5

Tetradic

B3EDDF

C4B5EE

EEB5C2

DEEEB5

Contrast Matrix WCAG 2.1 Contrast

B3EDDF	DDE2D5	FEB6AA	F7A870	7C6D77
—	1.0 Fail	1.3 Fail	1.5 Fail	3.7 AA Large
1.0 Fail	—	1.3 Fail	1.5 Fail	3.7 AA Large
1.3 Fail	1.3 Fail	—	1.2 Fail	2.9 Fail
1.5 Fail	1.5 Fail	1.2 Fail	—	2.5 Fail
3.7 AA Large	3.7 AA Large	2.9 Fail	2.5 Fail	—

White BG

1.3Fail

1.7Fail

1.9Fail

4.9AA

Black BG

16.1AAA

15.9AAA

12.5AAA

10.8AAA

4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCDE2

DFDFD8

DFDEAD

D5D47E

767575

Deuteranopia

C9C4E3

DFDFD9

E3E8AE

D9DF81

767874

Tritanopia

B6E5E6

DDDBDB

FAAFB0

F3888B

7B7372

Achromatopsia

DADADA

DFDFDF

CACACA

B9B9B9

737373

Shades & Tints Shades & Tints

#B3EDDF

Dark

Light

#DDE2D5

Dark

Light

#FEB6AA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3eddf;
  --color-2: #dde2d5;
  --color-3: #feb6aa;
  --color-4: #f7a870;
  --color-5: #7c6d77;
}

SCSS

$color-1: #b3eddf;
$color-2: #dde2d5;
$color-3: #feb6aa;
$color-4: #f7a870;
$color-5: #7c6d77;

TAILWIND

colors: {
  'brand-1': '#b3eddf',
  'brand-2': '#dde2d5',
  'brand-3': '#feb6aa',
  'brand-4': '#f7a870',
  'brand-5': '#7c6d77',
}

RGB Array

[179, 237, 223], [221, 226, 213], [254, 182, 170], [247, 168, 112], [124, 109, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3EDDF, #DDE2D5, #FEB6AA, #F7A870, #7C6D77 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: #b3eddf; --color-2: #dde2d5; --color-3: #feb6aa; --color-4: #f7a870; --color-5: #7c6d77. 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