#C3DECE + #A7DBB8 + #AED197 + #BFC274 + #B4B844 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C3DECE

Celadon · LightGray · Mint Green

HEX

#C3DECE

RGB

rgb(195, 222, 206)

HSL

hsl(144, 29%, 82%)

HSB

hsb(144, 12%, 87%)

CMYK

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

Oklch

oklch(87.6% 0.036 159.6)

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

#A7DBB8

Celadon · Silver · Apple Green

HEX

#A7DBB8

RGB

rgb(167, 219, 184)

HSL

hsl(140, 42%, 76%)

HSB

hsb(140, 24%, 86%)

CMYK

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

Oklch

oklch(84.6% 0.073 155.1)

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

#AED197

Celadon · DarkSeaGreen · Apple Green

HEX

#AED197

RGB

rgb(174, 209, 151)

HSL

hsl(96, 39%, 71%)

HSB

hsb(96, 28%, 82%)

CMYK

cmyk(17%, 0%, 28%, 18%)

Oklch

oklch(82.0% 0.087 133.3)

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

#BFC274

Fresh Green · Tan · Sunflower

HEX

#BFC274

RGB

rgb(191, 194, 116)

HSL

hsl(62, 39%, 61%)

HSB

hsb(62, 40%, 76%)

CMYK

cmyk(2%, 0%, 40%, 24%)

Oklch

oklch(79.4% 0.101 110.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#B4B844

Autumn Sage · GoldenRod · Honey Gold

HEX

#B4B844

RGB

rgb(180, 184, 68)

HSL

hsl(62, 46%, 49%)

HSB

hsb(62, 63%, 72%)

CMYK

cmyk(2%, 0%, 63%, 28%)

Oklch

oklch(75.7% 0.138 111.1)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3DECE

DEC4D4

Analogous

C6DEC4

C3DECE

C4DEDC

Triadic

C3DECE

CEC4DE

DECEC4

Split-Comp.

C3DECE

DCC4DE

DEC4C6

Tetradic

C3DECE

C4C6DE

DEC4D4

DEDCC4

Contrast Matrix WCAG 2.1 Contrast

C3DECE	A7DBB8	AED197	BFC274	B4B844
—	1.1 Fail	1.2 Fail	1.3 Fail	1.5 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.4 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.5 Fail	1.4 Fail	1.3 Fail	1.1 Fail	—

White BG

1.4Fail

1.6Fail

1.7Fail

1.9Fail

2.1Fail

Black BG

14.7AAA

13.5AAA

12.4AAA

11.2AAA

9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCFD2

BEBEC0

BDBDA5

C0C087

B6B660

Deuteranopia

CDCBD3

BBB7C3

BBB9A8

C0C08B

B6B567

Tritanopia

C4D5D6

AAC7C9

B0B0B3

BF9699

B4767B

Achromatopsia

D4D4D4

C7C7C7

C0C0C0

B8B8B8

AAAAAA

Shades & Tints Shades & Tints

#C3DECE

Dark

Light

#A7DBB8

Dark

Light

#AED197

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3dece;
  --color-2: #a7dbb8;
  --color-3: #aed197;
  --color-4: #bfc274;
  --color-5: #b4b844;
}

SCSS

$color-1: #c3dece;
$color-2: #a7dbb8;
$color-3: #aed197;
$color-4: #bfc274;
$color-5: #b4b844;

TAILWIND

colors: {
  'brand-1': '#c3dece',
  'brand-2': '#a7dbb8',
  'brand-3': '#aed197',
  'brand-4': '#bfc274',
  'brand-5': '#b4b844',
}

RGB Array

[195, 222, 206], [167, 219, 184], [174, 209, 151], [191, 194, 116], [180, 184, 68]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C3DECE, #A7DBB8, #AED197, #BFC274, #B4B844 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: #c3dece; --color-2: #a7dbb8; --color-3: #aed197; --color-4: #bfc274; --color-5: #b4b844. 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