#C1D6C9 + #91CFC3 + #69C3CF + #979ADE + #C186C2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C1D6C9

Celadon · LightGray · Apple Green

HEX

#C1D6C9

RGB

rgb(193, 214, 201)

HSL

hsl(143, 20%, 80%)

HSB

hsb(143, 10%, 84%)

CMYK

cmyk(10%, 0%, 6%, 16%)

Oklch

oklch(85.7% 0.029 158.6)

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

#91CFC3

Jade · SkyBlue · Lake Green

HEX

#91CFC3

RGB

rgb(145, 207, 195)

HSL

hsl(168, 39%, 69%)

HSB

hsb(168, 30%, 81%)

CMYK

cmyk(30%, 0%, 6%, 19%)

Oklch

oklch(80.9% 0.066 181.2)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#69C3CF

Sky Blue · MediumTurquoise · Lake Green

HEX

#69C3CF

RGB

rgb(105, 195, 207)

HSL

hsl(187, 52%, 61%)

HSB

hsb(187, 49%, 81%)

CMYK

cmyk(49%, 6%, 0%, 19%)

Oklch

oklch(76.6% 0.088 206.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#979ADE

Azure · LightSteelBlue · Cobalt Blue

HEX

#979ADE

RGB

rgb(151, 154, 222)

HSL

hsl(237, 52%, 73%)

HSB

hsb(237, 32%, 87%)

CMYK

cmyk(32%, 31%, 0%, 13%)

Oklch

oklch(71.0% 0.099 281.6)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#C186C2

Lilac · Orchid · Lilac Purple

HEX

#C186C2

RGB

rgb(193, 134, 194)

HSL

hsl(299, 33%, 64%)

HSB

hsb(299, 31%, 76%)

CMYK

cmyk(1%, 31%, 0%, 24%)

Oklch

oklch(69.9% 0.108 326.1)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C1D6C9

D6C2CE

Analogous

C4D6C2

C1D6C9

C2D6D4

Triadic

C1D6C9

CAC2D6

D6CAC2

Split-Comp.

C1D6C9

D4C2D6

D6C2C4

Tetradic

C1D6C9

C2C4D6

D6C2CE

D6D4C2

Contrast Matrix WCAG 2.1 Contrast

C1D6C9	91CFC3	69C3CF	979ADE	C186C2
—	1.2 Fail	1.3 Fail	1.7 Fail	1.8 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	1.6 Fail
1.3 Fail	1.2 Fail	—	1.3 Fail	1.4 Fail
1.7 Fail	1.5 Fail	1.3 Fail	—	1.1 Fail
1.8 Fail	1.6 Fail	1.4 Fail	1.1 Fail	—

White BG

1.5Fail

1.8Fail

2.0Fail

2.6Fail

2.8Fail

Black BG

13.7AAA

11.9AAA

10.3AAA

8.0AAA

7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACACC

ACACC6

9091CC

9898CE

A7A7B3

Deuteranopia

C9C7CD

A8A4C7

8B84CB

9898CA

ABAFB0

Tritanopia

C2CFCF

94C8C9

6ECAC9

97C1BE

BEA8A6

Achromatopsia

CECECE

BBBBBB

A9A9A9

A1A1A1

9E9E9E

Shades & Tints Shades & Tints

#C1D6C9

Dark

Light

#91CFC3

Dark

Light

#69C3CF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c1d6c9;
  --color-2: #91cfc3;
  --color-3: #69c3cf;
  --color-4: #979ade;
  --color-5: #c186c2;
}

SCSS

$color-1: #c1d6c9;
$color-2: #91cfc3;
$color-3: #69c3cf;
$color-4: #979ade;
$color-5: #c186c2;

TAILWIND

colors: {
  'brand-1': '#c1d6c9',
  'brand-2': '#91cfc3',
  'brand-3': '#69c3cf',
  'brand-4': '#979ade',
  'brand-5': '#c186c2',
}

RGB Array

[193, 214, 201], [145, 207, 195], [105, 195, 207], [151, 154, 222], [193, 134, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C1D6C9, #91CFC3, #69C3CF, #979ADE, #C186C2 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: #c1d6c9; --color-2: #91cfc3; --color-3: #69c3cf; --color-4: #979ade; --color-5: #c186c2. 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