← Back to Editor

#696F91 · #FFFCD1 · #F6DDB5 · #E49694 · #E26E83

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#696F91

Indigo · SlateGray · Navy Blue

HEX
#696F91
RGB
rgb(105, 111, 145)
HSL
hsl(231, 16%, 49%)
HSB
hsb(231, 28%, 57%)
CMYK
cmyk(28%, 23%, 0%, 43%)
Oklch
oklch(55.0% 0.053 276.7)

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

#FFFCD1

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFCD1
RGB
rgb(255, 252, 209)
HSL
hsl(56, 100%, 91%)
HSB
hsb(56, 18%, 100%)
CMYK
cmyk(0%, 1%, 18%, 0%)
Oklch
oklch(98.3% 0.056 104.1)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F6DDB5

Goose Yellow · Wheat · Peach Orange

HEX
#F6DDB5
RGB
rgb(246, 221, 181)
HSL
hsl(37, 78%, 84%)
HSB
hsb(37, 26%, 96%)
CMYK
cmyk(0%, 10%, 26%, 4%)
Oklch
oklch(90.8% 0.059 79.5)

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

#E49694

Peach Pink · DarkSalmon · Coral Red

HEX
#E49694
RGB
rgb(228, 150, 148)
HSL
hsl(1, 60%, 74%)
HSB
hsb(1, 35%, 89%)
CMYK
cmyk(0%, 34%, 35%, 11%)
Oklch
oklch(75.1% 0.095 21.2)

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

#E26E83

Peach Pink · LightCoral · Coral Red

HEX
#E26E83
RGB
rgb(226, 110, 131)
HSL
hsl(349, 67%, 66%)
HSB
hsb(349, 51%, 89%)
CMYK
cmyk(0%, 51%, 42%, 11%)
Oklch
oklch(68.0% 0.145 10.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

696F91
918B69

Analogous

698391
696F91
776991

Triadic

696F91
91696F
6F9169

Split-Comp.

696F91
917769
839169

Tetradic

696F91
916983
918B69
699177

Contrast Matrix WCAG 2.1 Contrast

696F91
FFFCD1
F6DDB5
E49694
E26E83
—
4.7
AA
3.7
AA Large
2.1
Fail
1.6
Fail
4.7
AA
—
1.3
Fail
2.2
Fail
3.0
Fail
3.7
AA Large
1.3
Fail
—
1.8
Fail
2.3
Fail
2.1
Fail
2.2
Fail
1.8
Fail
—
1.3
Fail
1.6
Fail
3.0
Fail
2.3
Fail
1.3
Fail
—
White BG
4.9AA
1.0Fail
1.3Fail
2.3Fail
3.1AA Large
Black BG
4.3AA Large
20.1AAA
15.9AAA
9.1AAA
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6C89
FEFEDB
EBEBBF
C2C294
B0AF7E

Deuteranopia

6B6B87
FEFEDE
EDEFC1
C7CD95
B7BF7D

Tritanopia

698281
FFE4E5
F5C6C8
E09595
DC7A79

Achromatopsia

717171
F8F8F8
E0E0E0
ADADAD
939393

Shades & Tints Shades & Tints

#696F91

Dark
Light

#FFFCD1

Dark
Light

#F6DDB5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #696f91;
  --color-2: #fffcd1;
  --color-3: #f6ddb5;
  --color-4: #e49694;
  --color-5: #e26e83;
}

SCSS

$color-1: #696f91;
$color-2: #fffcd1;
$color-3: #f6ddb5;
$color-4: #e49694;
$color-5: #e26e83;

TAILWIND

colors: {
  'brand-1': '#696f91',
  'brand-2': '#fffcd1',
  'brand-3': '#f6ddb5',
  'brand-4': '#e49694',
  'brand-5': '#e26e83',
}

RGB Array

[105, 111, 145], [255, 252, 209], [246, 221, 181], [228, 150, 148], [226, 110, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #696F91, #FFFCD1, #F6DDB5, #E49694, #E26E83 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #696f91; --color-2: #fffcd1; --color-3: #f6ddb5; --color-4: #e49694; --color-5: #e26e83. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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