← Back to Editor

#C3DDB7 · #CBD1A7 · #C9C5A0 · #FF77A9 · #645F4C

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#C3DDB7

Celadon · Silver · Apple Green

HEX
#C3DDB7
RGB
rgb(195, 221, 183)
HSL
hsl(101, 36%, 79%)
HSB
hsb(101, 17%, 87%)
CMYK
cmyk(12%, 0%, 17%, 13%)
Oklch
oklch(86.8% 0.058 135.8)

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

#CBD1A7

Fresh Green · Silver · Sunflower

HEX
#CBD1A7
RGB
rgb(203, 209, 167)
HSL
hsl(69, 31%, 74%)
HSB
hsb(69, 20%, 82%)
CMYK
cmyk(3%, 0%, 20%, 18%)
Oklch
oklch(84.5% 0.057 114.2)

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

#C9C5A0

Fresh Green · Tan · Sunflower

HEX
#C9C5A0
RGB
rgb(201, 197, 160)
HSL
hsl(54, 28%, 71%)
HSB
hsb(54, 20%, 79%)
CMYK
cmyk(0%, 2%, 20%, 21%)
Oklch
oklch(81.7% 0.050 102.3)

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

#FF77A9

Rouge · LightCoral · Rose Pink

HEX
#FF77A9
RGB
rgb(255, 119, 169)
HSL
hsl(338, 100%, 73%)
HSB
hsb(338, 53%, 100%)
CMYK
cmyk(0%, 53%, 34%, 0%)
Oklch
oklch(74.2% 0.172 359.0)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#645F4C

Ochre · DimGray · Honey Gold

HEX
#645F4C
RGB
rgb(100, 95, 76)
HSL
hsl(48, 14%, 35%)
HSB
hsb(48, 24%, 39%)
CMYK
cmyk(0%, 5%, 24%, 61%)
Oklch
oklch(48.5% 0.030 95.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3DDB7
D1B6DD

Analogous

D6DDB6
C3DDB7
B6DDBD

Triadic

C3DDB7
B6C2DD
DDB6C2

Split-Comp.

C3DDB7
BDB6DD
DDB6D6

Tetradic

C3DDB7
B6D6DD
D1B6DD
DDBDB6

Contrast Matrix WCAG 2.1 Contrast

C3DDB7
CBD1A7
C9C5A0
FF77A9
645F4C
—
1.1
Fail
1.2
Fail
1.7
Fail
4.4
AA Large
1.1
Fail
—
1.1
Fail
1.6
Fail
4.0
AA Large
1.2
Fail
1.1
Fail
—
1.4
Fail
3.6
AA Large
1.7
Fail
1.6
Fail
1.4
Fail
—
2.6
Fail
4.4
AA Large
4.0
AA Large
3.6
AA Large
2.6
Fail
—
White BG
1.5Fail
1.6Fail
1.8Fail
2.5Fail
6.4AA
Black BG
14.3AAA
13.2AAA
12.0AAA
8.5AAA
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECEC0
CECEB1
C7C7A9
C4C39D
626251

Deuteranopia

CDCBC2
CDCDB4
C8C8AB
CCD69A
626352

Tritanopia

C4C7C9
CBB9BB
C9B0B2
F89391
645455

Achromatopsia

D1D1D1
CACACA
C2C2C2
A5A5A5
5E5E5E

Shades & Tints Shades & Tints

#C3DDB7

Dark
Light

#CBD1A7

Dark
Light

#C9C5A0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3ddb7;
  --color-2: #cbd1a7;
  --color-3: #c9c5a0;
  --color-4: #ff77a9;
  --color-5: #645f4c;
}

SCSS

$color-1: #c3ddb7;
$color-2: #cbd1a7;
$color-3: #c9c5a0;
$color-4: #ff77a9;
$color-5: #645f4c;

TAILWIND

colors: {
  'brand-1': '#c3ddb7',
  'brand-2': '#cbd1a7',
  'brand-3': '#c9c5a0',
  'brand-4': '#ff77a9',
  'brand-5': '#645f4c',
}

RGB Array

[195, 221, 183], [203, 209, 167], [201, 197, 160], [255, 119, 169], [100, 95, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C3DDB7, #CBD1A7, #C9C5A0, #FF77A9, #645F4C is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #c3ddb7; --color-2: #cbd1a7; --color-3: #c9c5a0; --color-4: #ff77a9; --color-5: #645f4c. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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