#A0C3B3 + #D5E8DC + #F1EDD8 + #FFF1D3 + #F8E4C8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A0C3B3

Jade · DarkGray · Apple Green

HEX

#A0C3B3

RGB

rgb(160, 195, 179)

HSL

hsl(153, 23%, 70%)

HSB

hsb(153, 18%, 76%)

CMYK

cmyk(18%, 0%, 8%, 24%)

Oklch

oklch(78.7% 0.044 165.8)

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

#D5E8DC

Celadon · LightGray · Mint Green

HEX

#D5E8DC

RGB

rgb(213, 232, 220)

HSL

hsl(142, 29%, 87%)

HSB

hsb(142, 8%, 91%)

CMYK

cmyk(8%, 0%, 5%, 9%)

Oklch

oklch(91.4% 0.026 158.2)

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

#F1EDD8

Fresh Green · Beige · Lemon Cream

HEX

#F1EDD8

RGB

rgb(241, 237, 216)

HSL

hsl(50, 47%, 90%)

HSB

hsb(50, 10%, 95%)

CMYK

cmyk(0%, 2%, 10%, 5%)

Oklch

oklch(94.4% 0.028 98.1)

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

#FFF1D3

Goose Yellow · Beige · Lemon Cream

HEX

#FFF1D3

RGB

rgb(255, 241, 211)

HSL

hsl(41, 100%, 91%)

HSB

hsb(41, 17%, 100%)

CMYK

cmyk(0%, 5%, 17%, 0%)

Oklch

oklch(96.1% 0.042 86.0)

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

#F8E4C8

Goose Yellow · Bisque · Peach Orange

HEX

#F8E4C8

RGB

rgb(248, 228, 200)

HSL

hsl(35, 77%, 88%)

HSB

hsb(35, 19%, 97%)

CMYK

cmyk(0%, 8%, 19%, 3%)

Oklch

oklch(92.8% 0.043 76.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A0C3B3

C4A1B1

Analogous

A1C4A3

A0C3B3

A1C2C4

Triadic

A0C3B3

B4A1C4

C4B4A1

Split-Comp.

A0C3B3

C4A1C2

C4A3A1

Tetradic

A0C3B3

A3A1C4

C4A1B1

C2C4A1

Contrast Matrix WCAG 2.1 Contrast

A0C3B3	D5E8DC	F1EDD8	FFF1D3	F8E4C8
—	1.5 Fail	1.6 Fail	1.7 Fail	1.5 Fail
1.5 Fail	—	1.1 Fail	1.1 Fail	1.0 Fail
1.6 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.7 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.5 Fail	1.0 Fail	1.1 Fail	1.1 Fail	—

White BG

1.9Fail

1.3Fail

1.2Fail

1.1Fail

1.2Fail

Black BG

11.0AAA

16.4AAA

17.8AAA

18.8AAA

16.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAFB7

DDDDDF

EFEFDD

F9F9DA

EFEFCF

Deuteranopia

ADABB8

DCDBE0

F0F0DE

FAFBDC

F1F2D0

Tritanopia

A2BABB

D6E1E2

F1E1E2

FEE0E1

F7D4D5

Achromatopsia

B7B7B7

E1E1E1

ECECEC

F2F2F2

E7E7E7

Shades & Tints Shades & Tints

#A0C3B3

Dark

Light

#D5E8DC

Dark

Light

#F1EDD8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a0c3b3;
  --color-2: #d5e8dc;
  --color-3: #f1edd8;
  --color-4: #fff1d3;
  --color-5: #f8e4c8;
}

SCSS

$color-1: #a0c3b3;
$color-2: #d5e8dc;
$color-3: #f1edd8;
$color-4: #fff1d3;
$color-5: #f8e4c8;

TAILWIND

colors: {
  'brand-1': '#a0c3b3',
  'brand-2': '#d5e8dc',
  'brand-3': '#f1edd8',
  'brand-4': '#fff1d3',
  'brand-5': '#f8e4c8',
}

RGB Array

[160, 195, 179], [213, 232, 220], [241, 237, 216], [255, 241, 211], [248, 228, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A0C3B3, #D5E8DC, #F1EDD8, #FFF1D3, #F8E4C8 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: #a0c3b3; --color-2: #d5e8dc; --color-3: #f1edd8; --color-4: #fff1d3; --color-5: #f8e4c8. 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 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