#68A3A0 + #AFCCBB + #FFD8AD + #F7A592 + #DE7771 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#68A3A0

Mineral Blue · CadetBlue · Lake Green

HEX

#68A3A0

RGB

rgb(104, 163, 160)

HSL

hsl(177, 24%, 52%)

HSB

hsb(177, 36%, 64%)

CMYK

cmyk(36%, 0%, 2%, 36%)

Oklch

oklch(67.4% 0.062 191.7)

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

#AFCCBB

Celadon · Silver · Apple Green

HEX

#AFCCBB

RGB

rgb(175, 204, 187)

HSL

hsl(145, 22%, 74%)

HSB

hsb(145, 14%, 80%)

CMYK

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

Oklch

oklch(81.9% 0.039 159.7)

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

#FFD8AD

Goose Yellow · Wheat · Peach Orange

HEX

#FFD8AD

RGB

rgb(255, 216, 173)

HSL

hsl(31, 100%, 84%)

HSB

hsb(31, 32%, 100%)

CMYK

cmyk(0%, 15%, 32%, 0%)

Oklch

oklch(90.5% 0.071 69.5)

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

#F7A592

Peach Pink · LightSalmon · Coral Red

HEX

#F7A592

RGB

rgb(247, 165, 146)

HSL

hsl(11, 86%, 77%)

HSB

hsb(11, 41%, 97%)

CMYK

cmyk(0%, 33%, 41%, 3%)

Oklch

oklch(79.8% 0.102 33.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#DE7771

Peach Pink · LightCoral · Coral Red

HEX

#DE7771

RGB

rgb(222, 119, 113)

HSL

hsl(3, 62%, 66%)

HSB

hsb(3, 49%, 87%)

CMYK

cmyk(0%, 46%, 49%, 13%)

Oklch

oklch(68.4% 0.129 24.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

68A3A0

A2676A

Analogous

67A282

68A3A0

6788A2

Triadic

68A3A0

9F67A2

A29F67

Split-Comp.

68A3A0

A26788

A28267

Tetradic

68A3A0

8267A2

A2676A

88A267

Contrast Matrix WCAG 2.1 Contrast

68A3A0	AFCCBB	FFD8AD	F7A592	DE7771
—	1.7 Fail	2.1 Fail	1.5 Fail	1.1 Fail
1.7 Fail	—	1.3 Fail	1.1 Fail	1.7 Fail
2.1 Fail	1.3 Fail	—	1.5 Fail	2.2 Fail
1.5 Fail	1.1 Fail	1.5 Fail	—	1.5 Fail
1.1 Fail	1.7 Fail	2.2 Fail	1.5 Fail	—

White BG

2.9Fail

1.7Fail

1.3Fail

2.0Fail

3.0AA Large

Black BG

7.3AAA

12.2AAA

15.7AAA

10.8AAA

7.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8282A1

BCBCBF

EEEEB7

D3D397

B1B072

Deuteranopia

7E7AA1

BAB8C0

F0F3BA

D8DE98

B7BF73

Tritanopia

6BA1A1

B0C2C3

FDC0C1

F39A9B

D97474

Achromatopsia

919191

C1C1C1

DFDFDF

BBBBBB

959595

Shades & Tints Shades & Tints

#68A3A0

Dark

Light

#AFCCBB

Dark

Light

#FFD8AD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #68a3a0;
  --color-2: #afccbb;
  --color-3: #ffd8ad;
  --color-4: #f7a592;
  --color-5: #de7771;
}

SCSS

$color-1: #68a3a0;
$color-2: #afccbb;
$color-3: #ffd8ad;
$color-4: #f7a592;
$color-5: #de7771;

TAILWIND

colors: {
  'brand-1': '#68a3a0',
  'brand-2': '#afccbb',
  'brand-3': '#ffd8ad',
  'brand-4': '#f7a592',
  'brand-5': '#de7771',
}

RGB Array

[104, 163, 160], [175, 204, 187], [255, 216, 173], [247, 165, 146], [222, 119, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #68A3A0, #AFCCBB, #FFD8AD, #F7A592, #DE7771 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: #68a3a0; --color-2: #afccbb; --color-3: #ffd8ad; --color-4: #f7a592; --color-5: #de7771. 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