#FDEFB0 + #E7A8B1 + #B998B3 + #77779D + #4771A3 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FDEFB0

Goose Yellow · Wheat · Lemon Cream

HEX

#FDEFB0

RGB

rgb(253, 239, 176)

HSL

hsl(49, 95%, 84%)

HSB

hsb(49, 30%, 99%)

CMYK

cmyk(0%, 6%, 30%, 1%)

Oklch

oklch(94.9% 0.081 97.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#E7A8B1

Peach Pink · LightPink · Coral Red

HEX

#E7A8B1

RGB

rgb(231, 168, 177)

HSL

hsl(351, 57%, 78%)

HSB

hsb(351, 27%, 91%)

CMYK

cmyk(0%, 27%, 23%, 9%)

Oklch

oklch(79.3% 0.075 9.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#B998B3

Mauve · DarkGray · Lilac Purple

HEX

#B998B3

RGB

rgb(185, 152, 179)

HSL

hsl(311, 19%, 66%)

HSB

hsb(311, 18%, 73%)

CMYK

cmyk(0%, 18%, 3%, 27%)

Oklch

oklch(71.8% 0.054 332.4)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#77779D

Deep Indigo · SlateGray · Navy Blue

HEX

#77779D

RGB

rgb(119, 119, 157)

HSL

hsl(240, 16%, 54%)

HSB

hsb(240, 24%, 62%)

CMYK

cmyk(24%, 24%, 0%, 38%)

Oklch

oklch(58.4% 0.058 284.5)

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

#4771A3

Indigo · SteelBlue · Navy Blue

HEX

#4771A3

RGB

rgb(71, 113, 163)

HSL

hsl(213, 39%, 46%)

HSB

hsb(213, 56%, 64%)

CMYK

cmyk(56%, 31%, 0%, 36%)

Oklch

oklch(54.0% 0.092 253.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FDEFB0

AFBEFD

Analogous

FDC8AF

FDEFB0

E4FDAF

Triadic

FDEFB0

AFFDEF

EFAFFD

Split-Comp.

FDEFB0

AFE4FD

C8AFFD

Tetradic

FDEFB0

AFFDC8

AFBEFD

FDAFE4

Contrast Matrix WCAG 2.1 Contrast

FDEFB0	E7A8B1	B998B3	77779D	4771A3
—	1.7 Fail	2.2 Fail	3.7 AA Large	4.4 AA Large
1.7 Fail	—	1.3 Fail	2.2 Fail	2.6 Fail
2.2 Fail	1.3 Fail	—	1.7 Fail	2.0 Fail
3.7 AA Large	2.2 Fail	1.7 Fail	—	1.2 Fail
4.4 AA Large	2.6 Fail	2.0 Fail	1.2 Fail	—

White BG

1.2Fail

2.0Fail

2.6Fail

4.3AA Large

5.0AA

Black BG

18.2AAA

10.6AAA

8.2AAA

4.9AA

4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F7F7BF

CCCBAF

ABAAAC

777794

595A97

Deuteranopia

F8F9C3

CFD4AE

ADAFAB

777792

575494

Tritanopia

FCCBCE

E4ADAD

B7A7A6

778D8B

498D8B

Achromatopsia

ECECEC

BCBCBC

A5A5A5

7B7B7B

6A6A6A

Shades & Tints Shades & Tints

#FDEFB0

Dark

Light

#E7A8B1

Dark

Light

#B998B3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fdefb0;
  --color-2: #e7a8b1;
  --color-3: #b998b3;
  --color-4: #77779d;
  --color-5: #4771a3;
}

SCSS

$color-1: #fdefb0;
$color-2: #e7a8b1;
$color-3: #b998b3;
$color-4: #77779d;
$color-5: #4771a3;

TAILWIND

colors: {
  'brand-1': '#fdefb0',
  'brand-2': '#e7a8b1',
  'brand-3': '#b998b3',
  'brand-4': '#77779d',
  'brand-5': '#4771a3',
}

RGB Array

[253, 239, 176], [231, 168, 177], [185, 152, 179], [119, 119, 157], [71, 113, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #FDEFB0, #E7A8B1, #B998B3, #77779D, #4771A3 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: #fdefb0; --color-2: #e7a8b1; --color-3: #b998b3; --color-4: #77779d; --color-5: #4771a3. 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 cool-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