← Back to Editor

#682221 · #ABBBAC · #CDDDBB · #FFFFFF · #CACCBB

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

#682221

Crimson · Maroon · Wine Red

HEX
#682221
RGB
rgb(104, 34, 33)
HSL
hsl(1, 52%, 27%)
HSB
hsb(1, 68%, 41%)
CMYK
cmyk(0%, 67%, 68%, 59%)
Oklch
oklch(36.0% 0.101 24.4)

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

#ABBBAC

Celadon · DarkGray · Apple Green

HEX
#ABBBAC
RGB
rgb(171, 187, 172)
HSL
hsl(124, 11%, 70%)
HSB
hsb(124, 9%, 73%)
CMYK
cmyk(9%, 0%, 8%, 27%)
Oklch
oklch(77.5% 0.027 147.1)

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

#CDDDBB

Willow Green · LightGray · Apple Green

HEX
#CDDDBB
RGB
rgb(205, 221, 187)
HSL
hsl(88, 33%, 80%)
HSB
hsb(88, 15%, 87%)
CMYK
cmyk(7%, 0%, 15%, 13%)
Oklch
oklch(87.6% 0.049 128.0)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#CACCBB

Fresh Green · Silver · Lemon Cream

HEX
#CACCBB
RGB
rgb(202, 204, 187)
HSL
hsl(67, 14%, 77%)
HSB
hsb(67, 8%, 80%)
CMYK
cmyk(1%, 0%, 8%, 20%)
Oklch
oklch(83.9% 0.023 112.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

682221
216769

Analogous

692144
682221
694621

Triadic

682221
216922
222169

Split-Comp.

682221
216946
214469

Tetradic

682221
446921
216769
462169

Contrast Matrix WCAG 2.1 Contrast

682221
ABBBAC
CDDDBB
FFFFFF
CACCBB
—
5.7
AA
8.0
AAA
11.4
AAA
7.0
AA
5.7
AA
—
1.4
Fail
2.0
Fail
1.2
Fail
8.0
AAA
1.4
Fail
—
1.4
Fail
1.1
Fail
11.4
AAA
2.0
Fail
1.4
Fail
—
1.6
Fail
7.0
AA
1.2
Fail
1.1
Fail
1.6
Fail
—
White BG
11.4AAA
2.0Fail
1.4Fail
1.0Fail
1.6Fail
Black BG
1.8Fail
10.4AAA
14.7AAA
21.0AAA
12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4921
B2B2B0
D4D4C3
FFFFFF
CBCBBF

Deuteranopia

4E5321
B1B0B1
D3D2C5
FFFFFF
CBCBC0

Tritanopia

652121
ACB2B3
CECACB
FFFFFF
CAC2C3

Achromatopsia

373737
B5B5B5
D4D4D4
FFFFFF
C9C9C9

Shades & Tints Shades & Tints

#682221

Dark
Light

#ABBBAC

Dark
Light

#CDDDBB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #682221;
  --color-2: #abbbac;
  --color-3: #cdddbb;
  --color-4: #ffffff;
  --color-5: #caccbb;
}

SCSS

$color-1: #682221;
$color-2: #abbbac;
$color-3: #cdddbb;
$color-4: #ffffff;
$color-5: #caccbb;

TAILWIND

colors: {
  'brand-1': '#682221',
  'brand-2': '#abbbac',
  'brand-3': '#cdddbb',
  'brand-4': '#ffffff',
  'brand-5': '#caccbb',
}

RGB Array

[104, 34, 33], [171, 187, 172], [205, 221, 187], [255, 255, 255], [202, 204, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #682221, #ABBBAC, #CDDDBB, #FFFFFF, #CACCBB is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #682221; --color-2: #abbbac; --color-3: #cdddbb; --color-4: #ffffff; --color-5: #caccbb. 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 beauty, lifestyle, arts 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