#C3E1C2 + #F6E1B7 + #F6C689 + #F6886E + #72747F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C3E1C2

Celadon · LightGray · Mint Green

HEX

#C3E1C2

RGB

rgb(195, 225, 194)

HSL

hsl(118, 34%, 82%)

HSB

hsb(118, 14%, 88%)

CMYK

cmyk(13%, 0%, 14%, 12%)

Oklch

oklch(87.9% 0.053 144.3)

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

#F6E1B7

Goose Yellow · Wheat · Lemon Cream

HEX

#F6E1B7

RGB

rgb(246, 225, 183)

HSL

hsl(40, 78%, 84%)

HSB

hsb(40, 26%, 96%)

CMYK

cmyk(0%, 9%, 26%, 4%)

Oklch

oklch(91.6% 0.059 84.5)

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

#F6C689

Goose Yellow · BurlyWood · Warm Sun

HEX

#F6C689

RGB

rgb(246, 198, 137)

HSL

hsl(34, 86%, 75%)

HSB

hsb(34, 44%, 96%)

CMYK

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

Oklch

oklch(85.5% 0.095 72.7)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#F6886E

Peach Pink · Salmon · Coral Red

HEX

#F6886E

RGB

rgb(246, 136, 110)

HSL

hsl(11, 88%, 70%)

HSB

hsb(11, 55%, 96%)

CMYK

cmyk(0%, 45%, 55%, 4%)

Oklch

oklch(74.1% 0.140 34.3)

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

#72747F

Ink Gray · Gray · Warm Gray

HEX

#72747F

RGB

rgb(114, 116, 127)

HSL

hsl(231, 5%, 47%)

HSB

hsb(231, 10%, 50%)

CMYK

cmyk(10%, 9%, 0%, 50%)

Oklch

oklch(56.1% 0.017 277.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3E1C2

E0C1E1

Analogous

D2E1C1

C3E1C2

C1E1D0

Triadic

C3E1C2

C1C3E1

E1C1C3

Split-Comp.

C3E1C2

D0C1E1

E1C1D2

Tetradic

C3E1C2

C1D2E1

E0C1E1

E1D0C1

Contrast Matrix WCAG 2.1 Contrast

C3E1C2	F6E1B7	F6C689	F6886E	72747F
—	1.1 Fail	1.1 Fail	1.7 Fail	3.3 AA Large
1.1 Fail	—	1.2 Fail	1.9 Fail	3.6 AA Large
1.1 Fail	1.2 Fail	—	1.5 Fail	3.0 Fail
1.7 Fail	1.9 Fail	1.5 Fail	—	1.9 Fail
3.3 AA Large	3.6 AA Large	3.0 Fail	1.9 Fail	—

White BG

1.4Fail

1.3Fail

1.6Fail

2.4Fail

4.6AA

Black BG

14.9AAA

16.4AAA

13.4AAA

8.7AAA

4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D0CA

EDEDC1

E1E198

C6C574

73737C

Deuteranopia

CECCCB

EEF0C4

E4E89B

CDD576

73737C

Tritanopia

C5CFD1

F5C9CB

F4A3A6

F1797A

727A7A

Achromatopsia

D4D4D4

E2E2E2

CDCDCD

A6A6A6

757575

Shades & Tints Shades & Tints

#C3E1C2

Dark

Light

#F6E1B7

Dark

Light

#F6C689

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3e1c2;
  --color-2: #f6e1b7;
  --color-3: #f6c689;
  --color-4: #f6886e;
  --color-5: #72747f;
}

SCSS

$color-1: #c3e1c2;
$color-2: #f6e1b7;
$color-3: #f6c689;
$color-4: #f6886e;
$color-5: #72747f;

TAILWIND

colors: {
  'brand-1': '#c3e1c2',
  'brand-2': '#f6e1b7',
  'brand-3': '#f6c689',
  'brand-4': '#f6886e',
  'brand-5': '#72747f',
}

RGB Array

[195, 225, 194], [246, 225, 183], [246, 198, 137], [246, 136, 110], [114, 116, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C3E1C2, #F6E1B7, #F6C689, #F6886E, #72747F 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: #c3e1c2; --color-2: #f6e1b7; --color-3: #f6c689; --color-4: #f6886e; --color-5: #72747f. 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