← Back to Editor

#A3F0FF · #CAF8D1 · #F0FFA3 · #FF751F · #440E3B

muted

A 5-color muted 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

#A3F0FF

Sky Blue · LightBlue · Glacier Blue

HEX
#A3F0FF
RGB
rgb(163, 240, 255)
HSL
hsl(190, 100%, 82%)
HSB
hsb(190, 36%, 100%)
CMYK
cmyk(36%, 6%, 0%, 0%)
Oklch
oklch(91.0% 0.078 211.1)

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

#CAF8D1

Emerald · LightGray · Mint Green

HEX
#CAF8D1
RGB
rgb(202, 248, 209)
HSL
hsl(129, 77%, 88%)
HSB
hsb(129, 19%, 97%)
CMYK
cmyk(19%, 0%, 16%, 3%)
Oklch
oklch(93.7% 0.071 149.3)

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

#F0FFA3

Willow Green · Khaki · Mint Green

HEX
#F0FFA3
RGB
rgb(240, 255, 163)
HSL
hsl(70, 100%, 82%)
HSB
hsb(70, 36%, 100%)
CMYK
cmyk(6%, 0%, 36%, 0%)
Oklch
oklch(96.8% 0.116 116.2)

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

#FF751F

Tangerine · Tomato · Warm Sun

HEX
#FF751F
RGB
rgb(255, 117, 31)
HSL
hsl(23, 100%, 56%)
HSB
hsb(23, 88%, 100%)
CMYK
cmyk(0%, 54%, 88%, 0%)
Oklch
oklch(71.7% 0.189 46.4)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#440E3B

Rose Purple · MidnightBlue · Dark Purple

HEX
#440E3B
RGB
rgb(68, 14, 59)
HSL
hsl(310, 66%, 16%)
HSB
hsb(310, 79%, 27%)
CMYK
cmyk(0%, 79%, 13%, 73%)
Oklch
oklch(27.8% 0.100 335.5)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A3F0FF
FFB3A3

Analogous

A3FFE0
A3F0FF
A3C2FF

Triadic

A3F0FF
FFA3F0
F0FFA3

Split-Comp.

A3F0FF
FFA3C2
FFE0A3

Tetradic

A3F0FF
E0A3FF
FFB3A3
C2FFA3

Contrast Matrix WCAG 2.1 Contrast

A3F0FF
CAF8D1
F0FFA3
FF751F
440E3B
—
1.1
Fail
1.2
Fail
2.1
Fail
12.0
AAA
1.1
Fail
—
1.1
Fail
2.3
Fail
13.0
AAA
1.2
Fail
1.1
Fail
—
2.5
Fail
14.2
AAA
2.1
Fail
2.3
Fail
2.5
Fail
—
5.7
AA
12.0
AAA
13.0
AAA
14.2
AAA
5.7
AA
—
White BG
1.3Fail
1.2Fail
1.1Fail
2.7Fail
15.3AAA
Black BG
16.5AAA
17.9AAA
19.5AAA
7.8AAA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C5FB
DEDEDA
F6F7B9
C3C234
2D2C30

Deuteranopia

C0BAFB
DBD8DD
F6F5BF
CBD639
30342E

Tritanopia

A7F9F8
CCE2E4
F1CBCF
F84448
412826

Achromatopsia

DBDBDB
E6E6E6
F0F0F0
949494
232323

Shades & Tints Shades & Tints

#A3F0FF

Dark
Light

#CAF8D1

Dark
Light

#F0FFA3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a3f0ff;
  --color-2: #caf8d1;
  --color-3: #f0ffa3;
  --color-4: #ff751f;
  --color-5: #440e3b;
}

SCSS

$color-1: #a3f0ff;
$color-2: #caf8d1;
$color-3: #f0ffa3;
$color-4: #ff751f;
$color-5: #440e3b;

TAILWIND

colors: {
  'brand-1': '#a3f0ff',
  'brand-2': '#caf8d1',
  'brand-3': '#f0ffa3',
  'brand-4': '#ff751f',
  'brand-5': '#440e3b',
}

RGB Array

[163, 240, 255], [202, 248, 209], [240, 255, 163], [255, 117, 31], [68, 14, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #A3F0FF, #CAF8D1, #F0FFA3, #FF751F, #440E3B 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: #a3f0ff; --color-2: #caf8d1; --color-3: #f0ffa3; --color-4: #ff751f; --color-5: #440e3b. 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 muted-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