← Back to Editor

#FFEFE1 · #A4DAD2 · #4BB9C2 · #0086CB · #1E439B

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

#FFEFE1

Apricot · Linen · Peach Orange

HEX
#FFEFE1
RGB
rgb(255, 239, 225)
HSL
hsl(28, 100%, 94%)
HSB
hsb(28, 12%, 100%)
CMYK
cmyk(0%, 6%, 12%, 0%)
Oklch
oklch(96.1% 0.025 63.7)

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

#A4DAD2

Jade · LightBlue · Lake Green

HEX
#A4DAD2
RGB
rgb(164, 218, 210)
HSL
hsl(171, 42%, 75%)
HSB
hsb(171, 25%, 85%)
CMYK
cmyk(25%, 0%, 4%, 15%)
Oklch
oklch(84.9% 0.057 184.9)

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

#4BB9C2

Slate Blue · MediumTurquoise · Lake Green

HEX
#4BB9C2
RGB
rgb(75, 185, 194)
HSL
hsl(185, 49%, 53%)
HSB
hsb(185, 61%, 76%)
CMYK
cmyk(61%, 5%, 0%, 24%)
Oklch
oklch(72.7% 0.100 202.7)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#0086CB

Lake Blue · DodgerBlue · Prussian Blue

HEX
#0086CB
RGB
rgb(0, 134, 203)
HSL
hsl(200, 100%, 40%)
HSB
hsb(200, 100%, 80%)
CMYK
cmyk(100%, 34%, 0%, 20%)
Oklch
oklch(59.5% 0.142 242.3)

Traditional「Lake Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#1E439B

Indigo · DarkSlateBlue · Prussian Blue

HEX
#1E439B
RGB
rgb(30, 67, 155)
HSL
hsl(222, 68%, 36%)
HSB
hsb(222, 81%, 61%)
CMYK
cmyk(81%, 57%, 0%, 39%)
Oklch
oklch(41.3% 0.150 263.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFEFE1
E0F1FF

Analogous

FFE0E1
FFEFE1
FFFEE0

Triadic

FFEFE1
E0FFEF
EFE0FF

Split-Comp.

FFEFE1
E0FFFE
E0E1FF

Tetradic

FFEFE1
E1FFE0
E0F1FF
FEE0FF

Contrast Matrix WCAG 2.1 Contrast

FFEFE1
A4DAD2
4BB9C2
0086CB
1E439B
—
1.4
Fail
2.1
Fail
3.5
AA Large
8.0
AAA
1.4
Fail
—
1.5
Fail
2.6
Fail
5.8
AA
2.1
Fail
1.5
Fail
—
1.7
Fail
3.9
AA Large
3.5
AA Large
2.6
Fail
1.7
Fail
—
2.3
Fail
8.0
AAA
5.8
AA
3.9
AA Large
2.3
Fail
—
White BG
1.1Fail
1.6Fail
2.3Fail
4.0AA Large
9.0AAA
Black BG
18.7AAA
13.5AAA
9.0AAA
5.3AA
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F8E4
BBBCD4
7B7CC0
3A3BBA
2E2E86

Deuteranopia

F9FAE5
B8B4D4
746CBF
3228B6
2C2981

Tritanopia

FEE7E8
A7D5D6
51BEBE
07ADAA
207571

Achromatopsia

F2F2F2
C9C9C9
999999
666666
424242

Shades & Tints Shades & Tints

#FFEFE1

Dark
Light

#A4DAD2

Dark
Light

#4BB9C2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffefe1;
  --color-2: #a4dad2;
  --color-3: #4bb9c2;
  --color-4: #0086cb;
  --color-5: #1e439b;
}

SCSS

$color-1: #ffefe1;
$color-2: #a4dad2;
$color-3: #4bb9c2;
$color-4: #0086cb;
$color-5: #1e439b;

TAILWIND

colors: {
  'brand-1': '#ffefe1',
  'brand-2': '#a4dad2',
  'brand-3': '#4bb9c2',
  'brand-4': '#0086cb',
  'brand-5': '#1e439b',
}

RGB Array

[255, 239, 225], [164, 218, 210], [75, 185, 194], [0, 134, 203], [30, 67, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFEFE1, #A4DAD2, #4BB9C2, #0086CB, #1E439B is ideal for: social media posters, mobile apps, e-commerce promos, 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: #ffefe1; --color-2: #a4dad2; --color-3: #4bb9c2; --color-4: #0086cb; --color-5: #1e439b. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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