← Back to Editor

#B4AD91 · #DB948E · #F19F67 · #F2F5FE

A 4-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B4AD91

Ginger · DarkGray · Sunflower

HEX
#B4AD91
RGB
rgb(180, 173, 145)
HSL
hsl(48, 19%, 64%)
HSB
hsb(48, 19%, 71%)
CMYK
cmyk(0%, 4%, 19%, 29%)
Oklch
oklch(74.6% 0.040 95.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#DB948E

Peach Pink · DarkSalmon · Coral Red

HEX
#DB948E
RGB
rgb(219, 148, 142)
HSL
hsl(5, 52%, 71%)
HSB
hsb(5, 35%, 86%)
CMYK
cmyk(0%, 32%, 35%, 14%)
Oklch
oklch(73.5% 0.087 24.7)

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

#F19F67

Apricot · SandyBrown · Warm Sun

HEX
#F19F67
RGB
rgb(241, 159, 103)
HSL
hsl(24, 83%, 67%)
HSB
hsb(24, 57%, 95%)
CMYK
cmyk(0%, 34%, 57%, 5%)
Oklch
oklch(77.3% 0.122 54.2)

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

#F2F5FE

Azure · Snow · Sky Blue

HEX
#F2F5FE
RGB
rgb(242, 245, 254)
HSL
hsl(225, 86%, 97%)
HSB
hsb(225, 5%, 100%)
CMYK
cmyk(5%, 4%, 0%, 0%)
Oklch
oklch(97.0% 0.012 271.3)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4AD91
9299B5

Analogous

B59C92
B4AD91
AAB592

Triadic

B4AD91
92B5AE
AE92B5

Split-Comp.

B4AD91
92AAB5
9C92B5

Tetradic

B4AD91
92B59C
9299B5
B592AA

Contrast Matrix WCAG 2.1 Contrast

B4AD91
DB948E
F19F67
F2F5FE
—
1.1
Fail
1.1
Fail
2.1
Fail
1.1
Fail
—
1.1
Fail
2.2
Fail
1.1
Fail
1.1
Fail
—
1.9
Fail
2.1
Fail
2.2
Fail
1.9
Fail
—
White BG
2.3Fail
2.4Fail
2.1Fail
1.1Fail
Black BG
9.3AAA
8.6AAA
9.9AAA
19.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B198
BCBC8F
CDCD75
F3F3FC

Deuteranopia

B1B299
C0C690
D2D878
F3F3FB

Tritanopia

B49D9E
D79191
ED7F82
F2FAFA

Achromatopsia

ACACAC
A9A9A9
B1B1B1
F5F5F5

Shades & Tints Shades & Tints

#B4AD91

Dark
Light

#DB948E

Dark
Light

#F19F67

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4ad91;
  --color-2: #db948e;
  --color-3: #f19f67;
  --color-4: #f2f5fe;
}

SCSS

$color-1: #b4ad91;
$color-2: #db948e;
$color-3: #f19f67;
$color-4: #f2f5fe;

TAILWIND

colors: {
  'brand-1': '#b4ad91',
  'brand-2': '#db948e',
  'brand-3': '#f19f67',
  'brand-4': '#f2f5fe',
}

RGB Array

[180, 173, 145], [219, 148, 142], [241, 159, 103], [242, 245, 254]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #B4AD91, #DB948E, #F19F67, #F2F5FE is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b4ad91; --color-2: #db948e; --color-3: #f19f67; --color-4: #f2f5fe. 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 4-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