#A8C2C3 + #C2CDC5 + #FDE7D2 + #F4D3C4 + #F3C7BC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A8C2C3

Sky Blue · Silver · Lake Green

HEX

#A8C2C3

RGB

rgb(168, 194, 195)

HSL

hsl(182, 18%, 71%)

HSB

hsb(182, 14%, 76%)

CMYK

cmyk(14%, 1%, 0%, 24%)

Oklch

oklch(79.5% 0.028 199.4)

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

#C2CDC5

Celadon · Silver · Apple Green

HEX

#C2CDC5

RGB

rgb(194, 205, 197)

HSL

hsl(136, 10%, 78%)

HSB

hsb(136, 5%, 80%)

CMYK

cmyk(5%, 0%, 4%, 20%)

Oklch

oklch(83.8% 0.016 154.4)

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

#FDE7D2

Apricot · Bisque · Peach Orange

HEX

#FDE7D2

RGB

rgb(253, 231, 210)

HSL

hsl(29, 91%, 91%)

HSB

hsb(29, 17%, 99%)

CMYK

cmyk(0%, 9%, 17%, 1%)

Oklch

oklch(94.0% 0.037 66.0)

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

#F4D3C4

Apricot · Bisque · Peach Orange

HEX

#F4D3C4

RGB

rgb(244, 211, 196)

HSL

hsl(19, 69%, 86%)

HSB

hsb(19, 20%, 96%)

CMYK

cmyk(0%, 14%, 20%, 4%)

Oklch

oklch(89.1% 0.042 45.9)

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

#F3C7BC

Peach Pink · Pink · Cherry Blossom

HEX

#F3C7BC

RGB

rgb(243, 199, 188)

HSL

hsl(12, 70%, 85%)

HSB

hsb(12, 23%, 95%)

CMYK

cmyk(0%, 18%, 23%, 5%)

Oklch

oklch(86.5% 0.053 34.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A8C2C3

C2A9A8

Analogous

A8C2B6

A8C2C3

A8B4C2

Triadic

A8C2C3

C2A8C1

C1C2A8

Split-Comp.

A8C2C3

C2A8B4

C2B6A8

Tetradic

A8C2C3

B6A8C2

C2A9A8

B4C2A8

Contrast Matrix WCAG 2.1 Contrast

A8C2C3	C2CDC5	FDE7D2	F4D3C4	F3C7BC
—	1.1 Fail	1.6 Fail	1.3 Fail	1.2 Fail
1.1 Fail	—	1.4 Fail	1.2 Fail	1.1 Fail
1.6 Fail	1.4 Fail	—	1.2 Fail	1.3 Fail
1.3 Fail	1.2 Fail	1.2 Fail	—	1.1 Fail
1.2 Fail	1.1 Fail	1.3 Fail	1.1 Fail	—

White BG

1.9Fail

1.6Fail

1.2Fail

1.4Fail

1.5Fail

Black BG

11.2AAA

12.8AAA

17.5AAA

15.0AAA

13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B3C3

C7C7C7

F3F3D7

E6E5C8

E0E0BF

Deuteranopia

B2B0C3

C6C5C7

F5F6D8

E8EAC9

E3E6BF

Tritanopia

A9C3C3

C3C8C9

FCDBDC

F2CACB

F1C1C1

Achromatopsia

BABABA

C9C9C9

EBEBEB

DBDBDB

D3D3D3

Shades & Tints Shades & Tints

#A8C2C3

Dark

Light

#C2CDC5

Dark

Light

#FDE7D2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a8c2c3;
  --color-2: #c2cdc5;
  --color-3: #fde7d2;
  --color-4: #f4d3c4;
  --color-5: #f3c7bc;
}

SCSS

$color-1: #a8c2c3;
$color-2: #c2cdc5;
$color-3: #fde7d2;
$color-4: #f4d3c4;
$color-5: #f3c7bc;

TAILWIND

colors: {
  'brand-1': '#a8c2c3',
  'brand-2': '#c2cdc5',
  'brand-3': '#fde7d2',
  'brand-4': '#f4d3c4',
  'brand-5': '#f3c7bc',
}

RGB Array

[168, 194, 195], [194, 205, 197], [253, 231, 210], [244, 211, 196], [243, 199, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A8C2C3, #C2CDC5, #FDE7D2, #F4D3C4, #F3C7BC 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: #a8c2c3; --color-2: #c2cdc5; --color-3: #fde7d2; --color-4: #f4d3c4; --color-5: #f3c7bc. 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