← Back to Editor

#C3D1B2 · #A8CAA5 · #77B795 · #788A85 · #91555F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C3D1B2

Willow Green · Silver · Apple Green

HEX
#C3D1B2
RGB
rgb(195, 209, 178)
HSL
hsl(87, 25%, 76%)
HSB
hsb(87, 15%, 82%)
CMYK
cmyk(7%, 0%, 15%, 18%)
Oklch
oklch(84.2% 0.045 127.2)

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

#A8CAA5

Celadon · DarkGray · Apple Green

HEX
#A8CAA5
RGB
rgb(168, 202, 165)
HSL
hsl(115, 26%, 72%)
HSB
hsb(115, 18%, 79%)
CMYK
cmyk(17%, 0%, 18%, 21%)
Oklch
oklch(80.4% 0.063 142.8)

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

#77B795

Celadon · DarkSeaGreen · Olive Green

HEX
#77B795
RGB
rgb(119, 183, 149)
HSL
hsl(148, 31%, 59%)
HSB
hsb(148, 35%, 72%)
CMYK
cmyk(35%, 0%, 19%, 28%)
Oklch
oklch(72.6% 0.083 160.2)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#788A85

Ash · Gray · Warm Gray

HEX
#788A85
RGB
rgb(120, 138, 133)
HSL
hsl(163, 7%, 51%)
HSB
hsb(163, 13%, 54%)
CMYK
cmyk(13%, 0%, 4%, 46%)
Oklch
oklch(61.7% 0.022 177.0)

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

#91555F

Crimson · DimGray · Passion Red

HEX
#91555F
RGB
rgb(145, 85, 95)
HSL
hsl(350, 26%, 45%)
HSB
hsb(350, 41%, 57%)
CMYK
cmyk(0%, 41%, 34%, 43%)
Oklch
oklch(52.1% 0.080 9.5)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3D1B2
C0B3D1

Analogous

D1D0B3
C3D1B2
B4D1B3

Triadic

C3D1B2
B3C3D1
D1B3C3

Split-Comp.

C3D1B2
B3B4D1
D0B3D1

Tetradic

C3D1B2
B3D1D0
C0B3D1
D1B3B4

Contrast Matrix WCAG 2.1 Contrast

C3D1B2
A8CAA5
77B795
788A85
91555F
—
1.1
Fail
1.5
Fail
2.3
Fail
3.6
AA Large
1.1
Fail
—
1.3
Fail
2.0
Fail
3.2
AA Large
1.5
Fail
1.3
Fail
—
1.6
Fail
2.5
Fail
2.3
Fail
2.0
Fail
1.6
Fail
—
1.6
Fail
3.6
AA Large
3.2
AA Large
2.5
Fail
1.6
Fail
—
White BG
1.6Fail
1.8Fail
2.3Fail
3.6AA Large
5.7AA
Black BG
13.1AAA
11.7AAA
9.0AAA
5.8AA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C9BA
B7B7AE
93939D
808086
77765D

Deuteranopia

C8C7BB
B5B2B0
8F8A9F
7F7D87
7B7F5C

Tritanopia

C4BFC1
AAB5B7
7AA4A5
798787
8E5B5A

Achromatopsia

C9C9C9
BCBCBC
A0A0A0
848484
686868

Shades & Tints Shades & Tints

#C3D1B2

Dark
Light

#A8CAA5

Dark
Light

#77B795

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3d1b2;
  --color-2: #a8caa5;
  --color-3: #77b795;
  --color-4: #788a85;
  --color-5: #91555f;
}

SCSS

$color-1: #c3d1b2;
$color-2: #a8caa5;
$color-3: #77b795;
$color-4: #788a85;
$color-5: #91555f;

TAILWIND

colors: {
  'brand-1': '#c3d1b2',
  'brand-2': '#a8caa5',
  'brand-3': '#77b795',
  'brand-4': '#788a85',
  'brand-5': '#91555f',
}

RGB Array

[195, 209, 178], [168, 202, 165], [119, 183, 149], [120, 138, 133], [145, 85, 95]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C3D1B2, #A8CAA5, #77B795, #788A85, #91555F is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #c3d1b2; --color-2: #a8caa5; --color-3: #77b795; --color-4: #788a85; --color-5: #91555f. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. Restrained colors convey professionalism and trust. 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