#70706C + #FAAFAA + #CFC7B4 + #A6D4B7 + #B1D8B7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#70706C

Ink Gray · DimGray · Warm Gray

HEX

#70706C

RGB

rgb(112, 112, 108)

HSL

hsl(60, 2%, 43%)

HSB

hsb(60, 4%, 44%)

CMYK

cmyk(0%, 0%, 4%, 56%)

Oklch

oklch(54.4% 0.006 106.6)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#FAAFAA

Peach Pink · LightPink · Cherry Blossom

HEX

#FAAFAA

RGB

rgb(250, 175, 170)

HSL

hsl(4, 89%, 82%)

HSB

hsb(4, 32%, 98%)

CMYK

cmyk(0%, 30%, 32%, 2%)

Oklch

oklch(82.4% 0.089 23.4)

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

#CFC7B4

Goose Yellow · Silver · Lemon Cream

HEX

#CFC7B4

RGB

rgb(207, 199, 180)

HSL

hsl(42, 22%, 76%)

HSB

hsb(42, 13%, 81%)

CMYK

cmyk(0%, 4%, 13%, 19%)

Oklch

oklch(83.1% 0.027 87.9)

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

#A6D4B7

Celadon · Silver · Apple Green

HEX

#A6D4B7

RGB

rgb(166, 212, 183)

HSL

hsl(142, 35%, 74%)

HSB

hsb(142, 22%, 83%)

CMYK

cmyk(22%, 0%, 14%, 17%)

Oklch

oklch(82.9% 0.063 157.1)

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

#B1D8B7

Celadon · Silver · Apple Green

HEX

#B1D8B7

RGB

rgb(177, 216, 183)

HSL

hsl(129, 33%, 77%)

HSB

hsb(129, 18%, 85%)

CMYK

cmyk(18%, 0%, 15%, 15%)

Oklch

oklch(84.5% 0.061 149.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

70706C

6B6B70

Analogous

706E6B

70706C

6E706B

Triadic

70706C

6B7070

706B70

Split-Comp.

70706C

6B6E70

6E6B70

Tetradic

70706C

6B706E

6B6B70

706B6E

Contrast Matrix WCAG 2.1 Contrast

70706C	FAAFAA	CFC7B4	A6D4B7	B1D8B7
—	2.8 Fail	3.0 Fail	3.0 AA Large	3.2 AA Large
2.8 Fail	—	1.1 Fail	1.1 Fail	1.1 Fail
3.0 Fail	1.1 Fail	—	1.0 Fail	1.1 Fail
3.0 AA Large	1.1 Fail	1.0 Fail	—	1.1 Fail
3.2 AA Large	1.1 Fail	1.1 Fail	1.1 Fail	—

White BG

5.0AA

1.8Fail

1.7Fail

1.6Fail

Black BG

4.2AA Large

11.8AAA

12.5AAA

12.7AAA

13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

70706D

DAD9AB

CCCBB9

BABABE

C2C2BF

Deuteranopia

70706D

DEE4AC

CCCDBA

B7B4C0

C0BDC1

Tritanopia

706E6E

F6ACAC

CFBCBD

A8C4C5

B3C5C7

Achromatopsia

707070

C5C5C5

C7C7C7

C3C3C3

C9C9C9

Shades & Tints Shades & Tints

#70706C

Dark

Light

#FAAFAA

Dark

Light

#CFC7B4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #70706c;
  --color-2: #faafaa;
  --color-3: #cfc7b4;
  --color-4: #a6d4b7;
  --color-5: #b1d8b7;
}

SCSS

$color-1: #70706c;
$color-2: #faafaa;
$color-3: #cfc7b4;
$color-4: #a6d4b7;
$color-5: #b1d8b7;

TAILWIND

colors: {
  'brand-1': '#70706c',
  'brand-2': '#faafaa',
  'brand-3': '#cfc7b4',
  'brand-4': '#a6d4b7',
  'brand-5': '#b1d8b7',
}

RGB Array

[112, 112, 108], [250, 175, 170], [207, 199, 180], [166, 212, 183], [177, 216, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #70706C, #FAAFAA, #CFC7B4, #A6D4B7, #B1D8B7 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: #70706c; --color-2: #faafaa; --color-3: #cfc7b4; --color-4: #a6d4b7; --color-5: #b1d8b7. 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