#A0D4DF + #BDD7CC + #F4E4CD + #DAA5AF + #AF8090 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A0D4DF

Sky Blue · LightBlue · Lake Green

HEX

#A0D4DF

RGB

rgb(160, 212, 223)

HSL

hsl(190, 50%, 75%)

HSB

hsb(190, 28%, 87%)

CMYK

cmyk(28%, 5%, 0%, 13%)

Oklch

oklch(83.7% 0.056 212.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#BDD7CC

Jade · LightGray · Apple Green

HEX

#BDD7CC

RGB

rgb(189, 215, 204)

HSL

hsl(155, 25%, 79%)

HSB

hsb(155, 12%, 84%)

CMYK

cmyk(12%, 0%, 5%, 16%)

Oklch

oklch(85.7% 0.032 168.2)

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

#F4E4CD

Goose Yellow · Bisque · Peach Orange

HEX

#F4E4CD

RGB

rgb(244, 228, 205)

HSL

hsl(35, 64%, 88%)

HSB

hsb(35, 16%, 96%)

CMYK

cmyk(0%, 7%, 16%, 4%)

Oklch

oklch(92.6% 0.035 77.1)

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

#DAA5AF

Peach Pink · Tan · Coral Red

HEX

#DAA5AF

RGB

rgb(218, 165, 175)

HSL

hsl(349, 42%, 75%)

HSB

hsb(349, 24%, 85%)

CMYK

cmyk(0%, 24%, 20%, 15%)

Oklch

oklch(77.4% 0.064 6.1)

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

#AF8090

Dark Violet · DarkGray · Rose Pink

HEX

#AF8090

RGB

rgb(175, 128, 144)

HSL

hsl(340, 23%, 59%)

HSB

hsb(340, 27%, 69%)

CMYK

cmyk(0%, 27%, 18%, 31%)

Oklch

oklch(65.1% 0.062 356.8)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A0D4DF

DFAA9F

Analogous

9FDFCA

A0D4DF

9FB5DF

Triadic

A0D4DF

DF9FD4

D4DF9F

Split-Comp.

A0D4DF

DF9FB5

DFCA9F

Tetradic

A0D4DF

CA9FDF

DFAA9F

B5DF9F

Contrast Matrix WCAG 2.1 Contrast

A0D4DF	BDD7CC	F4E4CD	DAA5AF	AF8090
—	1.1 Fail	1.3 Fail	1.3 Fail	2.1 Fail
1.1 Fail	—	1.2 Fail	1.4 Fail	2.2 Fail
1.3 Fail	1.2 Fail	—	1.7 Fail	2.7 Fail
1.3 Fail	1.4 Fail	1.7 Fail	—	1.6 Fail
2.1 Fail	2.2 Fail	2.7 Fail	1.6 Fail	—

White BG

1.6Fail

1.5Fail

1.2Fail

2.1Fail

3.3AA Large

Black BG

13.0AAA

13.8AAA

16.8AAA

10.0AAA

6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B7DC

C8C8CF

EDEDD3

C3C3AD

9B9A8C

Deuteranopia

B4B0DC

C7C5CF

EEEFD4

C6CAAC

9DA18B

Tritanopia

A3DADA

BED1D1

F3D7D8

D7ABAA

AD8988

Achromatopsia

C6C6C6

CECECE

E6E6E6

B6B6B6

909090

Shades & Tints Shades & Tints

#A0D4DF

Dark

Light

#BDD7CC

Dark

Light

#F4E4CD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a0d4df;
  --color-2: #bdd7cc;
  --color-3: #f4e4cd;
  --color-4: #daa5af;
  --color-5: #af8090;
}

SCSS

$color-1: #a0d4df;
$color-2: #bdd7cc;
$color-3: #f4e4cd;
$color-4: #daa5af;
$color-5: #af8090;

TAILWIND

colors: {
  'brand-1': '#a0d4df',
  'brand-2': '#bdd7cc',
  'brand-3': '#f4e4cd',
  'brand-4': '#daa5af',
  'brand-5': '#af8090',
}

RGB Array

[160, 212, 223], [189, 215, 204], [244, 228, 205], [218, 165, 175], [175, 128, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A0D4DF, #BDD7CC, #F4E4CD, #DAA5AF, #AF8090 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: #a0d4df; --color-2: #bdd7cc; --color-3: #f4e4cd; --color-4: #daa5af; --color-5: #af8090. 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